@multiplatform.one/table 6.0.0

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

@@ -0,0 +1,913 @@
+/**
+ * DataTable - compound component for data tables (native variant).
+ *
+ * Uses FlashList for virtualization on native platforms.
+ * Exports the same interface as the web version.
+ */
+
+import {
+  CaretDownIcon,
+  CaretRightIcon,
+  CaretUpDownIcon,
+  PlusIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+import { FlashList, type FlashListRef } from "@shopify/flash-list";
+import { Button, Field, useFormField, zIndex } from "@multiplatform.one/forms";
+import { flexRender } from "@tanstack/react-table";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useRef, useMemo, useCallback } from "react";
+import { ScrollView, Spinner, Text, View, useMedia, withStaticProperties } from "tamagui";
+import { useTranslation } from "react-i18next";
+import { useDataTable } from "../../hooks/useDataTable";
+import type { DataTableColumn, DataTableField } from "../../types";
+import { DataTableColumnPinning } from "../DataTableColumnPinning";
+import { DataTablePagination } from "../DataTablePagination";
+import { DataTableToolbar } from "../DataTableToolbar";
+import { DataTableFilters } from "../DataTableFilters";
+import { DataTableBulkActions } from "../DataTableBulkActions";
+import { DataTableExport } from "../DataTableExport";
+import { DataTableSearch } from "../DataTableSearch";
+import { DataTableViewOptions } from "../DataTableViewOptions";
+import { DataTableGrouping } from "../DataTableGrouping";
+import { DataTableCell } from "../DataTableCell";
+import { Table } from "@multiplatform.one/table-primitives";
+import { DataTableContext } from "./DataTableContext";
+import { DataTableStateContext } from "./DataTableStateContext";
+import type { DataTableStateContextValue } from "./DataTableStateContext";
+import type { DataTableRootProps } from "./DataTableRoot";
+
+export { DataTableContext } from "./DataTableContext";
+export { DataTableStateContext, useDataTableState } from "./DataTableStateContext";
+export type { DataTableStateContextValue } from "./DataTableStateContext";
+export type { DataTableRootProps } from "./DataTableRoot";
+
+/** Maps field type to filter-compatible types */
+function mapFieldToFilterType(
+  field?: DataTableField,
+): "text" | "number" | "date" | "boolean" | "select" {
+  switch (field) {
+    case "stepper":
+    case "slider":
+    case "progress":
+    case "rating":
+    case "duration":
+      return "number";
+    case "datepicker":
+    case "datetimepicker":
+    case "timepicker":
+    case "daterangepicker":
+    case "multidatepicker":
+      return "date";
+    case "checkbox":
+    case "switch":
+      return "boolean";
+    case "select":
+    case "combobox":
+    case "radiogroup":
+    case "togglegroup":
+      return "select";
+    default:
+      return "text";
+  }
+}
+
+const rowHeightPx = 40;
+
+function DataTableRoot<TData extends Record<string, any> = Record<string, any>>({
+  data,
+  columns,
+  initialState,
+  onStateChange,
+  syncWithUrl = false,
+  urlDebounceMs = 500,
+  urlStrategy,
+  manualFiltering = false,
+  manualPagination = false,
+  manualSorting = false,
+  enableFiltering = true,
+  enableSorting = true,
+  enablePagination = true,
+  enableColumnVisibility = true,
+  enableColumnOrdering = false,
+  enableColumnResizing = false,
+  enableGlobalSearch = true,
+  enableViews = false,
+  enableVirtualization = false,
+  virtualizationHeight,
+  virtualizationOverscan = 5,
+  enableRowExpansion = false,
+  renderSubComponent,
+  enableColumnPinning = false,
+  maxPinnedColumns = 3,
+  enableKeyboardNavigation: _enableKeyboardNavigation = false,
+  readOnly = false,
+  onCellChange,
+  name,
+  form: formProp,
+  showRowNumbers = false,
+  showAddRow = false,
+  showDeleteRow = false,
+  minRows = 0,
+  maxRows,
+  defaultRow,
+  onDataChange,
+  rowCount,
+  pageCount,
+  renderToolbar,
+  renderPagination,
+  renderFilters,
+  className: _className,
+  size,
+  compact = false,
+  children,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}: DataTableRootProps<TData>) {
+  const { t } = useTranslation();
+  const { sm } = useMedia();
+  const { knobProps } = useResolvedKnobs({ intent: undefined, component: "DataTable", compact });
+  const { resolvedForm } = useFormField({ form: formProp });
+
+  const isFormMode = Boolean(name && resolvedForm);
+
+  const { table, state, actions, computed } = useDataTable({
+    data,
+    columns,
+    initialState,
+    onStateChange,
+    syncWithUrl,
+    urlDebounceMs,
+    urlStrategy,
+    manualFiltering,
+    manualPagination,
+    manualSorting,
+    enableFiltering,
+    enableSorting,
+    enablePagination,
+    enableColumnVisibility,
+    enableColumnOrdering,
+    enableColumnResizing,
+    enableGlobalSearch,
+    enableViews,
+    enableVirtualization,
+    virtualizationHeight,
+    virtualizationOverscan,
+    enableRowExpansion,
+    renderSubComponent,
+    enableColumnPinning,
+    maxPinnedColumns,
+    enableKeyboardNavigation: false,
+    rowCount,
+    pageCount,
+  });
+
+  const resolvedSize: "sm" | "md" | "lg" =
+    size ?? (knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md");
+
+  const cellHeight = resolvedSize === "sm" ? "$6" : resolvedSize === "lg" ? "$10" : "$8";
+
+  const headerGroups = table.getHeaderGroups();
+  const tableRows = table.getRowModel().rows;
+  const footerGroups = table.getFooterGroups();
+
+  const flashListRef = useRef<FlashListRef<(typeof tableRows)[0]>>(null);
+
+  const getColSizeProps = useCallback(
+    (
+      col: {
+        getSize: () => number;
+        columnDef: { size?: number; minSize?: number; maxSize?: number };
+      },
+      isLastCell?: boolean,
+    ) => {
+      if (enableColumnResizing) {
+        return {
+          width: col.getSize(),
+          minWidth: col.columnDef.minSize ?? 0,
+          maxWidth: col.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER,
+          flex: 0,
+        };
+      }
+      if (col.columnDef.size != null) {
+        return {
+          width: col.columnDef.size,
+          minWidth: col.columnDef.minSize ?? col.columnDef.size,
+          flex: 0,
+        };
+      }
+      return {
+        flex: isLastCell ? 1 : 0,
+        flexShrink: isLastCell ? 1 : 0,
+        flexGrow: isLastCell ? 1 : 0,
+      };
+    },
+    [enableColumnResizing],
+  );
+
+  const isVirtualized =
+    enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0;
+
+  const pinning = useMemo(
+    () =>
+      enableColumnPinning
+        ? DataTableColumnPinning({ table, maxPinnedColumns, allowPinning: true })
+        : null,
+    [enableColumnPinning, table, maxPinnedColumns],
+  );
+
+  const extraColumnsBefore = (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
+  const extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
+
+  const handleCellChange = useCallback(
+    async (rowIndex: number, columnId: string, newValue: any) => {
+      if (readOnly) return;
+      const previousValue = data[rowIndex]?.[columnId];
+      if (onCellChange) {
+        const result = await onCellChange(rowIndex, columnId, newValue, previousValue);
+        if (result === false) return;
+      }
+      if (!isFormMode && onDataChange) {
+        const newData = [...data];
+        newData[rowIndex] = { ...newData[rowIndex], [columnId]: newValue };
+        onDataChange(newData);
+      }
+    },
+    [readOnly, data, onCellChange, isFormMode, onDataChange],
+  );
+
+  const handleAddRow = useCallback(() => {
+    if (readOnly || (maxRows && data.length >= maxRows)) return;
+    const newRow = { ...defaultRow, idx: data.length + 1 } as unknown as TData;
+    if (!isFormMode && onDataChange) {
+      onDataChange([...data, newRow]);
+    }
+  }, [readOnly, maxRows, data, defaultRow, isFormMode, onDataChange]);
+
+  const handleDeleteRow = useCallback(
+    (rowIndex: number) => {
+      if (readOnly || data.length <= minRows) return;
+      if (!isFormMode && onDataChange) {
+        onDataChange(data.filter((_, idx) => idx !== rowIndex));
+      }
+    },
+    [readOnly, minRows, data, isFormMode, onDataChange],
+  );
+
+  const isCompact = resolvedSize === "sm" || compact;
+  const renderCellContent = useCallback(
+    (cell: any, rowIndex: number, rowData: TData) => {
+      const columnDef = cell.column.columnDef as DataTableColumn;
+      const columnId = cell.column.id;
+      const value = cell.getValue();
+
+      if (columnDef.cell && !columnDef.field) {
+        return flexRender(columnDef.cell, cell.getContext());
+      }
+
+      return (
+        <DataTableCell
+          value={value}
+          field={columnDef.field}
+          fieldProps={columnDef.fieldProps}
+          onChange={(newValue) => handleCellChange(rowIndex, columnId, newValue)}
+          readOnly={readOnly}
+          columnId={columnId}
+          rowIndex={rowIndex}
+          rowData={rowData}
+        />
+      );
+    },
+    [handleCellChange, readOnly],
+  );
+
+  const renderRowContent = useCallback(
+    (row: any, rowIndex: number) => {
+      const rowData = row.original as TData;
+      return (
+        <>
+          {showRowNumbers && (
+            <Table.Cell cellWidth={50} cellHeight={cellHeight as any} cellLocation="first">
+              <Text fontSize={knobProps.sizeToken} color="$color10">
+                {rowIndex + 1}
+              </Text>
+            </Table.Cell>
+          )}
+          {enableRowExpansion && (
+            <Table.Cell
+              cellWidth={32}
+              cellHeight={cellHeight as any}
+              cellLocation={showRowNumbers ? "middle" : "first"}
+            >
+              {row.getCanExpand() ? (
+                <View
+                  onPress={() => row.toggleExpanded()}
+                  cursor="pointer"
+                  padding="$1"
+                  aria-expanded={row.getIsExpanded()}
+                  aria-label={row.getIsExpanded() ? "Collapse row" : "Expand row"}
+                >
+                  <CaretRightIcon
+                    size={14}
+                    style={{ transform: row.getIsExpanded() ? "rotate(90deg)" : "none" }}
+                  />
+                </View>
+              ) : (
+                <View width={14} />
+              )}
+            </Table.Cell>
+          )}
+          {row.getVisibleCells().map((cell: any, cellIndex: number) => {
+            const isFirstDataCell = cellIndex === 0 && !showRowNumbers && !enableRowExpansion;
+            const isLastDataCell = cellIndex === row.getVisibleCells().length - 1 && !showDeleteRow;
+            const cellLocation = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
+            return (
+              <Table.Cell
+                key={cell.id}
+                {...getColSizeProps(cell.column, isLastDataCell)}
+                cellHeight={cellHeight as any}
+                cellLocation={cellLocation}
+                minWidth={0}
+              >
+                {renderCellContent(cell, rowIndex, rowData)}
+              </Table.Cell>
+            );
+          })}
+          {showDeleteRow && !readOnly && (
+            <Table.Cell
+              cellWidth={60}
+              cellHeight={cellHeight as any}
+              cellLocation="last"
+              justifyContent="center"
+            >
+              <Button
+                chromeless
+                circular
+                icon={TrashIcon}
+                disabled={data.length <= minRows}
+                onPress={() => handleDeleteRow(rowIndex)}
+                aria-label={t("Delete row")}
+              />
+            </Table.Cell>
+          )}
+        </>
+      );
+    },
+    [
+      showRowNumbers,
+      enableRowExpansion,
+      showDeleteRow,
+      readOnly,
+      cellHeight,
+      knobProps.sizeToken,
+      getColSizeProps,
+      renderCellContent,
+      handleDeleteRow,
+      data.length,
+      minRows,
+      t,
+    ],
+  );
+
+  const renderRow = useCallback(
+    (row: (typeof tableRows)[0], index: number) => (
+      <Table.Row
+        backgroundColor={index % 2 === 0 ? "$color1" : "$color2"}
+        rowLocation="middle"
+        key={`${row.id}-${index}`}
+        aria-rowindex={index + 1}
+        aria-label={`Row ${index + 1}`}
+      >
+        {renderRowContent(row, index)}
+      </Table.Row>
+    ),
+    [renderRowContent],
+  );
+
+  const renderMobileCard = useCallback(
+    (row: (typeof tableRows)[0], index: number, onDelete?: (idx: number) => void) => {
+      const rowData = row.original as TData;
+      const visibleCells = row.getVisibleCells();
+      return (
+        <View
+          key={`${row.id}-${index}`}
+          backgroundColor="$color1"
+          borderRadius="$4"
+          borderWidth={1}
+          borderColor="$borderColor"
+          padding="$3"
+          marginBottom="$2"
+        >
+          {showRowNumbers && (
+            <View
+              flexDirection="row"
+              justifyContent="space-between"
+              paddingBottom="$2"
+              borderBottomWidth={1}
+              borderBottomColor="$borderColor"
+              marginBottom="$2"
+            >
+              <Text fontSize="$3" color="$color10" fontWeight="600">
+                #{index + 1}
+              </Text>
+              {showDeleteRow && !readOnly && (
+                <Button
+                  chromeless
+                  circular
+                  size="$2"
+                  icon={TrashIcon}
+                  disabled={tableRows.length <= minRows}
+                  onPress={() => onDelete?.(index)}
+                  aria-label={t("Delete row")}
+                />
+              )}
+            </View>
+          )}
+          {visibleCells.map((cell: any) => {
+            const columnDef = cell.column.columnDef as DataTableColumn;
+            const headerLabel =
+              typeof columnDef.header === "string"
+                ? columnDef.header
+                : columnDef.id || cell.column.id;
+            return (
+              <View
+                key={cell.id}
+                flexDirection="row"
+                alignItems="center"
+                paddingVertical="$1.5"
+                gap="$2"
+              >
+                <Text fontSize="$3" color="$color10" fontWeight="500" width="40%" flexShrink={0}>
+                  {headerLabel}
+                </Text>
+                <View flex={1}>{renderCellContent(cell, index, rowData)}</View>
+              </View>
+            );
+          })}
+          {!showRowNumbers && showDeleteRow && !readOnly && (
+            <View paddingTop="$2" alignItems="flex-end">
+              <Button
+                chromeless
+                circular
+                size="$2"
+                icon={TrashIcon}
+                disabled={tableRows.length <= minRows}
+                onPress={() => onDelete?.(index)}
+                aria-label={t("Delete row")}
+              />
+            </View>
+          )}
+        </View>
+      );
+    },
+    [showRowNumbers, showDeleteRow, readOnly, tableRows.length, minRows, renderCellContent, t],
+  );
+
+  const renderToolbarComponent = () => {
+    if (renderToolbar) {
+      return renderToolbar({
+        globalFilter: state.globalFilter || "",
+        onGlobalFilterChange: actions.setGlobalFilter,
+        onClearFilters: actions.clearFilters,
+        onSaveView: actions.saveView,
+        onLoadView: actions.loadView,
+        views: state.views,
+        activeViewId: state.activeViewId,
+      });
+    }
+    return (
+      <DataTableToolbar
+        globalFilter={state.globalFilter || ""}
+        onGlobalFilterChange={actions.setGlobalFilter}
+        onClearFilters={actions.clearFilters}
+        onSaveView={actions.saveView}
+        onLoadView={actions.loadView}
+        views={state.views}
+        activeViewId={state.activeViewId}
+        enableViews={enableViews}
+        enableGlobalSearch={enableGlobalSearch}
+        enableFiltering={enableFiltering}
+      />
+    );
+  };
+
+  const renderPaginationComponent = () => {
+    if (renderPagination) {
+      return renderPagination({
+        pagination: state.pagination,
+        onPaginationChange: actions.setPagination,
+        pageSizeOptions: [10, 20, 50, 100],
+      });
+    }
+    return (
+      <DataTablePagination
+        pagination={state.pagination}
+        onPaginationChange={actions.setPagination}
+        pageSizeOptions={[10, 20, 50, 100]}
+        showInfo={!sm}
+      />
+    );
+  };
+
+  const stateContextValue = useMemo<DataTableStateContextValue<TData>>(
+    () => ({ table, state, actions, computed }),
+    [table, state, actions, computed],
+  );
+
+  const renderTableInner = useCallback(
+    (tableData: TData[], setTableData?: (d: TData[]) => void) => {
+      const effectiveHandleAddRow = () => {
+        if (readOnly || (maxRows && tableData.length >= maxRows)) return;
+        const newRow = { ...defaultRow, idx: tableData.length + 1 } as unknown as TData;
+        setTableData?.([...tableData, newRow]);
+      };
+      const effectiveHandleDeleteRow = (rowIndex: number) => {
+        if (readOnly || tableData.length <= minRows) return;
+        setTableData?.(tableData.filter((_, idx) => idx !== rowIndex));
+      };
+
+      return (
+        <DataTableContext.Provider size={resolvedSize} compact={isCompact}>
+          <DataTableStateContext.Provider value={stateContextValue}>
+            <View
+              flexDirection="column"
+              gap="$6"
+              aria-label={ariaLabel || "Data table"}
+              aria-describedby={ariaDescribedBy}
+              aria-live="polite"
+              aria-atomic="false"
+              {...knobProps.borderRadius}
+              {...props}
+            >
+              {(enableGlobalSearch || enableFiltering || enableViews) && renderToolbarComponent()}
+              {children}
+              {renderFilters?.({
+                filters: state.filters || [],
+                onFiltersChange: actions.setFilters,
+                onAddFilter: actions.addFilter,
+                onRemoveFilter: actions.removeFilter,
+                onClearFilters: actions.clearFilters,
+                availableColumns: columns.map((col) => ({
+                  id: col.id || "",
+                  label: typeof col.header === "string" ? col.header : col.id || "",
+                  type: mapFieldToFilterType(col.field),
+                })),
+              })}
+
+              {!sm ? (
+                <View flexDirection="column" gap="$2">
+                  {tableRows.length === 0 ? (
+                    <View
+                      padding="$8"
+                      alignItems="center"
+                      justifyContent="center"
+                      backgroundColor="$color1"
+                      borderRadius="$4"
+                      aria-live="polite"
+                    >
+                      <Text color="$color10" fontSize="$4">
+                        {computed.hasActiveFilters ? t("No results found") : t("No data available")}
+                      </Text>
+                    </View>
+                  ) : (
+                    tableRows.map((row, index) =>
+                      renderMobileCard(
+                        row,
+                        index,
+                        isFormMode ? effectiveHandleDeleteRow : handleDeleteRow,
+                      ),
+                    )
+                  )}
+                  {enablePagination && renderPaginationComponent()}
+                </View>
+              ) : (
+                <ScrollView horizontal maxWidth="100%">
+                  <View
+                    flex={1}
+                    flexDirection="column"
+                    width="100%"
+                    aria-label={`${ariaLabel || "Data table"} content`}
+                  >
+                    <Table
+                      alignCells={{ x: "start", y: "center" }}
+                      alignHeaderCells={{ x: "start", y: "center" }}
+                      cellHeight={cellHeight}
+                      {...knobProps.borderRadius}
+                      width="100%"
+                      marginBottom={enablePagination ? "$10" : undefined}
+                      aria-label={ariaLabel || "Data table"}
+                      aria-rowcount={computed.totalPages * state.pagination.pageSize}
+                      aria-colcount={
+                        table.getVisibleLeafColumns().length +
+                        extraColumnsBefore +
+                        extraColumnsAfter
+                      }
+                    >
+                      <Table.Head zIndex="$1" aria-label="Table headers">
+                        {headerGroups.map((headerGroup, groupIndex) => (
+                          <Table.Row
+                            key={headerGroup.id}
+                            backgroundColor="$color2"
+                            rowLocation={groupIndex === 0 ? "first" : "middle"}
+                            borderTopRightRadius="$4"
+                            borderTopLeftRadius="$4"
+                            borderBottomLeftRadius="$0"
+                            borderBottomRightRadius="$0"
+                            aria-rowindex={groupIndex}
+                          >
+                            {showRowNumbers && (
+                              <Table.HeaderCell cellWidth={50} cellHeight={cellHeight as any}>
+                                <Text fontSize="$4" fontWeight="600">
+                                  #
+                                </Text>
+                              </Table.HeaderCell>
+                            )}
+                            {enableRowExpansion && (
+                              <Table.HeaderCell cellWidth={32} cellHeight={cellHeight as any}>
+                                <View width={14} />
+                              </Table.HeaderCell>
+                            )}
+                            {headerGroup.headers.map((header, headerIndex) => {
+                              const isSortableHeader = header.column.getCanSort();
+                              const sortDirection = header.column.getIsSorted();
+                              const isLastHeader =
+                                headerIndex === headerGroup.headers.length - 1 && !showDeleteRow;
+                              return (
+                                <Table.HeaderCell
+                                  key={header.id}
+                                  id={`${header.column.id}-header`}
+                                  onPress={
+                                    isSortableHeader
+                                      ? header.column.getToggleSortingHandler()
+                                      : undefined
+                                  }
+                                  cursor={isSortableHeader ? "pointer" : "default"}
+                                  position="relative"
+                                  aria-sort={
+                                    isSortableHeader
+                                      ? sortDirection === "asc"
+                                        ? "ascending"
+                                        : sortDirection === "desc"
+                                          ? "descending"
+                                          : "none"
+                                      : undefined
+                                  }
+                                  {...getColSizeProps(header.column, isLastHeader)}
+                                >
+                                  <View
+                                    flexDirection="row"
+                                    gap="$2"
+                                    alignItems="center"
+                                    justifyContent="flex-start"
+                                    flex={1}
+                                  >
+                                    <Text fontSize="$4" selectable={false} userSelect="none">
+                                      {header.isPlaceholder
+                                        ? null
+                                        : flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext(),
+                                          )}
+                                    </Text>
+                                    {isSortableHeader && (
+                                      <Text
+                                        aria-hidden={true}
+                                        role="presentation"
+                                        color={sortDirection ? "$color10" : "$color8"}
+                                      >
+                                        {sortDirection === "asc" && <CaretDownIcon size={14} />}
+                                        {sortDirection === "desc" && (
+                                          <CaretDownIcon
+                                            size={14}
+                                            style={{ transform: "rotate(180deg)" }}
+                                          />
+                                        )}
+                                        {sortDirection === false && <CaretUpDownIcon size={14} />}
+                                      </Text>
+                                    )}
+                                    {pinning && (
+                                      <View flexDirection="row" gap="$1">
+                                        <pinning.PinButton
+                                          columnId={header.column.id}
+                                          position="left"
+                                        />
+                                        <pinning.PinButton
+                                          columnId={header.column.id}
+                                          position="right"
+                                        />
+                                      </View>
+                                    )}
+                                  </View>
+                                </Table.HeaderCell>
+                              );
+                            })}
+                            {showDeleteRow && !readOnly && (
+                              <Table.HeaderCell
+                                cellWidth={60}
+                                cellHeight={cellHeight as any}
+                                cellLocation="last"
+                              />
+                            )}
+                          </Table.Row>
+                        ))}
+                      </Table.Head>
+
+                      <Table.Body aria-label="Table data">
+                        {tableRows.length === 0 ? (
+                          <Table.Row>
+                            <Table.Cell>
+                              <View
+                                padding="$8"
+                                alignItems="center"
+                                justifyContent="center"
+                                aria-live="polite"
+                              >
+                                <Text color="$color10" fontSize="$4">
+                                  {computed.hasActiveFilters
+                                    ? t("No results found")
+                                    : t("No data available")}
+                                </Text>
+                              </View>
+                            </Table.Cell>
+                          </Table.Row>
+                        ) : isVirtualized ? (
+                          <View style={{ height: virtualizationHeight }}>
+                            <FlashList
+                              ref={flashListRef}
+                              data={tableRows}
+                              drawDistance={rowHeightPx * virtualizationOverscan}
+                              keyExtractor={(row) => row.id}
+                              renderItem={({ item, index }) => renderRow(item, index)}
+                            />
+                          </View>
+                        ) : (
+                          tableRows.map((row, index) => {
+                            const mainRow = renderRow(row, index);
+                            const subRow =
+                              enableRowExpansion &&
+                              renderSubComponent &&
+                              row.getIsExpanded() &&
+                              !row.subRows?.length ? (
+                                <Table.Row key={`${row.id}-sub`} backgroundColor="$color2">
+                                  <Table.Cell
+                                    {...({
+                                      colSpan:
+                                        table.getVisibleLeafColumns().length +
+                                        extraColumnsBefore +
+                                        extraColumnsAfter,
+                                    } as any)}
+                                  >
+                                    {renderSubComponent(row)}
+                                  </Table.Cell>
+                                </Table.Row>
+                              ) : null;
+                            return (
+                              <React.Fragment key={row.id}>
+                                {mainRow}
+                                {subRow}
+                              </React.Fragment>
+                            );
+                          })
+                        )}
+                      </Table.Body>
+
+                      {footerGroups.length > 0 && (
+                        <Table.Foot>
+                          {footerGroups.map((footerGroup) => (
+                            <Table.Row key={footerGroup.id}>
+                              {footerGroup.headers.map((header) => (
+                                <Table.Cell key={header.id}>
+                                  {header.isPlaceholder
+                                    ? null
+                                    : flexRender(
+                                        header.column.columnDef.footer,
+                                        header.getContext(),
+                                      )}
+                                </Table.Cell>
+                              ))}
+                            </Table.Row>
+                          ))}
+                        </Table.Foot>
+                      )}
+                    </Table>
+                  </View>
+                </ScrollView>
+              )}
+
+              {showAddRow && !readOnly && (
+                <View>
+                  <Button
+                    icon={PlusIcon}
+                    disabled={maxRows !== undefined && tableData.length >= maxRows}
+                    onPress={isFormMode ? effectiveHandleAddRow : handleAddRow}
+                    aria-label={t("Add Row")}
+                  >
+                    {t("Add Row")}
+                  </Button>
+                </View>
+              )}
+
+              {sm && enablePagination && renderPaginationComponent()}
+
+              {state.isLoading && (
+                <View
+                  position="absolute"
+                  top={0}
+                  left={0}
+                  right={0}
+                  bottom={0}
+                  alignItems="center"
+                  justifyContent="center"
+                  zIndex={zIndex.loading}
+                  aria-busy={true}
+                  aria-live="assertive"
+                  aria-label="Loading table data"
+                  role="status"
+                >
+                  <Spinner size="large" color="$color10" />
+                </View>
+              )}
+            </View>
+          </DataTableStateContext.Provider>
+        </DataTableContext.Provider>
+      );
+    },
+    [
+      resolvedSize,
+      isCompact,
+      stateContextValue,
+      ariaLabel,
+      ariaDescribedBy,
+      knobProps,
+      props,
+      enableGlobalSearch,
+      enableFiltering,
+      enableViews,
+      renderToolbarComponent,
+      children,
+      renderFilters,
+      state,
+      actions,
+      columns,
+      cellHeight,
+      enablePagination,
+      computed,
+      table,
+      extraColumnsBefore,
+      extraColumnsAfter,
+      headerGroups,
+      showRowNumbers,
+      enableRowExpansion,
+      showDeleteRow,
+      readOnly,
+      getColSizeProps,
+      pinning,
+      tableRows,
+      isVirtualized,
+      virtualizationHeight,
+      virtualizationOverscan,
+      renderRow,
+      renderMobileCard,
+      renderSubComponent,
+      footerGroups,
+      sm,
+      renderPaginationComponent,
+      showAddRow,
+      maxRows,
+      isFormMode,
+      handleAddRow,
+      handleDeleteRow,
+      minRows,
+      defaultRow,
+      t,
+    ],
+  );
+
+  if (isFormMode) {
+    return (
+      <Field form={resolvedForm} name={name!} mode="array">
+        {(field) => {
+          const formData = (field.state.value as TData[]) ?? [];
+          const setFormData = (next: TData[]) => field.handleChange(next as any);
+          return renderTableInner(formData, setFormData);
+        }}
+      </Field>
+    );
+  }
+
+  return renderTableInner(data, onDataChange);
+}
+
+export const DataTable = withStaticProperties(DataTableRoot, {
+  Toolbar: DataTableToolbar,
+  Filters: DataTableFilters,
+  Pagination: DataTablePagination,
+  BulkActions: DataTableBulkActions,
+  Export: DataTableExport,
+  Search: DataTableSearch,
+  ViewOptions: DataTableViewOptions,
+  Grouping: DataTableGrouping,
+});
+
+export type DataTableComponent = typeof DataTable;