@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTable/index.native.js

@@ -0,0 +1,774 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var index_native_exports = {};
+__export(index_native_exports, {
+  DataTable: () => DataTable,
+  DataTableContext: () => import_DataTableContext2.DataTableContext,
+  DataTableStateContext: () => import_DataTableStateContext2.DataTableStateContext,
+  useDataTableState: () => import_DataTableStateContext2.useDataTableState
+});
+module.exports = __toCommonJS(index_native_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
+var import_flash_list = require("@shopify/flash-list");
+var import_forms = require("@multiplatform.one/forms");
+var import_react_table = require("@tanstack/react-table");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = __toESM(require("react"));
+var import_tamagui = require("tamagui");
+var import_react_i18next = require("react-i18next");
+var import_useDataTable = require("../../hooks/useDataTable.native.js");
+var import_DataTableColumnPinning = require("../DataTableColumnPinning/index.native.js");
+var import_DataTablePagination = require("../DataTablePagination/index.native.js");
+var import_DataTableToolbar = require("../DataTableToolbar/index.native.js");
+var import_DataTableFilters = require("../DataTableFilters/index.native.js");
+var import_DataTableBulkActions = require("../DataTableBulkActions/index.native.js");
+var import_DataTableExport = require("../DataTableExport/index.native.js");
+var import_DataTableSearch = require("../DataTableSearch/index.native.js");
+var import_DataTableViewOptions = require("../DataTableViewOptions/index.native.js");
+var import_DataTableGrouping = require("../DataTableGrouping/index.native.js");
+var import_DataTableCell = require("../DataTableCell/index.native.js");
+var import_table_primitives = require("@multiplatform.one/table-primitives");
+var import_DataTableContext = require("./DataTableContext.native.js");
+var import_DataTableStateContext = require("./DataTableStateContext.native.js");
+var import_DataTableContext2 = require("./DataTableContext.native.js");
+var import_DataTableStateContext2 = require("./DataTableStateContext.native.js");
+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,
+    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
+  } = param;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    sm
+  } = (0, import_tamagui.useMedia)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    intent: void 0,
+    component: "DataTable",
+    compact
+  });
+  var {
+    resolvedForm
+  } = (0, import_forms.useFormField)({
+    form: formProp
+  });
+  var isFormMode = Boolean(name && resolvedForm);
+  var {
+    table,
+    state,
+    actions,
+    computed
+  } = (0, import_useDataTable.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
+  });
+  var resolvedSize = size !== null && size !== void 0 ? size : knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md";
+  var cellHeight = resolvedSize === "sm" ? "$6" : resolvedSize === "lg" ? "$10" : "$8";
+  var headerGroups = table.getHeaderGroups();
+  var tableRows = table.getRowModel().rows;
+  var footerGroups = table.getFooterGroups();
+  var flashListRef = (0, import_react2.useRef)(null);
+  var getColSizeProps = (0, import_react2.useCallback)(function (col, isLastCell) {
+    if (enableColumnResizing) {
+      var _col_columnDef_minSize, _col_columnDef_maxSize;
+      return {
+        width: col.getSize(),
+        minWidth: (_col_columnDef_minSize = col.columnDef.minSize) !== null && _col_columnDef_minSize !== void 0 ? _col_columnDef_minSize : 0,
+        maxWidth: (_col_columnDef_maxSize = col.columnDef.maxSize) !== null && _col_columnDef_maxSize !== void 0 ? _col_columnDef_maxSize : Number.MAX_SAFE_INTEGER,
+        flex: 0
+      };
+    }
+    if (col.columnDef.size != null) {
+      var _col_columnDef_minSize1;
+      return {
+        width: col.columnDef.size,
+        minWidth: (_col_columnDef_minSize1 = col.columnDef.minSize) !== null && _col_columnDef_minSize1 !== void 0 ? _col_columnDef_minSize1 : col.columnDef.size,
+        flex: 0
+      };
+    }
+    return {
+      flex: isLastCell ? 1 : 0,
+      flexShrink: isLastCell ? 1 : 0,
+      flexGrow: isLastCell ? 1 : 0
+    };
+  }, [enableColumnResizing]);
+  var isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0;
+  var pinning = (0, import_react2.useMemo)(function () {
+    return enableColumnPinning ? (0, import_DataTableColumnPinning.DataTableColumnPinning)({
+      table,
+      maxPinnedColumns,
+      allowPinning: true
+    }) : null;
+  }, [enableColumnPinning, table, maxPinnedColumns]);
+  var extraColumnsBefore = (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
+  var extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
+  var handleCellChange = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.useCallback)(function (cell, rowIndex, rowData) {
+    var columnDef = cell.column.columnDef;
+    var columnId = cell.column.id;
+    var value = cell.getValue();
+    if (columnDef.cell && !columnDef.field) {
+      return (0, import_react_table.flexRender)(columnDef.cell, cell.getContext());
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableCell.DataTableCell, {
+      value,
+      field: columnDef.field,
+      fieldProps: columnDef.fieldProps,
+      onChange: function onChange(newValue) {
+        return handleCellChange(rowIndex, columnId, newValue);
+      },
+      readOnly,
+      columnId,
+      rowIndex,
+      rowData
+    });
+  }, [handleCellChange, readOnly]);
+  var renderRowContent = (0, import_react2.useCallback)(function (row, rowIndex) {
+    var rowData = row.original;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [showRowNumbers && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+        cellWidth: 50,
+        cellHeight,
+        cellLocation: "first",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: knobProps.sizeToken,
+          color: "$color10",
+          children: rowIndex + 1
+        })
+      }), enableRowExpansion && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+        cellWidth: 32,
+        cellHeight,
+        cellLocation: showRowNumbers ? "middle" : "first",
+        children: row.getCanExpand() ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          onPress: function onPress() {
+            return row.toggleExpanded();
+          },
+          cursor: "pointer",
+          padding: "$1",
+          "aria-expanded": row.getIsExpanded(),
+          "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretRightIcon, {
+            size: 14,
+            style: {
+              transform: row.getIsExpanded() ? "rotate(90deg)" : "none"
+            }
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          width: 14
+        })
+      }), 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";
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+          ...getColSizeProps(cell.column, isLastDataCell),
+          cellHeight,
+          cellLocation,
+          minWidth: 0,
+          children: renderCellContent(cell, rowIndex, rowData)
+        }, cell.id);
+      }), showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+        cellWidth: 60,
+        cellHeight,
+        cellLocation: "last",
+        justifyContent: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          chromeless: true,
+          circular: true,
+          icon: import_react.TrashIcon,
+          disabled: data.length <= minRows,
+          onPress: function onPress() {
+            return handleDeleteRow(rowIndex);
+          },
+          "aria-label": t("Delete row")
+        })
+      })]
+    });
+  }, [showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, cellHeight, knobProps.sizeToken, getColSizeProps, renderCellContent, handleDeleteRow, data.length, minRows, t]);
+  var renderRow = (0, import_react2.useCallback)(function (row, index) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+      backgroundColor: index % 2 === 0 ? "$color1" : "$color2",
+      rowLocation: "middle",
+      "aria-rowindex": index + 1,
+      "aria-label": `Row ${index + 1}`,
+      children: renderRowContent(row, index)
+    }, `${row.id}-${index}`);
+  }, [renderRowContent]);
+  var renderMobileCard = (0, import_react2.useCallback)(function (row, index, onDelete) {
+    var rowData = row.original;
+    var visibleCells = row.getVisibleCells();
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      backgroundColor: "$color1",
+      borderRadius: "$4",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      padding: "$3",
+      marginBottom: "$2",
+      children: [showRowNumbers && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingBottom: "$2",
+        borderBottomWidth: 1,
+        borderBottomColor: "$borderColor",
+        marginBottom: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          fontSize: "$3",
+          color: "$color10",
+          fontWeight: "600",
+          children: ["#", index + 1]
+        }), showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          chromeless: true,
+          circular: true,
+          size: "$2",
+          icon: import_react.TrashIcon,
+          disabled: tableRows.length <= minRows,
+          onPress: function onPress() {
+            return onDelete === null || onDelete === void 0 ? void 0 : onDelete(index);
+          },
+          "aria-label": t("Delete row")
+        })]
+      }), visibleCells.map(function (cell) {
+        var columnDef = cell.column.columnDef;
+        var headerLabel = typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingVertical: "$1.5",
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$3",
+            color: "$color10",
+            fontWeight: "500",
+            width: "40%",
+            flexShrink: 0,
+            children: headerLabel
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            flex: 1,
+            children: renderCellContent(cell, index, rowData)
+          })]
+        }, cell.id);
+      }), !showRowNumbers && showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        paddingTop: "$2",
+        alignItems: "flex-end",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          chromeless: true,
+          circular: true,
+          size: "$2",
+          icon: import_react.TrashIcon,
+          disabled: tableRows.length <= minRows,
+          onPress: function onPress() {
+            return onDelete === null || onDelete === void 0 ? void 0 : onDelete(index);
+          },
+          "aria-label": t("Delete row")
+        })
+      })]
+    }, `${row.id}-${index}`);
+  }, [showRowNumbers, showDeleteRow, readOnly, tableRows.length, minRows, renderCellContent, t]);
+  var renderToolbarComponent = function renderToolbarComponent2() {
+    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 /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableToolbar.DataTableToolbar, {
+      globalFilter: state.globalFilter || "",
+      onGlobalFilterChange: actions.setGlobalFilter,
+      onClearFilters: actions.clearFilters,
+      onSaveView: actions.saveView,
+      onLoadView: actions.loadView,
+      views: state.views,
+      activeViewId: state.activeViewId,
+      enableViews,
+      enableGlobalSearch,
+      enableFiltering
+    });
+  };
+  var renderPaginationComponent = function renderPaginationComponent2() {
+    if (renderPagination) {
+      return renderPagination({
+        pagination: state.pagination,
+        onPaginationChange: actions.setPagination,
+        pageSizeOptions: [10, 20, 50, 100]
+      });
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTablePagination.DataTablePagination, {
+      pagination: state.pagination,
+      onPaginationChange: actions.setPagination,
+      pageSizeOptions: [10, 20, 50, 100],
+      showInfo: !sm
+    });
+  };
+  var stateContextValue = (0, import_react2.useMemo)(function () {
+    return {
+      table,
+      state,
+      actions,
+      computed
+    };
+  }, [table, state, actions, computed]);
+  var renderTableInner = (0, import_react2.useCallback)(function (tableData, setTableData) {
+    var effectiveHandleAddRow = function effectiveHandleAddRow2() {
+      if (readOnly || maxRows && tableData.length >= maxRows) return;
+      var newRow = {
+        ...defaultRow,
+        idx: tableData.length + 1
+      };
+      setTableData === null || setTableData === void 0 ? void 0 : setTableData([...tableData, newRow]);
+    };
+    var effectiveHandleDeleteRow = function effectiveHandleDeleteRow2(rowIndex) {
+      if (readOnly || tableData.length <= minRows) return;
+      setTableData === null || setTableData === void 0 ? void 0 : setTableData(tableData.filter(function (_, idx) {
+        return idx !== rowIndex;
+      }));
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableContext.DataTableContext.Provider, {
+      size: resolvedSize,
+      compact: isCompact,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableStateContext.DataTableStateContext.Provider, {
+        value: stateContextValue,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+          flexDirection: "column",
+          gap: "$6",
+          "aria-label": ariaLabel || "Data table",
+          "aria-describedby": ariaDescribedBy,
+          "aria-live": "polite",
+          "aria-atomic": "false",
+          ...knobProps.borderRadius,
+          ...props,
+          children: [(enableGlobalSearch || enableFiltering || enableViews) && renderToolbarComponent(), children, renderFilters === null || renderFilters === void 0 ? void 0 : renderFilters({
+            filters: state.filters || [],
+            onFiltersChange: actions.setFilters,
+            onAddFilter: actions.addFilter,
+            onRemoveFilter: actions.removeFilter,
+            onClearFilters: actions.clearFilters,
+            availableColumns: columns.map(function (col) {
+              return {
+                id: col.id || "",
+                label: typeof col.header === "string" ? col.header : col.id || "",
+                type: mapFieldToFilterType(col.field)
+              };
+            })
+          }), !sm ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+            flexDirection: "column",
+            gap: "$2",
+            children: [tableRows.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              padding: "$8",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "$color1",
+              borderRadius: "$4",
+              "aria-live": "polite",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                color: "$color10",
+                fontSize: "$4",
+                children: computed.hasActiveFilters ? t("No results found") : t("No data available")
+              })
+            }) : tableRows.map(function (row, index) {
+              return renderMobileCard(row, index, isFormMode ? effectiveHandleDeleteRow : handleDeleteRow);
+            }), enablePagination && renderPaginationComponent()]
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            horizontal: true,
+            maxWidth: "100%",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              flex: 1,
+              flexDirection: "column",
+              width: "100%",
+              "aria-label": `${ariaLabel || "Data table"} content`,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
+                alignCells: {
+                  x: "start",
+                  y: "center"
+                },
+                alignHeaderCells: {
+                  x: "start",
+                  y: "center"
+                },
+                cellHeight,
+                ...knobProps.borderRadius,
+                width: "100%",
+                marginBottom: enablePagination ? "$10" : void 0,
+                "aria-label": ariaLabel || "Data table",
+                "aria-rowcount": computed.totalPages * state.pagination.pageSize,
+                "aria-colcount": table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter,
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
+                  zIndex: "$1",
+                  "aria-label": "Table headers",
+                  children: headerGroups.map(function (headerGroup, groupIndex) {
+                    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table.Row, {
+                      backgroundColor: "$color2",
+                      rowLocation: groupIndex === 0 ? "first" : "middle",
+                      borderTopRightRadius: "$4",
+                      borderTopLeftRadius: "$4",
+                      borderBottomLeftRadius: "$0",
+                      borderBottomRightRadius: "$0",
+                      "aria-rowindex": groupIndex,
+                      children: [showRowNumbers && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+                        cellWidth: 50,
+                        cellHeight,
+                        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                          fontSize: "$4",
+                          fontWeight: "600",
+                          children: "#"
+                        })
+                      }), enableRowExpansion && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+                        cellWidth: 32,
+                        cellHeight,
+                        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                          width: 14
+                        })
+                      }), headerGroup.headers.map(function (header, headerIndex) {
+                        var isSortableHeader = header.column.getCanSort();
+                        var sortDirection = header.column.getIsSorted();
+                        var isLastHeader = headerIndex === headerGroup.headers.length - 1 && !showDeleteRow;
+                        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+                          id: `${header.column.id}-header`,
+                          onPress: isSortableHeader ? header.column.getToggleSortingHandler() : void 0,
+                          cursor: isSortableHeader ? "pointer" : "default",
+                          position: "relative",
+                          "aria-sort": isSortableHeader ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
+                          ...getColSizeProps(header.column, isLastHeader),
+                          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+                            flexDirection: "row",
+                            gap: "$2",
+                            alignItems: "center",
+                            justifyContent: "flex-start",
+                            flex: 1,
+                            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                              fontSize: "$4",
+                              selectable: false,
+                              userSelect: "none",
+                              children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+                            }), isSortableHeader && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+                              "aria-hidden": true,
+                              role: "presentation",
+                              color: sortDirection ? "$color10" : "$color8",
+                              children: [sortDirection === "asc" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+                                size: 14
+                              }), sortDirection === "desc" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+                                size: 14,
+                                style: {
+                                  transform: "rotate(180deg)"
+                                }
+                              }), sortDirection === false && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
+                                size: 14
+                              })]
+                            }), pinning && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+                              flexDirection: "row",
+                              gap: "$1",
+                              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(pinning.PinButton, {
+                                columnId: header.column.id,
+                                position: "left"
+                              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(pinning.PinButton, {
+                                columnId: header.column.id,
+                                position: "right"
+                              })]
+                            })]
+                          })
+                        }, header.id);
+                      }), showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+                        cellWidth: 60,
+                        cellHeight,
+                        cellLocation: "last"
+                      })]
+                    }, headerGroup.id);
+                  })
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Body, {
+                  "aria-label": "Table data",
+                  children: tableRows.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                        padding: "$8",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        "aria-live": "polite",
+                        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                          color: "$color10",
+                          fontSize: "$4",
+                          children: computed.hasActiveFilters ? t("No results found") : t("No data available")
+                        })
+                      })
+                    })
+                  }) : isVirtualized ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                    style: {
+                      height: virtualizationHeight
+                    },
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_flash_list.FlashList, {
+                      ref: flashListRef,
+                      data: tableRows,
+                      drawDistance: rowHeightPx * virtualizationOverscan,
+                      keyExtractor: function keyExtractor(row) {
+                        return row.id;
+                      },
+                      renderItem: function renderItem(param2) {
+                        var {
+                          item,
+                          index
+                        } = param2;
+                        return renderRow(item, index);
+                      }
+                    })
+                  }) : tableRows.map(function (row, index) {
+                    var _row_subRows;
+                    var mainRow = renderRow(row, index);
+                    var subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !((_row_subRows = row.subRows) === null || _row_subRows === void 0 ? void 0 : _row_subRows.length) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+                      backgroundColor: "$color2",
+                      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                        ...{
+                          colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
+                        },
+                        children: renderSubComponent(row)
+                      })
+                    }, `${row.id}-sub`) : null;
+                    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react2.default.Fragment, {
+                      children: [mainRow, subRow]
+                    }, row.id);
+                  })
+                }), footerGroups.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Foot, {
+                  children: footerGroups.map(function (footerGroup) {
+                    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+                      children: footerGroup.headers.map(function (header) {
+                        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                          children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(header.column.columnDef.footer, header.getContext())
+                        }, header.id);
+                      })
+                    }, footerGroup.id);
+                  })
+                })]
+              })
+            })
+          }), showAddRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              icon: import_react.PlusIcon,
+              disabled: maxRows !== void 0 && tableData.length >= maxRows,
+              onPress: isFormMode ? effectiveHandleAddRow : handleAddRow,
+              "aria-label": t("Add Row"),
+              children: t("Add Row")
+            })
+          }), sm && enablePagination && renderPaginationComponent(), state.isLoading && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: import_forms.zIndex.loading,
+            "aria-busy": true,
+            "aria-live": "assertive",
+            "aria-label": "Loading table data",
+            role: "status",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+              size: "large",
+              color: "$color10"
+            })
+          })]
+        })
+      })
+    });
+  }, [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 /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.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 renderTableInner(formData, setFormData);
+      }
+    });
+  }
+  return renderTableInner(data, onDataChange);
+}
+var DataTable = (0, import_tamagui.withStaticProperties)(DataTableRoot, {
+  Toolbar: import_DataTableToolbar.DataTableToolbar,
+  Filters: import_DataTableFilters.DataTableFilters,
+  Pagination: import_DataTablePagination.DataTablePagination,
+  BulkActions: import_DataTableBulkActions.DataTableBulkActions,
+  Export: import_DataTableExport.DataTableExport,
+  Search: import_DataTableSearch.DataTableSearch,
+  ViewOptions: import_DataTableViewOptions.DataTableViewOptions,
+  Grouping: import_DataTableGrouping.DataTableGrouping
+});
+//# sourceMappingURL=index.native.js.map