feat(data-table): support array values and maxVisible in badge columns

- Extend badge accessor type to accept string[] in addition to primitives
- renderBadge handles arrays with multiple Badge rendering
- Add maxVisible + Popover overflow (same pattern as DescriptionCard)
- Update type test: badge accessor now allows arrays
- Add rendering tests for multi-badge and maxVisible in DataTable

Author: IzumiSy

packages/core/src/components/data-table/cell-renderers.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { Link } from "react-router";
+import { Popover } from "@base-ui/react/popover";
 import { Badge } from "@/components/badge";
 import { resolveBadgeVariant, resolveBadgeLabel } from "@/components/badge-utils";
 import type {
@@ -121,10 +122,52 @@ function renderDate(value: unknown, options: DateCellOptions | undefined): React
 
 function renderBadge(value: unknown, options: BadgeCellOptions | undefined): ReactNode {
   if (isEmpty(value)) return PLACEHOLDER;
-  const key = String(value);
-  const variant = resolveBadgeVariant(key, options);
-  const label = resolveBadgeLabel(key, options) ?? key;
-  return <Badge variant={variant}>{label}</Badge>;
+
+  const values = Array.isArray(value) ? value : [value];
+  if (values.every((v) => isEmpty(v))) return PLACEHOLDER;
+
+  const maxVisible = options?.maxVisible;
+  const nonEmpty = values.filter((v) => !isEmpty(v));
+  const visible = maxVisible != null ? nonEmpty.slice(0, maxVisible) : nonEmpty;
+  const overflow = maxVisible != null ? nonEmpty.slice(maxVisible) : [];
+
+  const renderSingleBadge = (raw: unknown, i: number) => {
+    const key = String(raw);
+    const variant = resolveBadgeVariant(key, options);
+    const label = resolveBadgeLabel(key, options) ?? key;
+    return (
+      <Badge key={i} variant={variant}>
+        {label}
+      </Badge>
+    );
+  };
+
+  // Single badge without array — simple path
+  if (visible.length === 1 && overflow.length === 0) {
+    return renderSingleBadge(visible[0], 0);
+  }
+
+  return (
+    <div className="astw:flex astw:flex-wrap astw:gap-1">
+      {visible.map((raw, i) => renderSingleBadge(raw, i))}
+      {overflow.length > 0 && (
+        <Popover.Root>
+          <Popover.Trigger className="astw:cursor-default astw:rounded-md astw:px-2 astw:py-0.5 astw:text-xs astw:font-medium astw:text-muted-foreground astw:hover:bg-muted astw:transition-colors">
+            +{overflow.length}
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Positioner sideOffset={4} side="bottom" align="start">
+              <Popover.Popup className="astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:origin-(--transform-origin) astw:rounded-md astw:border astw:p-2 astw:shadow-md astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95">
+                <div className="astw:flex astw:flex-wrap astw:gap-1">
+                  {overflow.map((raw, i) => renderSingleBadge(raw, i))}
+                </div>
+              </Popover.Popup>
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>
+      )}
+    </div>
+  );
 }
 
 function renderLink<TRow extends Record<string, unknown>>(

packages/core/src/components/data-table/data-table.test.tsx

@@ -629,6 +629,81 @@ describe("DataTable", () => {
       expect(container.textContent).toContain("unknown");
     });
 
+    it("renders multiple badges from array accessor", () => {
+      const rows = [
+        {
+          id: "1",
+          name: "Item",
+          tags: ["urgent", "fragile"],
+          status: "shipped",
+          amount: 100,
+          date: "2026-01-01",
+          detailUrl: "/items/1",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<(typeof rows)[number]>({
+          columns: [
+            {
+              label: "Tags",
+              type: "badge",
+              accessor: (r) => r.tags,
+              typeOptions: {
+                badgeVariantMap: { urgent: "error", fragile: "warning" },
+              },
+            },
+          ],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("urgent");
+      expect(container.textContent).toContain("fragile");
+    });
+
+    it("renders maxVisible badges with +N overflow in DataTable", () => {
+      const rows = [
+        {
+          id: "1",
+          name: "Item",
+          tags: ["a", "b", "c", "d"],
+          status: "shipped",
+          amount: 100,
+          date: "2026-01-01",
+          detailUrl: "/items/1",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<(typeof rows)[number]>({
+          columns: [
+            {
+              label: "Tags",
+              type: "badge",
+              accessor: (r) => r.tags,
+              typeOptions: { maxVisible: 2 },
+            },
+          ],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("a");
+      expect(container.textContent).toContain("b");
+      expect(container.textContent).toContain("+2");
+      expect(container.textContent).not.toContain("c");
+      expect(container.textContent).not.toContain("d");
+    });
+
     it("renders link cells with anchor when href is provided", () => {
       function RouterWrapper({ children }: { children: ReactNode }) {
         return <MemoryRouter>{wrapper({ children })}</MemoryRouter>;
@@ -730,7 +805,7 @@ describe("DataTable", () => {
       const moneyArr: Column<TypedRow> = { type: "money", accessor: () => [100] };
       // @ts-expect-error — date accessor cannot return an array
       const dateArr: Column<TypedRow> = { type: "date", accessor: () => [2026, 5, 13] };
-      // @ts-expect-error — badge accessor cannot return an array
+      // badge accessor CAN return an array (multi-badge support)
       const badgeArr: Column<TypedRow> = { type: "badge", accessor: () => ["a", "b"] };
       // @ts-expect-error — link accessor cannot return a plain object
       const linkObj: Column<TypedRow> = {

packages/core/src/components/data-table/types.ts

@@ -69,7 +69,10 @@ export interface DateCellOptions {
 }
 
 /** Options for `type: "badge"` cells. */
-export interface BadgeCellOptions extends BadgeOptions {}
+export interface BadgeCellOptions extends BadgeOptions {
+  /** Maximum number of badges to display before showing a "+N" overflow indicator */
+  maxVisible?: number;
+}
 
 /** Options for `type: "link"` cells. `href` is required. */
 export interface LinkCellOptions<TRow extends Record<string, unknown>> {
@@ -182,7 +185,7 @@ export type ColumnTypeBranch<TRow extends Record<string, unknown>> =
   | {
       type: "badge";
       typeOptions?: BadgeCellOptions;
-      accessor?: (row: TRow) => string | number | boolean | null | undefined;
+      accessor?: (row: TRow) => string | string[] | number | boolean | null | undefined;
     }
   | {
       type: "link";