@multiplatform.one/table 6.0.0

package/src/components/TableInput/index.native.tsx

@@ -0,0 +1,242 @@
+import { useCallback, useMemo } from "react";
+import { Field, useForm } from "@tanstack/react-form";
+import { FlashList } from "@shopify/flash-list";
+import { Button } from "@multiplatform.one/forms";
+import { TrashIcon, PlusIcon } from "@phosphor-icons/react";
+import { Text, View, XStack, YStack } from "tamagui";
+import type {
+  DataTableColumn,
+  DataTableData,
+  DataTableFieldProps,
+  DataTableField,
+} from "../../types";
+import { DataTableCell } from "../DataTableCell";
+
+export interface TableInputProps<TData extends DataTableData = DataTableData> {
+  /** Data array for the table */
+  data: TData[];
+  /** Column definitions with field type for cell rendering */
+  columns: DataTableColumn<TData>[];
+  /** Callback when data changes */
+  onDataChange?: (data: TData[]) => void;
+  /** Callback when a specific cell changes */
+  onCellChange?: (rowIndex: number, columnId: string, value: unknown) => void;
+  /** Form field name for TanStack Form integration */
+  name?: string;
+  /** TanStack Form instance */
+  form?: ReturnType<typeof useForm>;
+  /** Whether the table is read-only */
+  readOnly?: boolean;
+  /** Whether to show row numbers */
+  showRowNumbers?: boolean;
+  /** Whether to show add row button */
+  showAddRow?: boolean;
+  /** Whether to show delete row buttons */
+  showDeleteRow?: boolean;
+  /** Minimum number of rows */
+  minRows?: number;
+  /** Maximum number of rows */
+  maxRows?: number;
+  /** Default values for new rows */
+  defaultRow?: Partial<TData>;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Accessible label */
+  "aria-label"?: string;
+}
+
+export function TableInput<TData extends DataTableData = DataTableData>({
+  data,
+  columns,
+  onDataChange,
+  onCellChange,
+  name,
+  form,
+  readOnly = false,
+  showRowNumbers = true,
+  showAddRow = true,
+  showDeleteRow = true,
+  minRows,
+  maxRows,
+  defaultRow,
+  emptyMessage = "No rows",
+  "aria-label": ariaLabel = "Table input",
+}: TableInputProps<TData>) {
+  const handleCellChange = useCallback(
+    (rowIndex: number, columnId: string, value: unknown) => {
+      if (onCellChange) {
+        onCellChange(rowIndex, columnId, value);
+      }
+      if (onDataChange) {
+        const newData = [...data];
+        newData[rowIndex] = {
+          ...newData[rowIndex],
+          [columnId]: value,
+        };
+        onDataChange(newData);
+      }
+    },
+    [data, onDataChange, onCellChange],
+  );
+
+  const handleAddRow = useCallback(() => {
+    if (maxRows && data.length >= maxRows) return;
+    const newRow = {
+      id: `row-${Date.now()}`,
+      ...defaultRow,
+    } as unknown as TData;
+    onDataChange?.([...data, newRow]);
+  }, [data, onDataChange, defaultRow, maxRows]);
+
+  const handleDeleteRow = useCallback(
+    (rowIndex: number) => {
+      if (minRows && data.length <= minRows) return;
+      const newData = data.filter((_, index) => index !== rowIndex);
+      onDataChange?.(newData);
+    },
+    [data, onDataChange, minRows],
+  );
+
+  const canAddRow = !maxRows || data.length < maxRows;
+  const canDelete = !minRows || data.length > (minRows || 0);
+
+  const columnIds = useMemo(
+    () =>
+      columns.map((col) =>
+        typeof col.accessorKey === "string" ? col.accessorKey : col.id || String(col.accessorKey),
+      ),
+    [columns],
+  );
+
+  const renderHeader = () => (
+    <XStack
+      backgroundColor="$gray3"
+      borderBottomWidth={1}
+      borderBottomColor="$borderColor"
+      paddingVertical="$2"
+      paddingHorizontal="$2"
+    >
+      {showRowNumbers && (
+        <View width={40} paddingHorizontal="$1">
+          <Text fontWeight="600" color="$gray11" fontSize="$2">
+            #
+          </Text>
+        </View>
+      )}
+      {columns.map((col, index) => (
+        <View key={columnIds[index]} flex={1} paddingHorizontal="$1">
+          <Text fontWeight="600" color="$gray12" fontSize="$2">
+            {typeof col.header === "string" ? col.header : columnIds[index]}
+          </Text>
+        </View>
+      ))}
+      {showDeleteRow && !readOnly && <View width={50} />}
+    </XStack>
+  );
+
+  const renderRow = ({ item, index }: { item: TData; index: number }) => (
+    <XStack
+      borderBottomWidth={1}
+      borderBottomColor="$borderColor"
+      paddingVertical="$2"
+      paddingHorizontal="$2"
+      backgroundColor={index % 2 === 0 ? "$background" : "$gray2"}
+    >
+      {showRowNumbers && (
+        <View width={40} paddingHorizontal="$1" justifyContent="center">
+          <Text color="$gray11" fontSize="$2">
+            {index + 1}
+          </Text>
+        </View>
+      )}
+      {columns.map((col, colIndex) => {
+        const columnId = columnIds[colIndex];
+        const value = item[columnId as keyof TData];
+        const field = (col.field || "input") as DataTableField;
+        const fieldProps = col.fieldProps as DataTableFieldProps | undefined;
+
+        return (
+          <View key={columnId} flex={1} paddingHorizontal="$1">
+            <DataTableCell
+              value={value}
+              onChange={(newValue) => handleCellChange(index, columnId, newValue)}
+              field={field}
+              fieldProps={fieldProps}
+              readOnly={readOnly}
+              columnId={columnId}
+              rowIndex={index}
+              rowData={item}
+            />
+          </View>
+        );
+      })}
+      {showDeleteRow && !readOnly && (
+        <View width={50} justifyContent="center" alignItems="center">
+          <Button
+            size="$2"
+            outlined
+            onPress={() => handleDeleteRow(index)}
+            disabled={!canDelete}
+            aria-label="Delete row"
+          >
+            <TrashIcon size={16} color="$red10" />
+          </Button>
+        </View>
+      )}
+    </XStack>
+  );
+
+  const renderEmpty = () => (
+    <View padding="$4" alignItems="center">
+      <Text color="$gray11">{emptyMessage}</Text>
+    </View>
+  );
+
+  const renderContent = () => (
+    <YStack
+      borderWidth={1}
+      borderColor="$borderColor"
+      borderRadius="$2"
+      overflow="hidden"
+      accessibilityLabel={ariaLabel}
+    >
+      {renderHeader()}
+      {data.length === 0 ? (
+        renderEmpty()
+      ) : (
+        <FlashList
+          data={data}
+          renderItem={renderRow}
+          drawDistance={200}
+          keyExtractor={(item, index) => (item as DataTableData).id?.toString() || `row-${index}`}
+        />
+      )}
+      {showAddRow && !readOnly && (
+        <XStack padding="$2" borderTopWidth={1} borderTopColor="$borderColor">
+          <Button
+            size="$2"
+            outlined
+            onPress={handleAddRow}
+            disabled={!canAddRow}
+            icon={<PlusIcon size={16} />}
+          >
+            Add Row
+          </Button>
+        </XStack>
+      )}
+    </YStack>
+  );
+
+  // If form integration is requested, wrap with Field
+  if (form && name) {
+    return (
+      <Field name={name} form={form}>
+        {() => renderContent()}
+      </Field>
+    );
+  }
+
+  return renderContent();
+}
+
+export type { DataTableColumn, DataTableData, DataTableField, DataTableFieldProps };

package/src/components/TableInput/index.tsx

@@ -0,0 +1,256 @@
+import { useCallback, useMemo } from "react";
+import { Field, useForm } from "@tanstack/react-form";
+import { flexRender, getCoreRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table";
+import { Button } from "@multiplatform.one/forms";
+import { TrashIcon, PlusIcon } from "@phosphor-icons/react";
+import { Text, XStack, YStack } from "tamagui";
+import type {
+  DataTableColumn,
+  DataTableData,
+  DataTableFieldProps,
+  DataTableField,
+} from "../../types";
+import { Table } from "@multiplatform.one/table-primitives";
+import { DataTableCell } from "../DataTableCell";
+
+export interface TableInputProps<TData extends DataTableData = DataTableData> {
+  /** Data array for the table */
+  data: TData[];
+  /** Column definitions with field type for cell rendering */
+  columns: DataTableColumn<TData>[];
+  /** Callback when data changes */
+  onDataChange?: (data: TData[]) => void;
+  /** Callback when a specific cell changes */
+  onCellChange?: (rowIndex: number, columnId: string, value: unknown) => void;
+  /** Form field name for TanStack Form integration */
+  name?: string;
+  /** TanStack Form instance */
+  form?: ReturnType<typeof useForm>;
+  /** Whether the table is read-only */
+  readOnly?: boolean;
+  /** Whether to show row numbers */
+  showRowNumbers?: boolean;
+  /** Whether to show add row button */
+  showAddRow?: boolean;
+  /** Whether to show delete row buttons */
+  showDeleteRow?: boolean;
+  /** Minimum number of rows */
+  minRows?: number;
+  /** Maximum number of rows */
+  maxRows?: number;
+  /** Default values for new rows */
+  defaultRow?: Partial<TData>;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Accessible label */
+  "aria-label"?: string;
+}
+
+export function TableInput<TData extends DataTableData = DataTableData>({
+  data,
+  columns,
+  onDataChange,
+  onCellChange,
+  name,
+  form,
+  readOnly = false,
+  showRowNumbers = true,
+  showAddRow = true,
+  showDeleteRow = true,
+  minRows,
+  maxRows,
+  defaultRow,
+  emptyMessage = "No rows",
+  "aria-label": ariaLabel = "Table input",
+}: TableInputProps<TData>) {
+  const handleCellChange = useCallback(
+    (rowIndex: number, columnId: string, value: unknown) => {
+      if (onCellChange) {
+        onCellChange(rowIndex, columnId, value);
+      }
+      if (onDataChange) {
+        const newData = [...data];
+        newData[rowIndex] = {
+          ...newData[rowIndex],
+          [columnId]: value,
+        };
+        onDataChange(newData);
+      }
+    },
+    [data, onDataChange, onCellChange],
+  );
+
+  const handleAddRow = useCallback(() => {
+    if (maxRows && data.length >= maxRows) return;
+    const newRow = {
+      id: `row-${Date.now()}`,
+      idx: data.length + 1,
+      ...defaultRow,
+    } as unknown as TData;
+    onDataChange?.([...data, newRow]);
+  }, [data, onDataChange, defaultRow, maxRows]);
+
+  const handleDeleteRow = useCallback(
+    (rowIndex: number) => {
+      if (minRows && data.length <= minRows) return;
+      const newData = data.filter((_, index) => index !== rowIndex);
+      onDataChange?.(newData);
+    },
+    [data, onDataChange, minRows],
+  );
+
+  const tableColumns = useMemo(() => {
+    const cols: ColumnDef<TData, unknown>[] = [];
+
+    // Row number column
+    if (showRowNumbers) {
+      cols.push({
+        id: "_rowNumber",
+        header: "#",
+        size: 50,
+        cell: ({ row }) => (
+          <Text color="$gray11" fontSize="$2">
+            {row.index + 1}
+          </Text>
+        ),
+      });
+    }
+
+    // Data columns
+    columns.forEach((col) => {
+      const columnId =
+        typeof col.accessorKey === "string" ? col.accessorKey : col.id || String(col.accessorKey);
+
+      cols.push({
+        ...col,
+        id: columnId,
+        cell: ({ row }) => {
+          const value = row.original[columnId as keyof TData];
+          const field = (col.field || "input") as DataTableField;
+          const fieldProps = col.fieldProps as DataTableFieldProps | undefined;
+
+          return (
+            <DataTableCell
+              value={value}
+              onChange={(newValue) => handleCellChange(row.index, columnId, newValue)}
+              field={field}
+              fieldProps={fieldProps}
+              readOnly={readOnly}
+              columnId={columnId}
+              rowIndex={row.index}
+              rowData={row.original}
+            />
+          );
+        },
+      } as ColumnDef<TData, unknown>);
+    });
+
+    // Delete column
+    if (showDeleteRow && !readOnly) {
+      cols.push({
+        id: "_actions",
+        header: "",
+        size: 50,
+        cell: ({ row }) => {
+          const canDelete = !minRows || data.length > minRows;
+          return (
+            <Button
+              size="$2"
+              outlined
+              onPress={() => handleDeleteRow(row.index)}
+              disabled={!canDelete}
+              aria-label="Delete row"
+            >
+              <TrashIcon size={16} color="$red10" />
+            </Button>
+          );
+        },
+      });
+    }
+
+    return cols;
+  }, [
+    columns,
+    showRowNumbers,
+    showDeleteRow,
+    readOnly,
+    handleCellChange,
+    handleDeleteRow,
+    data.length,
+    minRows,
+  ]);
+
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const canAddRow = !maxRows || data.length < maxRows;
+
+  const renderContent = () => (
+    <YStack gap="$2">
+      <Table aria-label={ariaLabel}>
+        <Table.Head>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Table.Row key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <Table.HeaderCell key={header.id} style={{ width: header.getSize() }}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Head>
+        <Table.Body>
+          {table.getRowModel().rows.length === 0 ? (
+            <Table.Row>
+              <Table.Cell style={{ textAlign: "center" }}>
+                <Text color="$gray11">{emptyMessage}</Text>
+              </Table.Cell>
+            </Table.Row>
+          ) : (
+            table.getRowModel().rows.map((row) => (
+              <Table.Row key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <Table.Cell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))
+          )}
+        </Table.Body>
+      </Table>
+
+      {showAddRow && !readOnly && (
+        <XStack>
+          <Button
+            size="$2"
+            outlined
+            onPress={handleAddRow}
+            disabled={!canAddRow}
+            icon={<PlusIcon size={16} />}
+          >
+            Add Row
+          </Button>
+        </XStack>
+      )}
+    </YStack>
+  );
+
+  // If form integration is requested, wrap with Field
+  if (form && name) {
+    return (
+      <Field name={name} form={form}>
+        {() => renderContent()}
+      </Field>
+    );
+  }
+
+  return renderContent();
+}
+
+export type { DataTableColumn, DataTableData, DataTableField, DataTableFieldProps };

package/src/components/componentConsistency.spec.tsx

@@ -0,0 +1,83 @@
+/**
+ * Component consistency tests - 4 focused tests for Task Group 3.
+ *
+ * These tests verify that table sub-components use the correct shared
+ * components from @multiplatform.one/forms rather than raw Tamagui
+ * primitives or native HTML elements.
+ *
+ * 1. ColumnHeaderFilter renders forms Select (not Tamagui Select)
+ * 2. DataTableGrouping renders forms Select (not raw HTML <select>)
+ * 3. DataTableToolbar search renders forms Input (not Tamagui Input)
+ * 4. TableInput uses Phosphor icons (no @tamagui/lucide-icons imports)
+ */
+
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const SRC_DIR = resolve(__dirname);
+
+function readSource(relativePath: string): string {
+  return readFileSync(resolve(SRC_DIR, relativePath), "utf-8");
+}
+
+describe("Component Consistency", () => {
+  it("ColumnHeaderFilter uses forms Select, not Tamagui Select", () => {
+    const source = readSource("ColumnHeaderFilter/index.tsx");
+
+    // Should import Select from @multiplatform.one/forms
+    expect(source).toMatch(/@multiplatform\.one\/forms/);
+    expect(source).toMatch(/Select/);
+
+    // Should NOT import Select from tamagui
+    const tamaguiImportLines = source
+      .split("\n")
+      .filter((line) => line.includes("from") && line.includes("tamagui"));
+    const tamaguiSelectImport = tamaguiImportLines.some(
+      (line) => /\bSelect\b/.test(line) && /from\s+["']tamagui["']/.test(line),
+    );
+    expect(tamaguiSelectImport).toBe(false);
+  });
+
+  it("DataTableGrouping uses forms Select, not raw HTML <select>", () => {
+    const source = readSource("DataTableGrouping/index.tsx");
+
+    // Should import Select from @multiplatform.one/forms
+    expect(source).toMatch(/@multiplatform\.one\/forms/);
+
+    // Should NOT contain raw HTML <select> elements
+    expect(source).not.toMatch(/<select[\s>]/);
+    expect(source).not.toMatch(/<\/select>/);
+    expect(source).not.toMatch(/<option[\s>]/);
+    expect(source).not.toMatch(/<\/option>/);
+  });
+
+  it("DataTableToolbar search uses forms Input, not raw Tamagui Input", () => {
+    const source = readSource("DataTableToolbar/index.tsx");
+
+    // Should import Input from @multiplatform.one/forms
+    expect(source).toMatch(/@multiplatform\.one\/forms/);
+
+    // Should NOT import Input from tamagui (styled wrapper around TInput is acceptable
+    // only if TInput is NOT used as a standalone input component)
+    const tamaguiImportLines = source
+      .split("\n")
+      .filter(
+        (line) => line.includes("from") && line.includes("tamagui") && !line.startsWith("//"),
+      );
+    const tamaguiInputImport = tamaguiImportLines.some(
+      (line) => /\bInput\b/.test(line) && /from\s+["']tamagui["']/.test(line),
+    );
+    expect(tamaguiInputImport).toBe(false);
+  });
+
+  it("TableInput uses Phosphor icons, not @tamagui/lucide-icons", () => {
+    const source = readSource("TableInput/index.tsx");
+
+    // Should NOT import from @tamagui/lucide-icons
+    expect(source).not.toMatch(/@tamagui\/lucide-icons/);
+
+    // Should use @phosphor-icons/react for icons
+    expect(source).toMatch(/@phosphor-icons\/react/);
+  });
+});