@multiplatform.one/table 6.0.0

package/dist/esm/components/DataTable/DataTableRoot.native.js

@@ -0,0 +1,1077 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+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.native.js";
+import { useDragScroll } from "../../hooks/useDragScroll.native.js";
+import { useDataTableKeyboard } from "../../hooks/useDataTableKeyboard.native.js";
+import { DataTableColumnPinning } from "../DataTableColumnPinning/index.native.js";
+import { DataTablePagination } from "../DataTablePagination/index.native.js";
+import { DataTableToolbar } from "../DataTableToolbar/index.native.js";
+import { DataTableCell } from "../DataTableCell/index.native.js";
+import { ColumnHeaderFilter } from "../ColumnHeaderFilter/index.native.js";
+import { Table } from "@multiplatform.one/table-primitives";
+import { DataTableContext } from "./DataTableContext.native.js";
+import { DataTableStateContext } from "./DataTableStateContext.native.js";
+import { DataTableMobileCards } from "./DataTableMobileCards.native.js";
+import { DataTableVirtualized } from "./DataTableVirtualized.native.js";
+function getColumnField(column) {
+  var _column_field;
+  return (_column_field = column.field) !== null && _column_field !== void 0 ? _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";
+  }
+}
+var rowHeightPx = 40;
+function DataTableRoot(param) {
+  var {
+    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
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    sm
+  } = useMedia();
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    intent: void 0,
+    component: "DataTable",
+    compact
+  });
+  var {
+    resolvedForm
+  } = useFormField({
+    form: formProp
+  });
+  var isFormMode = Boolean(name && resolvedForm);
+  var {
+    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
+  });
+  var resolvedSize = size !== null && size !== void 0 ? size : knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md";
+  var cellHeight = resolvedSize === "sm" ? "$3" : resolvedSize === "lg" ? "$5" : "$4";
+  var headerGroups = table.getHeaderGroups();
+  var tableRows = table.getRowModel().rows;
+  var footerGroups = table.getFooterGroups();
+  var hasFooter = footerGroups.some(function (group) {
+    return group.headers.some(function (header) {
+      return header.column.columnDef.footer != null;
+    });
+  });
+  var allRowsLength = tableRows.length + headerGroups.length + (hasFooter ? footerGroups.length : 0);
+  var rowCounter = useRef(-1);
+  rowCounter.current = -1;
+  var getColSizeProps = useCallback(function (col) {
+    var hasExplicitSize = col.columnDef.size != null;
+    if (hasExplicitSize || enableColumnResizing) {
+      return {
+        width: col.getSize()
+      };
+    }
+    return {};
+  }, [enableColumnResizing]);
+  var dnd = useMemo(function () {
+    if (!enableColumnOrdering || !isWeb) return null;
+    return {
+      onDragStart: function onDragStart(e, columnId) {
+        var _e_dataTransfer;
+        (_e_dataTransfer = e.dataTransfer) === null || _e_dataTransfer === void 0 ? void 0 : _e_dataTransfer.setData("application/x-table-column-id", columnId);
+        if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+      },
+      onDragOver: function onDragOver(e) {
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+      },
+      onDrop: function onDrop(e, targetColumnId) {
+        var _e_dataTransfer;
+        e.preventDefault();
+        var sourceId = (_e_dataTransfer = e.dataTransfer) === null || _e_dataTransfer === void 0 ? void 0 : _e_dataTransfer.getData("application/x-table-column-id");
+        if (!sourceId || sourceId === targetColumnId) return;
+        var order = table.getAllLeafColumns().map(function (c) {
+          return c.id;
+        });
+        var currentOrder = table.getState().columnOrder.length ? [...table.getState().columnOrder] : order;
+        var fromIdx = currentOrder.indexOf(sourceId);
+        var toIdx = currentOrder.indexOf(targetColumnId);
+        if (fromIdx < 0 || toIdx < 0) return;
+        var next = [...currentOrder];
+        next.splice(fromIdx, 1);
+        next.splice(toIdx, 0, sourceId);
+        table.setColumnOrder(next);
+      }
+    };
+  }, [enableColumnOrdering, table]);
+  var bodyScrollRef = useRef(null);
+  var isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && typeof window !== "undefined";
+  var virtualizer = useVirtualizer({
+    count: tableRows.length,
+    getScrollElement: function getScrollElement() {
+      return bodyScrollRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return rowHeightPx;
+    },
+    overscan: virtualizationOverscan,
+    enabled: isVirtualized
+  });
+  var virtualItems = isVirtualized ? virtualizer.getVirtualItems() : [];
+  var totalSize = isVirtualized ? virtualizer.getTotalSize() : 0;
+  var isFlexLayout = columnLayout !== "auto";
+  var displayMode = isFlexLayout ? "flex" : "table";
+  var cellFlexProps = useMemo(function () {
+    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]);
+  var pinning = useMemo(function () {
+    return enableColumnPinning ? DataTableColumnPinning({
+      table,
+      maxPinnedColumns,
+      allowPinning: true
+    }) : null;
+  }, [enableColumnPinning, table, maxPinnedColumns]);
+  var keyboardNav = useDataTableKeyboard({
+    table,
+    enabled: enableKeyboardNavigation,
+    viewportHeight: virtualizationHeight !== null && virtualizationHeight !== void 0 ? virtualizationHeight : 400,
+    onScrollToRow: isVirtualized ? function (idx) {
+      return virtualizer.scrollToIndex(idx, {
+        align: "auto"
+      });
+    } : void 0,
+    onRowActivate: enableRowExpansion ? function (row) {
+      if (row.getCanExpand()) row.toggleExpanded();
+    } : void 0
+  });
+  var handleCellChange = useCallback(async function (rowIndex, columnId, newValue) {
+    var _data_rowIndex;
+    if (readOnly) return;
+    var previousValue = (_data_rowIndex = data[rowIndex]) === null || _data_rowIndex === void 0 ? void 0 : _data_rowIndex[columnId];
+    if (onCellChange) {
+      var result = await onCellChange(rowIndex, columnId, newValue, previousValue);
+      if (result === false) return;
+    }
+    if (!isFormMode && onDataChange) {
+      var newData = [...data];
+      newData[rowIndex] = {
+        ...newData[rowIndex],
+        [columnId]: newValue
+      };
+      onDataChange(newData);
+    }
+  }, [readOnly, data, onCellChange, isFormMode, onDataChange]);
+  var handleAddRow = useCallback(function () {
+    if (readOnly || maxRows && data.length >= maxRows) return;
+    var newRow = {
+      ...defaultRow,
+      idx: data.length + 1
+    };
+    if (!isFormMode && onDataChange) {
+      onDataChange([...data, newRow]);
+    }
+  }, [readOnly, maxRows, data, defaultRow, isFormMode, onDataChange]);
+  var handleDeleteRow = useCallback(function (rowIndex) {
+    if (readOnly || data.length <= minRows) return;
+    if (!isFormMode && onDataChange) {
+      onDataChange(data.filter(function (_, idx) {
+        return idx !== rowIndex;
+      }));
+    }
+  }, [readOnly, minRows, data, isFormMode, onDataChange]);
+  var isCompact = resolvedSize === "sm" || compact;
+  var renderCellContent = useCallback(function (cell, rowIndex, rowData) {
+    var _columnDef_fieldProps;
+    var columnDef = cell.column.columnDef;
+    var columnId = cell.column.id;
+    var value = cell.getValue();
+    if (columnDef.cell && !columnDef.field) {
+      return flexRender(columnDef.cell, cell.getContext());
+    }
+    var columnField = getColumnField(columnDef);
+    var dateRangeLinkedColumn = (_columnDef_fieldProps = columnDef.fieldProps) === null || _columnDef_fieldProps === void 0 ? void 0 : _columnDef_fieldProps.dateRangeLinkedColumn;
+    var linkedValue;
+    var onLinkedChange;
+    if (dateRangeLinkedColumn && rowData) {
+      linkedValue = rowData[dateRangeLinkedColumn];
+      onLinkedChange = function onLinkedChange2(newValue) {
+        handleCellChange(rowIndex, dateRangeLinkedColumn, newValue);
+      };
+    }
+    return /* @__PURE__ */_jsx(DataTableCell, {
+      value,
+      field: columnField,
+      fieldProps: columnDef.fieldProps,
+      onChange: function onChange(newValue) {
+        return handleCellChange(rowIndex, columnId, newValue);
+      },
+      readOnly,
+      columnId,
+      rowIndex,
+      rowData,
+      size: knobProps.sizeToken,
+      compact: isCompact,
+      linkedValue,
+      onLinkedChange
+    });
+  }, [handleCellChange, readOnly, knobProps.sizeToken, isCompact]);
+  var isSSR = typeof window === "undefined";
+  var extraColumnsBefore = (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
+  var extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
+  var getStickyStyle = useCallback(function (columnId) {
+    if (!enableColumnPinning || !pinning) return void 0;
+    var colPinning = table.getState().columnPinning || {
+      left: [],
+      right: []
+    };
+    var leftPinned = colPinning.left || [];
+    var rightPinned = colPinning.right || [];
+    var leftIdx = leftPinned.indexOf(columnId);
+    var rightIdx = rightPinned.indexOf(columnId);
+    if (leftIdx >= 0) {
+      var leftOffset = 0;
+      for (var i = 0; i < leftIdx; i++) {
+        var 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) {
+      var rightOffset = 0;
+      for (var i1 = rightIdx + 1; i1 < rightPinned.length; i1++) {
+        var col1 = table.getColumn(rightPinned[i1]);
+        if (col1) rightOffset += col1.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]);
+  var renderRowContent = useCallback(function (row, rowIndex, _isLastRow) {
+    var 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(function (_, i) {
+              return /* @__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: function onPress() {
+              return 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(function (cell, cellIndex) {
+        var isFirstDataCell = cellIndex === 0 && !showRowNumbers && !enableRowExpansion;
+        var isLastDataCell = cellIndex === row.getVisibleCells().length - 1 && !showDeleteRow;
+        var cellLocation = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
+        var 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: function onPress() {
+            return handleDeleteRow(rowIndex);
+          },
+          "aria-label": t("Delete row")
+        })
+      })]
+    });
+  }, [showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, t]);
+  var stateContextValue = useMemo(function () {
+    return {
+      table,
+      state,
+      actions,
+      computed
+    };
+  }, [table, state, actions, computed]);
+  var renderToolbarComponent = function renderToolbarComponent2() {
+    var _table_getState_columnFilters;
+    var activeFilterCount = ((_table_getState_columnFilters = table.getState().columnFilters) === null || _table_getState_columnFilters === void 0 ? void 0 : _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
+    });
+  };
+  var renderPaginationComponent = function renderPaginationComponent2() {
+    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
+    });
+  };
+  var renderInner = function renderInner2(tableData, effectiveHandleAddRow, effectiveHandleDeleteRow, _effectiveHandleCellChange) {
+    var _headerGroups_;
+    var hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
+    var 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: [/* Toolbar */
+          hasToolbar && renderToolbarComponent(), /* Compound sub-components (children) */
+          children, /* Mobile Card View */
+          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: function 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: [/* Table Header */
+              /* @__PURE__ */_jsx(Table.Head, {
+                zIndex: "$1",
+                "aria-label": "Table headers",
+                children: headerGroups.map(function (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(function (header, headerIndex) {
+                      var _header_column_columnDef_minSize, _header_column_columnDef_maxSize;
+                      var _header_column_columnDef_fieldProps;
+                      var isSortableHeader = header.column.getCanSort();
+                      var sortDirection = header.column.getIsSorted();
+                      var canResize = enableColumnResizing && header.column.getCanResize();
+                      var resizeHandler = canResize ? header.getResizeHandler() : void 0;
+                      var colSize = header.getSize();
+                      var colMinSize = (_header_column_columnDef_minSize = header.column.columnDef.minSize) !== null && _header_column_columnDef_minSize !== void 0 ? _header_column_columnDef_minSize : 0;
+                      var colMaxSize = (_header_column_columnDef_maxSize = header.column.columnDef.maxSize) !== null && _header_column_columnDef_maxSize !== void 0 ? _header_column_columnDef_maxSize : Number.MAX_SAFE_INTEGER;
+                      var stickyStyle = getStickyStyle(header.column.id);
+                      var columnField = getColumnField(header.column.columnDef);
+                      var isNumeric = isNumericField(columnField);
+                      var isFirstHeaderCell = headerIndex === 0 && !showRowNumbers && !enableRowExpansion;
+                      var isLastHeaderCell = headerIndex === headerGroup.headers.length - 1 && !(showDeleteRow && !readOnly);
+                      var 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: function onDragStart(e) {
+                            return dnd.onDragStart(e, header.column.id);
+                          },
+                          onDragOver: dnd.onDragOver,
+                          onDrop: function onDrop(e) {
+                            return 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: function onFilterChange(value) {
+                                return header.column.setFilterValue(value);
+                              },
+                              isFiltered: header.column.getIsFiltered(),
+                              options: (_header_column_columnDef_fieldProps = header.column.columnDef.fieldProps) === null || _header_column_columnDef_fieldProps === void 0 ? void 0 : _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);
+                })
+              }), /* Table Body */
+              /* @__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(function (row, index) {
+                    var _row_getIsGrouped, _row_subRows;
+                    rowCounter.current++;
+                    var isLastRow = index === tableRows.length - 1;
+                    if (enableGrouping && ((_row_getIsGrouped = row.getIsGrouped) === null || _row_getIsGrouped === void 0 ? void 0 : _row_getIsGrouped.call(row))) {
+                      var _row_depth, _row_groupingValue, _ref;
+                      var _row_subRows1;
+                      var colSpan = table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter;
+                      var indent = ((_row_depth = row.depth) !== null && _row_depth !== void 0 ? _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: function onPress() {
+                              return row.toggleExpanded();
+                            },
+                            children: [/* @__PURE__ */_jsx(Text, {
+                              fontFamily: "$mono",
+                              fontSize: "$3",
+                              children: row.getIsExpanded() ? "\u25BC" : "\u25B6"
+                            }), /* @__PURE__ */_jsx(Text, {
+                              fontWeight: "600",
+                              children: String((_row_groupingValue = row.groupingValue) !== null && _row_groupingValue !== void 0 ? _row_groupingValue : "\u2014")
+                            }), /* @__PURE__ */_jsxs(Text, {
+                              color: "$placeholderColor",
+                              fontSize: "$2",
+                              children: ["(", (_ref = (_row_subRows1 = row.subRows) === null || _row_subRows1 === void 0 ? void 0 : _row_subRows1.length) !== null && _ref !== void 0 ? _ref : 0, ")"]
+                            })]
+                          })
+                        })
+                      }, row.id);
+                    }
+                    var 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));
+                    var subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !((_row_subRows = row.subRows) === null || _row_subRows === void 0 ? void 0 : _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);
+                  }), /* Filler row — fills remaining space with background */
+                  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_ = headerGroups[0]) === null || _headerGroups_ === void 0 ? void 0 : _headerGroups_.headers.map(function (header, headerIndex) {
+                      var isFirstDataCell = headerIndex === 0 && !showRowNumbers && !enableRowExpansion;
+                      var isLastDataCell = headerIndex === headerGroups[0].headers.length - 1 && !(showDeleteRow && !readOnly);
+                      var 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")]
+                })
+              }), /* Table Footer */
+              hasFooter && /* @__PURE__ */_jsx(Table.Foot, {
+                children: footerGroups.map(function (footerGroup) {
+                  return /* @__PURE__ */_jsx(Table.Row, {
+                    children: footerGroup.headers.map(function (header) {
+                      return /* @__PURE__ */_jsx(Table.Cell, {
+                        children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())
+                      }, header.id);
+                    })
+                  }, footerGroup.id);
+                })
+              })]
+            })
+          })), /* Add Row Button */
+          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")
+            })
+          }), /* Pagination */
+          enablePagination && /* @__PURE__ */_jsx(View, {
+            paddingTop: "$3",
+            children: renderPaginationComponent()
+          }), /* Loading State */
+          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: function children2(field) {
+        var _field_state_value;
+        var formData = (_field_state_value = field.state.value) !== null && _field_state_value !== void 0 ? _field_state_value : [];
+        var setFormData = function setFormData2(next) {
+          return field.handleChange(next);
+        };
+        return renderInner(formData, function () {
+          if (readOnly || maxRows && formData.length >= maxRows) return;
+          var newRow = {
+            ...defaultRow,
+            idx: formData.length + 1
+          };
+          setFormData([...formData, newRow]);
+        }, function (idx) {
+          if (readOnly || formData.length <= minRows) return;
+          setFormData(formData.filter(function (_, i) {
+            return i !== idx;
+          }));
+        }, async function (rowIndex, columnId, newValue) {
+          var _formData_rowIndex;
+          if (readOnly) return;
+          var previousValue = (_formData_rowIndex = formData[rowIndex]) === null || _formData_rowIndex === void 0 ? void 0 : _formData_rowIndex[columnId];
+          if (onCellChange) {
+            var result = await onCellChange(rowIndex, columnId, newValue, previousValue);
+            if (result === false) return;
+          }
+          var newData = [...formData];
+          newData[rowIndex] = {
+            ...newData[rowIndex],
+            [columnId]: newValue
+          };
+          setFormData(newData);
+        });
+      }
+    });
+  }
+  return renderInner(data, handleAddRow, handleDeleteRow, handleCellChange);
+}
+export { DataTableRoot };
+//# sourceMappingURL=DataTableRoot.native.js.map