@multiplatform.one/table 6.0.0

package/src/components/DataTable/DataTableStateContext.ts

@@ -0,0 +1,57 @@
+/**
+ * DataTableStateContext - regular React context for sharing table state.
+ *
+ * Shares the useDataTable return value (table instance, state, actions,
+ * computed values) across the compound tree. Sub-components consume this
+ * context instead of receiving state/action props.
+ *
+ * Uses regular createContext (not createStyledContext) because this
+ * shares non-style state -- table instance, callbacks, computed values.
+ */
+
+import { createContext, useContext } from "react";
+import type { Table as ReactTable } from "@tanstack/react-table";
+import type { DataTableState } from "../../types";
+
+export interface DataTableStateContextValue<TData = any> {
+  table: ReactTable<TData>;
+  state: DataTableState;
+  actions: {
+    setGlobalFilter: (value: string) => void;
+    setFilters: (filters: any[]) => void;
+    addFilter: (filter: any) => void;
+    removeFilter: (filterId: string) => void;
+    clearFilters: () => void;
+    setPagination: (pagination: any) => void;
+    setSorting: (sorting: any) => void;
+    toggleColumnVisibility: (columnId: string, visible?: boolean) => void;
+    setColumnOrder: (order: string[]) => void;
+    setColumnSizing: (sizing: Record<string, number>) => void;
+    saveView: (name: string) => void;
+    loadView: (viewId: string) => void;
+    resetToDefault: () => void;
+    setExpanded?: (expanded: any) => void;
+    [key: string]: any;
+  };
+  computed: {
+    filteredData: any[];
+    paginatedData: any[];
+    totalPages: number;
+    hasActiveFilters: boolean;
+    activeFilterCount: number;
+    [key: string]: any;
+  };
+}
+
+export const DataTableStateContext = createContext<DataTableStateContextValue | null>(null);
+
+/**
+ * Hook for sub-components to access the DataTable state context.
+ *
+ * Returns the table instance, state, actions, and computed values
+ * from the nearest DataTable ancestor. Returns null when no provider
+ * is present (for example when a sub-component is used with explicit props only).
+ */
+export function useDataTableState<TData = any>(): DataTableStateContextValue<TData> | null {
+  return useContext(DataTableStateContext) as DataTableStateContextValue<TData> | null;
+}

package/src/components/DataTable/DataTableVirtualized.tsx

@@ -0,0 +1,115 @@
+/**
+ * DataTableVirtualized - virtual scroll mode for DataTable.
+ *
+ * Uses TanStack Virtual to render only visible rows, enabling
+ * performant display of large datasets. Renders absolute-positioned
+ * rows inside a scrollable container with a filler area for
+ * column border extension.
+ */
+
+import type React from "react";
+import { View } from "tamagui";
+
+const rowHeightPx = 40;
+
+export interface DataTableVirtualizedProps {
+  virtualItems: any[];
+  totalSize: number;
+  bodyScrollRef: React.RefObject<HTMLDivElement | null>;
+  virtualizationHeight: number | undefined;
+  tableRows: any[];
+  headerGroups: any[];
+  showRowNumbers: boolean;
+  enableRowExpansion: boolean;
+  showDeleteRow: boolean;
+  readOnly: boolean;
+  enableKeyboardNavigation: boolean;
+  keyboardNav: any;
+  getColSizeProps: (col: any) => any;
+  renderRowContent: (row: any, rowIndex: number, isLastRow: boolean) => React.ReactNode;
+  extraColumnsBefore: number;
+  extraColumnsAfter: number;
+  table: any;
+}
+
+export function DataTableVirtualized({
+  virtualItems,
+  totalSize,
+  bodyScrollRef,
+  virtualizationHeight,
+  tableRows,
+  headerGroups,
+  showRowNumbers,
+  enableRowExpansion,
+  showDeleteRow,
+  readOnly,
+  enableKeyboardNavigation,
+  keyboardNav,
+  getColSizeProps,
+  renderRowContent,
+}: DataTableVirtualizedProps) {
+  return (
+    <div
+      style={{
+        height: virtualizationHeight,
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+      }}
+      ref={bodyScrollRef as any}
+      role="rowgroup"
+    >
+      <div
+        style={{
+          height: totalSize,
+          width: "100%",
+          position: "relative",
+          flexShrink: 0,
+        }}
+      >
+        {virtualItems.map((virtualRow: any) => {
+          const row = tableRows[virtualRow.index];
+          if (!row) return null;
+          const isLastRow = virtualRow.index === tableRows.length - 1;
+
+          return (
+            <View
+              key={row.id}
+              position="absolute"
+              top={0}
+              left={0}
+              width="100%"
+              style={{
+                transform: `translateY(${virtualRow.start}px)`,
+                height: virtualRow.size,
+                minHeight: rowHeightPx,
+              }}
+              flexDirection="row"
+              backgroundColor={
+                enableKeyboardNavigation &&
+                keyboardNav.isNavigating &&
+                virtualRow.index === keyboardNav.focusedRowIndex
+                  ? "$color4"
+                  : virtualRow.index % 2 === 0
+                    ? "$color1"
+                    : "$color2"
+              }
+              role="row"
+              aria-rowindex={virtualRow.index + 1}
+            >
+              {renderRowContent(row, virtualRow.index, isLastRow)}
+            </View>
+          );
+        })}
+      </div>
+      {/* Filler to extend background when rows don't fill viewport */}
+      <View
+        flexDirection="row"
+        backgroundColor="$color1"
+        flex={1}
+        minHeight={0}
+        aria-hidden={true}
+      />
+    </div>
+  );
+}

package/src/components/DataTable/FieldsInCells.stories.tsx

@@ -0,0 +1,220 @@
+/**
+ * Visual harness for "fields in cells" — renders one column per field type
+ * in both readOnly and editable modes so we can eyeball regressions when
+ * the FieldDisplay dispatcher is expanded.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import React from "react";
+import { Text, View, YStack, H3 } from "tamagui";
+import type { DataTableColumn, DataTableData } from "../../types";
+import { DataTable } from "./index";
+
+interface SampleRow extends DataTableData {
+  id: string;
+  name: string;
+  count: number;
+  price: number;
+  status: string;
+  framework: string;
+  active: boolean;
+  notify: boolean;
+  joined: string;
+  shipBy: string;
+  range: string;
+  rangeEnd: string;
+  rating: number;
+  progress: number;
+  color: string;
+  tags: string[];
+}
+
+const sampleData: SampleRow[] = [
+  {
+    id: "1",
+    name: "acme-website",
+    count: 142,
+    price: 29.99,
+    status: "live",
+    framework: "next",
+    active: true,
+    notify: true,
+    joined: "2024-03-12",
+    shipBy: "2024-11-20T14:30:00Z",
+    range: "2024-11-07",
+    rangeEnd: "2024-11-15",
+    rating: 4,
+    progress: 78,
+    color: "#9747ff",
+    tags: ["frontend", "mobile"],
+  },
+  {
+    id: "2",
+    name: "tamagui-docs",
+    count: 89,
+    price: 0,
+    status: "live",
+    framework: "tamagui",
+    active: true,
+    notify: false,
+    joined: "2023-08-04",
+    shipBy: "2024-12-01T09:00:00Z",
+    range: "2024-10-01",
+    rangeEnd: "2024-10-30",
+    rating: 5,
+    progress: 100,
+    color: "#30a46c",
+    tags: ["docs"],
+  },
+  {
+    id: "3",
+    name: "mobile-app",
+    count: 34,
+    price: 1299,
+    status: "draft",
+    framework: "expo",
+    active: false,
+    notify: true,
+    joined: "2024-06-21",
+    shipBy: null as any,
+    range: null as any,
+    rangeEnd: null as any,
+    rating: 3,
+    progress: 42,
+    color: "#ebbc00",
+    tags: [],
+  },
+];
+
+const statusOptions = [
+  { label: "Live", value: "live" },
+  { label: "Building", value: "building" },
+  { label: "Draft", value: "draft" },
+  { label: "Failed", value: "failed" },
+];
+
+const frameworkOptions = [
+  { label: "Next.js", value: "next" },
+  { label: "Tamagui", value: "tamagui" },
+  { label: "Expo", value: "expo" },
+  { label: "Astro", value: "astro" },
+  { label: "Hono", value: "hono" },
+];
+
+const columns: DataTableColumn<SampleRow>[] = [
+  {
+    accessorKey: "name",
+    header: "Name (input)",
+    field: "input",
+  },
+  {
+    accessorKey: "count",
+    header: "Count (stepper)",
+    field: "stepper",
+    fieldProps: { min: 0, max: 9999 },
+  },
+  {
+    accessorKey: "price",
+    header: "Price (currency)",
+    field: "stepper",
+    fieldProps: { precision: 2, currency: "USD" },
+  },
+  {
+    accessorKey: "status",
+    header: "Status (select)",
+    field: "select",
+    fieldProps: { options: statusOptions },
+  },
+  {
+    accessorKey: "framework",
+    header: "Framework (combobox)",
+    field: "combobox",
+    fieldProps: { options: frameworkOptions },
+  },
+  {
+    accessorKey: "active",
+    header: "Active (checkbox)",
+    field: "checkbox",
+  },
+  {
+    accessorKey: "notify",
+    header: "Notify (switch)",
+    field: "switch",
+  },
+  {
+    accessorKey: "joined",
+    header: "Joined (date)",
+    field: "datepicker",
+  },
+  {
+    accessorKey: "shipBy",
+    header: "Ship by (datetime)",
+    field: "datetimepicker",
+  },
+  {
+    accessorKey: "rating",
+    header: "Rating",
+    field: "rating",
+    fieldProps: { maxRating: 5 },
+  },
+  {
+    accessorKey: "progress",
+    header: "Progress",
+    field: "progress",
+    fieldProps: { min: 0, max: 100 },
+  },
+  {
+    accessorKey: "color",
+    header: "Color",
+    field: "colorpicker",
+  },
+];
+
+const meta: Meta<typeof DataTable> = {
+  title: "Table/Fields in Cells",
+  component: DataTable,
+  parameters: { layout: "fullscreen" },
+  decorators: [
+    (Story) => (
+      <View flex={1} padding="$4" width="100%">
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTable>;
+
+export const ReadOnly: Story = {
+  render: () => (
+    <YStack gap="$4" flex={1} minHeight={0}>
+      <YStack gap="$2">
+        <H3>Read-only — every cell routes through FieldDisplay</H3>
+        <Text color="$placeholderColor">
+          Lightweight view-only render per field type. No edit UI mounted.
+        </Text>
+      </YStack>
+      <YStack flex={1} minHeight={0}>
+        <DataTable<SampleRow> data={sampleData} columns={columns} readOnly />
+      </YStack>
+    </YStack>
+  ),
+};
+
+export const Editable: Story = {
+  render: () => (
+    <YStack gap="$4" flex={1} minHeight={0}>
+      <YStack gap="$2">
+        <H3>Editable — cells mount the full Edit field component</H3>
+        <Text color="$placeholderColor">
+          Same column set, edit mode. Use this view to compare field heights and spot
+          popover-clipping issues against the read-only baseline above.
+        </Text>
+      </YStack>
+      <YStack flex={1} minHeight={0}>
+        <DataTable<SampleRow> data={sampleData} columns={columns} />
+      </YStack>
+    </YStack>
+  ),
+};