@multiplatform.one/table 6.0.0

package/dist/jsx/components/DataTable/DataTableRoot.mjs

@@ -0,0 +1,1010 @@
+import { CaretDownIcon, CaretRightIcon, CaretUpDownIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { Button, Field, useFormField, zIndex } from "@multiplatform.one/forms";
+import { flexRender } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useRef, useMemo, useCallback } from "react";
+import { Tooltip } from "@multiplatform.one/components";
+import { Spinner, Text, View, isWeb, useMedia } from "tamagui";
+import { useTranslation } from "react-i18next";
+import { useDataTable } from "../../hooks/useDataTable.mjs";
+import { useDragScroll } from "../../hooks/useDragScroll.mjs";
+import { useDataTableKeyboard } from "../../hooks/useDataTableKeyboard.mjs";
+import { DataTableColumnPinning } from "../DataTableColumnPinning/index.mjs";
+import { DataTablePagination } from "../DataTablePagination/index.mjs";
+import { DataTableToolbar } from "../DataTableToolbar/index.mjs";
+import { DataTableCell } from "../DataTableCell/index.mjs";
+import { ColumnHeaderFilter } from "../ColumnHeaderFilter/index.mjs";
+import { Table } from "@multiplatform.one/table-primitives";
+import { DataTableContext } from "./DataTableContext.mjs";
+import { DataTableStateContext } from "./DataTableStateContext.mjs";
+import { DataTableMobileCards } from "./DataTableMobileCards.mjs";
+import { DataTableVirtualized } from "./DataTableVirtualized.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+function getColumnField(column) {
+  return column.field ?? "input";
+}
+function isNumericField(field) {
+  switch (field) {
+    case "stepper":
+    case "slider":
+    case "progress":
+    case "rating":
+    case "duration":
+      return true;
+    default:
+      return false;
+  }
+}
+function mapFieldToFilterType(field) {
+  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({
+  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,
+  columnLayout = "equal",
+  enableVirtualization = false,
+  virtualizationHeight,
+  virtualizationOverscan = 5,
+  enableRowExpansion = false,
+  renderSubComponent,
+  getSubRows,
+  enableColumnPinning = false,
+  maxPinnedColumns = 3,
+  enableGrouping = false,
+  enableKeyboardNavigation = false,
+  readOnly = false,
+  onCellChange,
+  name,
+  form: formProp,
+  showRowNumbers = false,
+  showAddRow = false,
+  showDeleteRow = false,
+  minRows = 0,
+  maxRows,
+  defaultRow,
+  onDataChange,
+  rowCount,
+  pageCount,
+  renderToolbar,
+  renderPagination,
+  renderFilters: _renderFilters,
+  className,
+  size,
+  compact = false,
+  disabled: _disabled = false,
+  children,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    sm
+  } = useMedia();
+  const {
+    knobProps
+  } = useResolvedKnobs({
+    intent: void 0,
+    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,
+    columnLayout,
+    enableGlobalSearch,
+    enableViews,
+    enableVirtualization,
+    virtualizationHeight,
+    virtualizationOverscan,
+    enableRowExpansion,
+    getSubRows,
+    renderSubComponent,
+    enableColumnPinning,
+    maxPinnedColumns,
+    enableGrouping,
+    enableKeyboardNavigation,
+    rowCount,
+    pageCount
+  });
+  const resolvedSize = size ?? (knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md");
+  const cellHeight = resolvedSize === "sm" ? "$3" : resolvedSize === "lg" ? "$5" : "$4";
+  const headerGroups = table.getHeaderGroups();
+  const tableRows = table.getRowModel().rows;
+  const footerGroups = table.getFooterGroups();
+  const hasFooter = footerGroups.some(group => group.headers.some(header => header.column.columnDef.footer != null));
+  const allRowsLength = tableRows.length + headerGroups.length + (hasFooter ? footerGroups.length : 0);
+  const rowCounter = useRef(-1);
+  rowCounter.current = -1;
+  const getColSizeProps = useCallback(col => {
+    const hasExplicitSize = col.columnDef.size != null;
+    if (hasExplicitSize || enableColumnResizing) {
+      return {
+        width: col.getSize()
+      };
+    }
+    return {};
+  }, [enableColumnResizing]);
+  const dnd = useMemo(() => {
+    if (!enableColumnOrdering || !isWeb) return null;
+    return {
+      onDragStart: (e, columnId) => {
+        e.dataTransfer?.setData("application/x-table-column-id", columnId);
+        if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+      },
+      onDragOver: e => {
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+      },
+      onDrop: (e, targetColumnId) => {
+        e.preventDefault();
+        const sourceId = e.dataTransfer?.getData("application/x-table-column-id");
+        if (!sourceId || sourceId === targetColumnId) return;
+        const order = table.getAllLeafColumns().map(c => c.id);
+        const currentOrder = table.getState().columnOrder.length ? [...table.getState().columnOrder] : order;
+        const fromIdx = currentOrder.indexOf(sourceId);
+        const toIdx = currentOrder.indexOf(targetColumnId);
+        if (fromIdx < 0 || toIdx < 0) return;
+        const next = [...currentOrder];
+        next.splice(fromIdx, 1);
+        next.splice(toIdx, 0, sourceId);
+        table.setColumnOrder(next);
+      }
+    };
+  }, [enableColumnOrdering, table]);
+  const bodyScrollRef = useRef(null);
+  const isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && typeof window !== "undefined";
+  const virtualizer = useVirtualizer({
+    count: tableRows.length,
+    getScrollElement: () => bodyScrollRef.current,
+    estimateSize: () => rowHeightPx,
+    overscan: virtualizationOverscan,
+    enabled: isVirtualized
+  });
+  const virtualItems = isVirtualized ? virtualizer.getVirtualItems() : [];
+  const totalSize = isVirtualized ? virtualizer.getTotalSize() : 0;
+  const isFlexLayout = columnLayout !== "auto";
+  const displayMode = isFlexLayout ? "flex" : "table";
+  const cellFlexProps = useMemo(() => {
+    if (!isFlexLayout) return {};
+    if (columnLayout === "scroll") return {
+      flex: 0,
+      flexShrink: 0,
+      flexGrow: 0,
+      minWidth: 80
+    };
+    if (enableColumnResizing) return {
+      flex: 0,
+      flexShrink: 0,
+      flexGrow: 0
+    };
+    return {
+      flex: 1,
+      flexShrink: 1,
+      flexGrow: 1,
+      flexBasis: 0,
+      minWidth: 0
+    };
+  }, [isFlexLayout, columnLayout, enableColumnResizing]);
+  const pinning = useMemo(() => enableColumnPinning ? DataTableColumnPinning({
+    table,
+    maxPinnedColumns,
+    allowPinning: true
+  }) : null, [enableColumnPinning, table, maxPinnedColumns]);
+  const keyboardNav = useDataTableKeyboard({
+    table,
+    enabled: enableKeyboardNavigation,
+    viewportHeight: virtualizationHeight ?? 400,
+    onScrollToRow: isVirtualized ? idx => virtualizer.scrollToIndex(idx, {
+      align: "auto"
+    }) : void 0,
+    onRowActivate: enableRowExpansion ? row => {
+      if (row.getCanExpand()) row.toggleExpanded();
+    } : void 0
+  });
+  const handleCellChange = useCallback(async (rowIndex, columnId, newValue) => {
+    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
+    };
+    if (!isFormMode && onDataChange) {
+      onDataChange([...data, newRow]);
+    }
+  }, [readOnly, maxRows, data, defaultRow, isFormMode, onDataChange]);
+  const handleDeleteRow = useCallback(rowIndex => {
+    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, rowIndex, rowData) => {
+    const columnDef = cell.column.columnDef;
+    const columnId = cell.column.id;
+    const value = cell.getValue();
+    if (columnDef.cell && !columnDef.field) {
+      return flexRender(columnDef.cell, cell.getContext());
+    }
+    const columnField = getColumnField(columnDef);
+    const dateRangeLinkedColumn = columnDef.fieldProps?.dateRangeLinkedColumn;
+    let linkedValue;
+    let onLinkedChange;
+    if (dateRangeLinkedColumn && rowData) {
+      linkedValue = rowData[dateRangeLinkedColumn];
+      onLinkedChange = newValue => {
+        handleCellChange(rowIndex, dateRangeLinkedColumn, newValue);
+      };
+    }
+    return /* @__PURE__ */jsx(DataTableCell, {
+      value,
+      field: columnField,
+      fieldProps: columnDef.fieldProps,
+      onChange: newValue => handleCellChange(rowIndex, columnId, newValue),
+      readOnly,
+      columnId,
+      rowIndex,
+      rowData,
+      size: knobProps.sizeToken,
+      compact: isCompact,
+      linkedValue,
+      onLinkedChange
+    });
+  }, [handleCellChange, readOnly, knobProps.sizeToken, isCompact]);
+  const isSSR = typeof window === "undefined";
+  const extraColumnsBefore = (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
+  const extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
+  const getStickyStyle = useCallback(columnId => {
+    if (!enableColumnPinning || !pinning) return void 0;
+    const colPinning = table.getState().columnPinning || {
+      left: [],
+      right: []
+    };
+    const leftPinned = colPinning.left || [];
+    const rightPinned = colPinning.right || [];
+    const leftIdx = leftPinned.indexOf(columnId);
+    const rightIdx = rightPinned.indexOf(columnId);
+    if (leftIdx >= 0) {
+      let leftOffset = 0;
+      for (let i = 0; i < leftIdx; i++) {
+        const col = table.getColumn(leftPinned[i]);
+        if (col) leftOffset += col.getSize();
+      }
+      if (enableRowExpansion) leftOffset += 32;
+      if (showRowNumbers) leftOffset += 50;
+      return {
+        position: "sticky",
+        left: leftOffset,
+        zIndex: 2,
+        backgroundColor: "$color2"
+      };
+    }
+    if (rightIdx >= 0) {
+      let rightOffset = 0;
+      for (let i = rightIdx + 1; i < rightPinned.length; i++) {
+        const col = table.getColumn(rightPinned[i]);
+        if (col) rightOffset += col.getSize();
+      }
+      if (showDeleteRow && !readOnly) rightOffset += 60;
+      return {
+        position: "sticky",
+        right: rightOffset,
+        zIndex: 2,
+        backgroundColor: "$color2"
+      };
+    }
+    return void 0;
+  }, [enableColumnPinning, pinning, table, enableRowExpansion, showRowNumbers, showDeleteRow, readOnly]);
+  const renderRowContent = useCallback((row, rowIndex, _isLastRow) => {
+    const rowData = row.original;
+    return /* @__PURE__ */jsxs(Fragment, {
+      children: [showRowNumbers && /* @__PURE__ */jsx(Table.Cell, {
+        cellWidth: 50,
+        cellHeight,
+        cellLocation: "first",
+        children: /* @__PURE__ */jsx(Text, {
+          fontSize: knobProps.sizeToken,
+          color: "$color10",
+          children: rowIndex + 1
+        })
+      }), enableRowExpansion && /* @__PURE__ */jsx(Table.Cell, {
+        cellWidth: 32 + row.depth * 20,
+        cellHeight,
+        cellLocation: showRowNumbers ? "middle" : "first",
+        paddingLeft: 0,
+        paddingRight: 0,
+        children: /* @__PURE__ */jsxs(View, {
+          flexDirection: "row",
+          alignItems: "center",
+          height: "100%",
+          children: [row.depth > 0 && /* @__PURE__ */jsx(View, {
+            flexDirection: "row",
+            alignItems: "center",
+            height: "100%",
+            width: row.depth * 20,
+            children: Array.from({
+              length: row.depth
+            }).map((_, i) => /* @__PURE__ */jsxs(View, {
+              width: 20,
+              height: "100%",
+              alignItems: "center",
+              justifyContent: "center",
+              children: [/* @__PURE__ */jsx(View, {
+                position: "absolute",
+                width: 1,
+                height: "100%",
+                backgroundColor: "$color6",
+                left: 10
+              }), i === row.depth - 1 && /* @__PURE__ */jsx(View, {
+                position: "absolute",
+                height: 1,
+                width: 10,
+                backgroundColor: "$color6",
+                left: 10
+              })]
+            }, i))
+          }), row.getCanExpand() ? /* @__PURE__ */jsx(View, {
+            onPress: () => row.toggleExpanded(),
+            cursor: "pointer",
+            padding: "$1",
+            "aria-expanded": row.getIsExpanded(),
+            "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+            hoverStyle: {
+              backgroundColor: "$color4"
+            },
+            borderRadius: "$2",
+            children: /* @__PURE__ */jsx(CaretRightIcon, {
+              size: 14,
+              style: {
+                transform: row.getIsExpanded() ? "rotate(90deg)" : "none",
+                transition: "transform 0.15s ease"
+              }
+            })
+          }) : /* @__PURE__ */jsx(View, {
+            width: 22
+          })]
+        })
+      }), row.getVisibleCells().map((cell, cellIndex) => {
+        const isFirstDataCell = cellIndex === 0 && !showRowNumbers && !enableRowExpansion;
+        const isLastDataCell = cellIndex === row.getVisibleCells().length - 1 && !showDeleteRow;
+        const cellLocation = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
+        const stickyStyle = getStickyStyle(cell.column.id);
+        return /* @__PURE__ */jsx(Table.Cell, {
+          ...cellFlexProps,
+          ...getColSizeProps(cell.column),
+          cellHeight,
+          cellLocation,
+          ...(isWeb && stickyStyle ? {
+            style: {
+              position: "sticky",
+              ...("left" in stickyStyle && {
+                left: stickyStyle.left
+              }),
+              ...("right" in stickyStyle && {
+                right: stickyStyle.right
+              }),
+              zIndex: 2,
+              backgroundColor: "var(--color2)"
+            }
+          } : {}),
+          children: renderCellContent(cell, rowIndex, rowData)
+        }, cell.id);
+      }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.Cell, {
+        cellWidth: 60,
+        cellHeight,
+        cellLocation: "last",
+        justifyContent: "center",
+        children: /* @__PURE__ */jsx(Button, {
+          chromeless: true,
+          circular: true,
+          icon: TrashIcon,
+          disabled: data.length <= minRows,
+          onPress: () => handleDeleteRow(rowIndex),
+          "aria-label": t("Delete row")
+        })
+      })]
+    });
+  }, [showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, t]);
+  const stateContextValue = useMemo(() => ({
+    table,
+    state,
+    actions,
+    computed
+  }), [table, state, actions, computed]);
+  const renderToolbarComponent = () => {
+    const activeFilterCount = table.getState().columnFilters?.length || 0;
+    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,
+        size: knobProps.sizeToken,
+        compact: isCompact
+      });
+    }
+    return /* @__PURE__ */jsx(DataTableToolbar, {
+      globalFilter: state.globalFilter || "",
+      onGlobalFilterChange: actions.setGlobalFilter,
+      onClearFilters: actions.clearFilters,
+      activeFilterCount,
+      onSaveView: actions.saveView,
+      onLoadView: actions.loadView,
+      views: state.views,
+      activeViewId: state.activeViewId,
+      enableViews,
+      enableGlobalSearch,
+      enableFiltering,
+      size: knobProps.sizeToken,
+      compact: isCompact
+    });
+  };
+  const renderPaginationComponent = () => {
+    if (renderPagination) {
+      return renderPagination({
+        pagination: state.pagination,
+        onPaginationChange: actions.setPagination,
+        pageSizeOptions: [10, 20, 50, 100]
+      });
+    }
+    return /* @__PURE__ */jsx(DataTablePagination, {
+      pagination: state.pagination,
+      onPaginationChange: actions.setPagination,
+      pageSizeOptions: [10, 20, 50, 100],
+      compact: true
+    });
+  };
+  const renderInner = (tableData, effectiveHandleAddRow, effectiveHandleDeleteRow, _effectiveHandleCellChange) => {
+    const hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
+    const scrollContainerRef = useRef(null);
+    useDragScroll(scrollContainerRef, columnLayout === "scroll" && isWeb && !isSSR);
+    return /* @__PURE__ */jsx(DataTableContext.Provider, {
+      size: resolvedSize,
+      compact: isCompact,
+      children: /* @__PURE__ */jsx(DataTableStateContext.Provider, {
+        value: stateContextValue,
+        children: /* @__PURE__ */jsxs(View, {
+          flexDirection: "column",
+          gap: 0,
+          width: "100%",
+          flex: 1,
+          minHeight: 0,
+          ...(isWeb && className ? {
+            className
+          } : {}),
+          "aria-label": ariaLabel || "Data table",
+          "aria-describedby": ariaDescribedBy,
+          "aria-live": "polite",
+          "aria-atomic": "false",
+          ...props,
+          children: [hasToolbar && renderToolbarComponent(), children, sm === false ? /* @__PURE__ */jsx(DataTableMobileCards, {
+            tableRows,
+            showRowNumbers,
+            showDeleteRow,
+            readOnly,
+            dataLength: tableData.length,
+            minRows,
+            hasActiveFilters: computed.hasActiveFilters,
+            renderCellContent,
+            onDeleteRow: effectiveHandleDeleteRow
+          }) : (/* Table View */
+          /* @__PURE__ */jsx(View, {
+            ref: node => {
+              if (enableKeyboardNavigation && !isSSR && keyboardNav.containerRef) {
+                keyboardNav.containerRef.current = node;
+              }
+              if (scrollContainerRef) {
+                scrollContainerRef.current = node;
+              }
+            },
+            flexDirection: "column",
+            width: "100%",
+            flex: 1,
+            minHeight: 0,
+            "aria-label": `${ariaLabel || "Data table"} content`,
+            tabIndex: enableKeyboardNavigation && !isSSR ? 0 : void 0,
+            onKeyDown: enableKeyboardNavigation && !isSSR ? keyboardNav.handleKeyDown : void 0,
+            onPress: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerClick : void 0,
+            onBlur: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerBlur : void 0,
+            children: /* @__PURE__ */jsxs(Table, {
+              displayMode,
+              alignCells: {
+                x: "start",
+                y: "center"
+              },
+              alignHeaderCells: {
+                x: "start",
+                y: "center"
+              },
+              cellHeight,
+              borderTopLeftRadius: hasToolbar ? 0 : knobProps.borderRadius.borderRadius,
+              borderTopRightRadius: hasToolbar ? 0 : knobProps.borderRadius.borderRadius,
+              borderBottomLeftRadius: knobProps.borderRadius.borderRadius,
+              borderBottomRightRadius: knobProps.borderRadius.borderRadius,
+              marginBottom: 0,
+              "aria-label": ariaLabel || "Data table",
+              "aria-rowcount": computed.totalPages * state.pagination.pageSize,
+              "aria-colcount": table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter,
+              width: "100%",
+              ...(columnLayout === "scroll" && isWeb ? {
+                overflowX: "auto",
+                style: {
+                  minWidth: "max-content",
+                  width: "max-content"
+                }
+              } : {}),
+              children: [/* @__PURE__ */jsx(Table.Head, {
+                zIndex: "$1",
+                "aria-label": "Table headers",
+                children: headerGroups.map(headerGroup => {
+                  rowCounter.current++;
+                  return /* @__PURE__ */jsxs(Table.Row, {
+                    ...{
+                      background: true,
+                      backgroundColor: "$color2",
+                      rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
+                      borderTopRightRadius: hasToolbar ? "$0" : knobProps.borderRadius.borderRadius,
+                      borderTopLeftRadius: hasToolbar ? "$0" : knobProps.borderRadius.borderRadius,
+                      borderBottomLeftRadius: "$0",
+                      borderBottomRightRadius: "$0",
+                      "aria-rowindex": rowCounter.current
+                    },
+                    children: [showRowNumbers && /* @__PURE__ */jsx(Table.HeaderCell, {
+                      cellWidth: 50,
+                      cellHeight,
+                      cellLocation: "first",
+                      children: /* @__PURE__ */jsx(Text, {
+                        fontSize: "$4",
+                        fontWeight: "600",
+                        children: "#"
+                      })
+                    }), enableRowExpansion && /* @__PURE__ */jsx(Table.HeaderCell, {
+                      cellWidth: 32,
+                      cellHeight,
+                      cellLocation: showRowNumbers ? "middle" : "first",
+                      children: /* @__PURE__ */jsx(View, {
+                        width: 14
+                      })
+                    }), headerGroup.headers.map((header, headerIndex) => {
+                      const isSortableHeader = header.column.getCanSort();
+                      const sortDirection = header.column.getIsSorted();
+                      const canResize = enableColumnResizing && header.column.getCanResize();
+                      const resizeHandler = canResize ? header.getResizeHandler() : void 0;
+                      const colSize = header.getSize();
+                      const colMinSize = header.column.columnDef.minSize ?? 0;
+                      const colMaxSize = header.column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+                      const stickyStyle = getStickyStyle(header.column.id);
+                      const columnField = getColumnField(header.column.columnDef);
+                      const isNumeric = isNumericField(columnField);
+                      const isFirstHeaderCell = headerIndex === 0 && !showRowNumbers && !enableRowExpansion;
+                      const isLastHeaderCell = headerIndex === headerGroup.headers.length - 1 && !(showDeleteRow && !readOnly);
+                      const headerCellLocation = isFirstHeaderCell ? "first" : isLastHeaderCell ? "last" : "middle";
+                      return /* @__PURE__ */jsxs(Table.HeaderCell, {
+                        id: `${header.column.id}-header`,
+                        onPress: isSortableHeader ? header.column.getToggleSortingHandler() : void 0,
+                        cursor: isSortableHeader ? "pointer" : "default",
+                        position: "relative",
+                        cellLocation: headerCellLocation,
+                        "aria-sort": isSortableHeader ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
+                        ...(dnd ? {
+                          draggable: true,
+                          onDragStart: e => dnd.onDragStart(e, header.column.id),
+                          onDragOver: dnd.onDragOver,
+                          onDrop: e => dnd.onDrop(e, header.column.id)
+                        } : {}),
+                        ...cellFlexProps,
+                        ...getColSizeProps(header.column),
+                        ...(isWeb && stickyStyle ? {
+                          style: {
+                            position: "sticky",
+                            ...("left" in stickyStyle && {
+                              left: stickyStyle.left
+                            }),
+                            ...("right" in stickyStyle && {
+                              right: stickyStyle.right
+                            }),
+                            zIndex: 2,
+                            backgroundColor: "var(--color2)"
+                          }
+                        } : {}),
+                        children: [/* @__PURE__ */jsxs(View, {
+                          flexDirection: "row",
+                          gap: "$2",
+                          alignItems: "center",
+                          justifyContent: isNumeric ? "flex-end" : "space-between",
+                          flex: 1,
+                          children: [/* @__PURE__ */jsxs(View, {
+                            flexDirection: "row",
+                            gap: "$2",
+                            alignItems: "center",
+                            flex: isNumeric ? void 0 : 1,
+                            justifyContent: isNumeric ? "flex-end" : void 0,
+                            children: [/* @__PURE__ */jsx(Text, {
+                              fontSize: "$4",
+                              userSelect: "none",
+                              children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                            }), isSortableHeader && /* @__PURE__ */jsx(Tooltip, {
+                              content: sortDirection === "asc" ? t("Sorted ascending (click to sort descending)") : sortDirection === "desc" ? t("Sorted descending (click to clear)") : t("Click to sort (Shift+click for multi-sort)"),
+                              children: /* @__PURE__ */jsxs(View, {
+                                "aria-hidden": true,
+                                role: "presentation",
+                                children: [sortDirection === "asc" && /* @__PURE__ */jsx(CaretDownIcon, {
+                                  size: 14,
+                                  color: sortDirection ? "var(--color10)" : "var(--color8)"
+                                }), sortDirection === "desc" && /* @__PURE__ */jsx(CaretDownIcon, {
+                                  size: 14,
+                                  color: sortDirection ? "var(--color10)" : "var(--color8)",
+                                  style: {
+                                    transform: "rotate(180deg)"
+                                  }
+                                }), sortDirection === false && /* @__PURE__ */jsx(CaretUpDownIcon, {
+                                  size: 14,
+                                  color: "var(--color8)"
+                                })]
+                              })
+                            })]
+                          }), /* @__PURE__ */jsxs(View, {
+                            flexDirection: "row",
+                            gap: "$1",
+                            alignItems: "center",
+                            children: [enableFiltering && header.column.getCanFilter() && /* @__PURE__ */jsx(ColumnHeaderFilter, {
+                              columnId: header.column.id,
+                              columnLabel: typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id,
+                              columnType: mapFieldToFilterType(getColumnField(header.column.columnDef)),
+                              filterValue: header.column.getFilterValue(),
+                              onFilterChange: value => header.column.setFilterValue(value),
+                              isFiltered: header.column.getIsFiltered(),
+                              options: header.column.columnDef.fieldProps?.options
+                            }), pinning && enableColumnPinning && /* @__PURE__ */jsxs(Fragment, {
+                              children: [/* @__PURE__ */jsx(pinning.PinButton, {
+                                columnId: header.column.id,
+                                position: "left"
+                              }), /* @__PURE__ */jsx(pinning.PinButton, {
+                                columnId: header.column.id,
+                                position: "right"
+                              })]
+                            })]
+                          })]
+                        }), canResize && resizeHandler && /* @__PURE__ */jsx(View, {
+                          position: "absolute",
+                          right: -4,
+                          top: 0,
+                          height: 2e3,
+                          width: 8,
+                          cursor: "col-resize",
+                          onMouseDown: resizeHandler,
+                          onTouchStart: resizeHandler,
+                          role: "separator",
+                          "aria-valuenow": colSize,
+                          "aria-valuemin": colMinSize,
+                          "aria-valuemax": colMaxSize,
+                          "aria-label": `Resize ${header.column.columnDef.header || header.column.id} column`,
+                          style: {
+                            touchAction: "none"
+                          },
+                          zIndex: 10
+                        })]
+                      }, header.id);
+                    }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.HeaderCell, {
+                      cellWidth: 60,
+                      cellHeight,
+                      cellLocation: "last"
+                    })]
+                  }, headerGroup.id);
+                })
+              }), /* @__PURE__ */jsx(Table.Body, {
+                "aria-label": "Table data",
+                children: tableRows.length === 0 ? /* @__PURE__ */jsx(Table.Row, {
+                  children: /* @__PURE__ */jsx(Table.Cell, {
+                    children: /* @__PURE__ */jsx(View, {
+                      padding: "$8",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      "aria-live": "polite",
+                      children: /* @__PURE__ */jsx(Text, {
+                        color: "$color10",
+                        fontSize: "$4",
+                        children: computed.hasActiveFilters ? t("No results found") : t("No data available")
+                      })
+                    })
+                  })
+                }) : isVirtualized ? /* @__PURE__ */jsx(Table.Row, {
+                  children: /* @__PURE__ */jsx(Table.Cell, {
+                    padding: 0,
+                    style: {
+                      display: "block",
+                      overflow: "hidden"
+                    },
+                    ...{
+                      colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
+                    },
+                    children: /* @__PURE__ */jsx(DataTableVirtualized, {
+                      virtualItems,
+                      totalSize,
+                      bodyScrollRef,
+                      virtualizationHeight,
+                      tableRows,
+                      headerGroups,
+                      showRowNumbers,
+                      enableRowExpansion,
+                      showDeleteRow,
+                      readOnly,
+                      enableKeyboardNavigation,
+                      keyboardNav,
+                      getColSizeProps,
+                      renderRowContent,
+                      extraColumnsBefore,
+                      extraColumnsAfter,
+                      table
+                    })
+                  })
+                }) : /* @__PURE__ */jsxs(Fragment, {
+                  children: [tableRows.map((row, index) => {
+                    rowCounter.current++;
+                    const isLastRow = index === tableRows.length - 1;
+                    if (enableGrouping && row.getIsGrouped?.()) {
+                      const colSpan = table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter;
+                      const indent = (row.depth ?? 0) * 16;
+                      return /* @__PURE__ */jsx(Table.Row, {
+                        backgroundColor: "$color3",
+                        flexShrink: 0,
+                        "aria-rowindex": rowCounter.current,
+                        children: /* @__PURE__ */jsx(Table.Cell, {
+                          ...{
+                            colSpan
+                          },
+                          children: /* @__PURE__ */jsxs(View, {
+                            flexDirection: "row",
+                            alignItems: "center",
+                            gap: "$2",
+                            paddingLeft: indent,
+                            cursor: "pointer",
+                            onPress: () => row.toggleExpanded(),
+                            children: [/* @__PURE__ */jsx(Text, {
+                              fontFamily: "$mono",
+                              fontSize: "$3",
+                              children: row.getIsExpanded() ? "\u25BC" : "\u25B6"
+                            }), /* @__PURE__ */jsx(Text, {
+                              fontWeight: "600",
+                              children: String(row.groupingValue ?? "\u2014")
+                            }), /* @__PURE__ */jsxs(Text, {
+                              color: "$placeholderColor",
+                              fontSize: "$2",
+                              children: ["(", row.subRows?.length ?? 0, ")"]
+                            })]
+                          })
+                        })
+                      }, row.id);
+                    }
+                    const mainRow = /* @__PURE__ */createElement(Table.Row, {
+                      backgroundColor: enableKeyboardNavigation && keyboardNav.isNavigating && index === keyboardNav.focusedRowIndex ? "$color4" : index % 2 === 0 ? "$color1" : "$color2",
+                      ...{
+                        animation: "quick"
+                      },
+                      hoverStyle: {
+                        backgroundColor: "$color3"
+                      },
+                      flexShrink: 0,
+                      rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
+                      key: `${row.id}-${index}`,
+                      "aria-rowindex": rowCounter.current,
+                      "aria-label": `Row ${index + 1}`,
+                      tabIndex: -1
+                    }, renderRowContent(row, index, isLastRow));
+                    const subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !row.subRows?.length ? /* @__PURE__ */jsx(Table.Row, {
+                      backgroundColor: "$color2",
+                      children: /* @__PURE__ */jsx(Table.Cell, {
+                        ...{
+                          colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
+                        },
+                        children: renderSubComponent(row)
+                      })
+                    }, `${row.id}-sub`) : null;
+                    return /* @__PURE__ */jsxs(React.Fragment, {
+                      children: [mainRow, subRow]
+                    }, row.id);
+                  }), isFlexLayout && /* @__PURE__ */jsxs(Table.Row, {
+                    "aria-hidden": true,
+                    backgroundColor: "$color1",
+                    flex: 1,
+                    flexShrink: 1,
+                    flexGrow: 1,
+                    flexBasis: 0,
+                    minHeight: 0,
+                    children: [showRowNumbers && /* @__PURE__ */jsx(Table.Cell, {
+                      cellWidth: 50,
+                      cellLocation: "first",
+                      padding: 0,
+                      minHeight: 0
+                    }), enableRowExpansion && /* @__PURE__ */jsx(Table.Cell, {
+                      cellWidth: 32,
+                      cellLocation: showRowNumbers ? "middle" : "first",
+                      padding: 0,
+                      minHeight: 0
+                    }), headerGroups[0]?.headers.map((header, headerIndex) => {
+                      const isFirstDataCell = headerIndex === 0 && !showRowNumbers && !enableRowExpansion;
+                      const isLastDataCell = headerIndex === headerGroups[0].headers.length - 1 && !(showDeleteRow && !readOnly);
+                      const cellLoc = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
+                      return /* @__PURE__ */jsx(Table.Cell, {
+                        ...cellFlexProps,
+                        ...getColSizeProps(header.column),
+                        cellLocation: cellLoc,
+                        padding: 0,
+                        minHeight: 0
+                      }, header.id);
+                    }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.Cell, {
+                      cellWidth: 60,
+                      cellLocation: "last",
+                      padding: 0,
+                      minHeight: 0
+                    })]
+                  }, "filler-row")]
+                })
+              }), hasFooter && /* @__PURE__ */jsx(Table.Foot, {
+                children: footerGroups.map(footerGroup => /* @__PURE__ */jsx(Table.Row, {
+                  children: footerGroup.headers.map(header => /* @__PURE__ */jsx(Table.Cell, {
+                    children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())
+                  }, header.id))
+                }, footerGroup.id))
+              })]
+            })
+          })), showAddRow && !readOnly && /* @__PURE__ */jsx(View, {
+            children: /* @__PURE__ */jsx(Button, {
+              icon: PlusIcon,
+              disabled: maxRows !== void 0 && tableData.length >= maxRows,
+              onPress: effectiveHandleAddRow,
+              "aria-label": t("Add Row"),
+              children: t("Add Row")
+            })
+          }), enablePagination && /* @__PURE__ */jsx(View, {
+            paddingTop: "$3",
+            children: renderPaginationComponent()
+          }), state.isLoading && /* @__PURE__ */jsx(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",
+            children: /* @__PURE__ */jsx(Spinner, {
+              size: "large",
+              color: "$color10"
+            })
+          })]
+        })
+      })
+    });
+  };
+  if (isFormMode) {
+    return /* @__PURE__ */jsx(Field, {
+      form: resolvedForm,
+      name,
+      mode: "array",
+      children: field => {
+        const formData = field.state.value ?? [];
+        const setFormData = next => field.handleChange(next);
+        return renderInner(formData, () => {
+          if (readOnly || maxRows && formData.length >= maxRows) return;
+          const newRow = {
+            ...defaultRow,
+            idx: formData.length + 1
+          };
+          setFormData([...formData, newRow]);
+        }, idx => {
+          if (readOnly || formData.length <= minRows) return;
+          setFormData(formData.filter((_, i) => i !== idx));
+        }, async (rowIndex, columnId, newValue) => {
+          if (readOnly) return;
+          const previousValue = formData[rowIndex]?.[columnId];
+          if (onCellChange) {
+            const result = await onCellChange(rowIndex, columnId, newValue, previousValue);
+            if (result === false) return;
+          }
+          const newData = [...formData];
+          newData[rowIndex] = {
+            ...newData[rowIndex],
+            [columnId]: newValue
+          };
+          setFormData(newData);
+        });
+      }
+    });
+  }
+  return renderInner(data, handleAddRow, handleDeleteRow, handleCellChange);
+}
+export { DataTableRoot };
+//# sourceMappingURL=DataTableRoot.mjs.map