@multiplatform.one/table 6.1.0 → 6.4.0

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

@@ -44,6 +44,7 @@ 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_components = require("@multiplatform.one/components");
 var import_forms = require("@multiplatform.one/forms");
 var import_react_table = require("@tanstack/react-table");
 var import_theme = require("@multiplatform.one/theme");
@@ -51,6 +52,8 @@ 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_paginationDefaults = require("../../utils/paginationDefaults.native.js");
+var import_withInterp = require("../../utils/withInterp.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");
@@ -66,6 +69,23 @@ 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 NativeCellContent(param) {
+  var {
+    cellDef,
+    ctx,
+    fontSize
+  } = param;
+  var rendered = typeof cellDef === "function" ? cellDef(ctx) : cellDef;
+  if (typeof rendered === "string" || typeof rendered === "number") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...(fontSize ? {
+        fontSize
+      } : {}),
+      children: String(rendered)
+    });
+  }
+  return rendered !== null && rendered !== void 0 ? rendered : null;
+}
 function mapFieldToFilterType(field) {
   switch (field) {
     case "stepper":
@@ -99,6 +119,7 @@ function DataTableRoot(param) {
     columns,
     initialState,
     onStateChange,
+    onRetry,
     syncWithUrl = false,
     urlDebounceMs = 500,
     urlStrategy,
@@ -108,11 +129,13 @@ function DataTableRoot(param) {
     enableFiltering = true,
     enableSorting = true,
     enablePagination = true,
+    pageSizeOptions,
     enableColumnVisibility = true,
     enableColumnOrdering = false,
     enableColumnResizing = false,
     enableGlobalSearch = true,
     enableViews = false,
+    layout = "auto",
     enableVirtualization = false,
     virtualizationHeight,
     virtualizationOverscan = 5,
@@ -140,6 +163,7 @@ function DataTableRoot(param) {
     className: _className,
     size,
     compact = false,
+    disabled = false,
     children,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
@@ -151,13 +175,18 @@ function DataTableRoot(param) {
   var {
     sm
   } = (0, import_tamagui.useMedia)();
+  var showCards = layout === "cards" || layout === "auto" && !sm;
   var {
-    knobProps
+    knobProps,
+    disabledState
   } = (0, import_theme.useResolvedKnobs)({
     intent: void 0,
     component: "DataTable",
     compact
   });
+  var isRTL = (0, import_components.useDirection)() === "rtl";
+  var ExpandCaretIcon = isRTL ? import_react.CaretLeftIcon : import_react.CaretRightIcon;
+  var expandedCaretRotation = isRTL ? "rotate(-90deg)" : "rotate(90deg)";
   var {
     resolvedForm
   } = (0, import_forms.useFormField)({
@@ -230,19 +259,20 @@ function DataTableRoot(param) {
     };
   }, [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 pinningHelpers = (0, import_DataTableColumnPinning.DataTableColumnPinning)({
+    table,
+    maxPinnedColumns,
+    allowPinning: true,
+    disabled
+  });
+  var pinning = enableColumnPinning ? pinningHelpers : null;
   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;
+    if (readOnly || disabled) return;
     var previousValue = (_data_rowIndex = data[rowIndex]) === null || _data_rowIndex === void 0 ? void 0 : _data_rowIndex[columnId];
+    if (Object.is(previousValue, newValue)) return;
     if (onCellChange) {
       var result = await onCellChange(rowIndex, columnId, newValue, previousValue);
       if (result === false) return;
@@ -255,9 +285,9 @@ function DataTableRoot(param) {
       };
       onDataChange(newData);
     }
-  }, [readOnly, data, onCellChange, isFormMode, onDataChange]);
+  }, [readOnly, disabled, data, onCellChange, isFormMode, onDataChange]);
   var handleAddRow = (0, import_react2.useCallback)(function () {
-    if (readOnly || maxRows && data.length >= maxRows) return;
+    if (readOnly || disabled || maxRows && data.length >= maxRows) return;
     var newRow = {
       ...defaultRow,
       idx: data.length + 1
@@ -265,22 +295,26 @@ function DataTableRoot(param) {
     if (!isFormMode && onDataChange) {
       onDataChange([...data, newRow]);
     }
-  }, [readOnly, maxRows, data, defaultRow, isFormMode, onDataChange]);
+  }, [readOnly, disabled, maxRows, data, defaultRow, isFormMode, onDataChange]);
   var handleDeleteRow = (0, import_react2.useCallback)(function (rowIndex) {
-    if (readOnly || data.length <= minRows) return;
+    if (readOnly || disabled || data.length <= minRows) return;
     if (!isFormMode && onDataChange) {
       onDataChange(data.filter(function (_, idx) {
         return idx !== rowIndex;
       }));
     }
-  }, [readOnly, minRows, data, isFormMode, onDataChange]);
+  }, [readOnly, disabled, 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)(NativeCellContent, {
+        cellDef: columnDef.cell,
+        ctx: cell.getContext(),
+        fontSize: knobProps.sizeToken
+      });
     }
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableCell.DataTableCell, {
       value,
@@ -290,11 +324,13 @@ function DataTableRoot(param) {
         return handleCellChange(rowIndex, columnId, newValue);
       },
       readOnly,
+      disabled,
       columnId,
+      columnLabel: typeof columnDef.header === "string" ? columnDef.header : void 0,
       rowIndex,
       rowData
     });
-  }, [handleCellChange, readOnly]);
+  }, [handleCellChange, readOnly, disabled, knobProps.sizeToken]);
   var renderRowContent = (0, import_react2.useCallback)(function (row, rowIndex) {
     var rowData = row.original;
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
@@ -313,16 +349,26 @@ function DataTableRoot(param) {
         cellLocation: showRowNumbers ? "middle" : "first",
         children: row.getCanExpand() ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           onPress: function onPress() {
-            return row.toggleExpanded();
+            if (disabled) return;
+            row.toggleExpanded();
           },
-          cursor: "pointer",
+          cursor: disabled ? "not-allowed" : "pointer",
+          "aria-disabled": disabled || void 0,
           padding: "$1",
           "aria-expanded": row.getIsExpanded(),
-          "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretRightIcon, {
+          "aria-label": row.getIsExpanded() ? (0, import_withInterp.withInterp)(t("Collapse row {{row}}", {
+            row: rowIndex + 1
+          }), {
+            row: rowIndex + 1
+          }) : (0, import_withInterp.withInterp)(t("Expand row {{row}}", {
+            row: rowIndex + 1
+          }), {
+            row: rowIndex + 1
+          }),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ExpandCaretIcon, {
             size: 14,
             style: {
-              transform: row.getIsExpanded() ? "rotate(90deg)" : "none"
+              transform: row.getIsExpanded() ? expandedCaretRotation : "none"
             }
           })
         }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -348,24 +394,36 @@ function DataTableRoot(param) {
           chromeless: true,
           circular: true,
           icon: import_react.TrashIcon,
-          disabled: data.length <= minRows,
+          disabled: disabled || data.length <= minRows,
           onPress: function onPress() {
             return handleDeleteRow(rowIndex);
           },
-          "aria-label": t("Delete row")
+          "aria-label": (0, import_withInterp.withInterp)(t("Delete row {{row}}", {
+            row: rowIndex + 1
+          }), {
+            row: rowIndex + 1
+          })
         })
       })]
     });
-  }, [showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, cellHeight, knobProps.sizeToken, getColSizeProps, renderCellContent, handleDeleteRow, data.length, minRows, t]);
+  }, [showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, disabled, cellHeight, knobProps.sizeToken, getColSizeProps, renderCellContent, handleDeleteRow, data.length, minRows, t, ExpandCaretIcon, expandedCaretRotation]);
+  var tableZebraOn = knobProps.tableZebra === "on";
   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",
+      backgroundColor: tableZebraOn && index % 2 === 1 ? "$color2" : "$color1",
       rowLocation: "middle",
       "aria-rowindex": index + 1,
-      "aria-label": `Row ${index + 1}`,
+      "aria-label": (0, import_withInterp.withInterp)(t("Row {{row}}", {
+        row: index + 1
+      }), {
+        row: index + 1
+      }),
+      ...{
+        "data-table-zebra": tableZebraOn ? index % 2 === 0 ? "even" : "odd" : "off"
+      },
       children: renderRowContent(row, index)
     }, `${row.id}-${index}`);
-  }, [renderRowContent]);
+  }, [renderRowContent, tableZebraOn, t]);
   var renderMobileCard = (0, import_react2.useCallback)(function (row, index, onDelete) {
     var rowData = row.original;
     var visibleCells = row.getVisibleCells();
@@ -380,7 +438,7 @@ function DataTableRoot(param) {
         flexDirection: "row",
         justifyContent: "space-between",
         paddingBottom: "$2",
-        borderBottomWidth: 1,
+        ...import_theme.hairline.bottom,
         borderBottomColor: "$borderColor",
         marginBottom: "$2",
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
@@ -393,11 +451,15 @@ function DataTableRoot(param) {
           circular: true,
           size: "$2",
           icon: import_react.TrashIcon,
-          disabled: tableRows.length <= minRows,
+          disabled: disabled || tableRows.length <= minRows,
           onPress: function onPress() {
             return onDelete === null || onDelete === void 0 ? void 0 : onDelete(index);
           },
-          "aria-label": t("Delete row")
+          "aria-label": (0, import_withInterp.withInterp)(t("Delete row {{row}}", {
+            row: index + 1
+          }), {
+            row: index + 1
+          })
         })]
       }), visibleCells.map(function (cell) {
         var columnDef = cell.column.columnDef;
@@ -427,15 +489,19 @@ function DataTableRoot(param) {
           circular: true,
           size: "$2",
           icon: import_react.TrashIcon,
-          disabled: tableRows.length <= minRows,
+          disabled: disabled || tableRows.length <= minRows,
           onPress: function onPress() {
             return onDelete === null || onDelete === void 0 ? void 0 : onDelete(index);
           },
-          "aria-label": t("Delete row")
+          "aria-label": (0, import_withInterp.withInterp)(t("Delete row {{row}}", {
+            row: index + 1
+          }), {
+            row: index + 1
+          })
         })
       })]
     }, `${row.id}-${index}`);
-  }, [showRowNumbers, showDeleteRow, readOnly, tableRows.length, minRows, renderCellContent, t]);
+  }, [showRowNumbers, showDeleteRow, readOnly, disabled, tableRows.length, minRows, renderCellContent, t]);
   var renderToolbarComponent = function renderToolbarComponent2() {
     if (renderToolbar) {
       return renderToolbar({
@@ -462,17 +528,18 @@ function DataTableRoot(param) {
     });
   };
   var renderPaginationComponent = function renderPaginationComponent2() {
+    var resolvedPageSizeOptions = pageSizeOptions !== null && pageSizeOptions !== void 0 ? pageSizeOptions : [...import_paginationDefaults.DEFAULT_PAGE_SIZE_OPTIONS];
     if (renderPagination) {
       return renderPagination({
         pagination: state.pagination,
         onPaginationChange: actions.setPagination,
-        pageSizeOptions: [10, 20, 50, 100]
+        pageSizeOptions: resolvedPageSizeOptions
       });
     }
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTablePagination.DataTablePagination, {
       pagination: state.pagination,
       onPaginationChange: actions.setPagination,
-      pageSizeOptions: [10, 20, 50, 100],
+      pageSizeOptions: resolvedPageSizeOptions,
       showInfo: !sm
     });
   };
@@ -486,7 +553,7 @@ function DataTableRoot(param) {
   }, [table, state, actions, computed]);
   var renderTableInner = (0, import_react2.useCallback)(function (tableData, setTableData) {
     var effectiveHandleAddRow = function effectiveHandleAddRow2() {
-      if (readOnly || maxRows && tableData.length >= maxRows) return;
+      if (readOnly || disabled || maxRows && tableData.length >= maxRows) return;
       var newRow = {
         ...defaultRow,
         idx: tableData.length + 1
@@ -494,11 +561,28 @@ function DataTableRoot(param) {
       setTableData === null || setTableData === void 0 ? void 0 : setTableData([...tableData, newRow]);
     };
     var effectiveHandleDeleteRow = function effectiveHandleDeleteRow2(rowIndex) {
-      if (readOnly || tableData.length <= minRows) return;
+      if (readOnly || disabled || tableData.length <= minRows) return;
       setTableData === null || setTableData === void 0 ? void 0 : setTableData(tableData.filter(function (_, idx) {
         return idx !== rowIndex;
       }));
     };
+    if (state.error) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
+        error: state.error,
+        onRetry,
+        layout: "table",
+        errorTitle: t("Couldn't load table"),
+        compact: true,
+        "aria-label": ariaLabel || "Data table"
+      });
+    }
+    if (state.isLoading && tableRows.length === 0) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
+        loading: true,
+        layout: "table",
+        "aria-label": ariaLabel || "Data table"
+      });
+    }
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableContext.DataTableContext.Provider, {
       size: resolvedSize,
       compact: isCompact,
@@ -512,8 +596,22 @@ function DataTableRoot(param) {
           "aria-live": "polite",
           "aria-atomic": "false",
           ...knobProps.borderRadius,
+          // UX-011 / Axiom 6 HONEST STATE: `disabled` makes the whole
+          // assembly inert (pointerEvents none blocks every touch) and
+          // says so (aria-disabled). LC-40 assembly fragment carries the
+          // dimWhole visual; keepLabel washes per-control chrome (cells,
+          // buttons receive their own `disabled`).
+          "aria-disabled": disabled || void 0,
+          ...(disabled ? {
+            ...disabledState.assemblyKnobProps,
+            pointerEvents: "none"
+          } : {}),
           ...props,
-          children: [(enableGlobalSearch || enableFiltering || enableViews) && renderToolbarComponent(), children, renderFilters === null || renderFilters === void 0 ? void 0 : renderFilters({
+          children: [(enableGlobalSearch || enableFiltering || enableViews) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: renderToolbarComponent()
+          }), children, renderFilters === null || renderFilters === void 0 ? void 0 : renderFilters({
             filters: state.filters || [],
             onFiltersChange: actions.setFilters,
             onAddFilter: actions.addFilter,
@@ -526,24 +624,22 @@ function DataTableRoot(param) {
                 type: mapFieldToFilterType(col.field)
               };
             })
-          }), !sm ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+          }), showCards ? /* @__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",
+            children: [tableRows.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+              compact: true,
               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")
-              })
+              title: computed.hasActiveFilters ? t("No results found") : t("No data available")
             }) : tableRows.map(function (row, index) {
               return renderMobileCard(row, index, isFormMode ? effectiveHandleDeleteRow : handleDeleteRow);
-            }), enablePagination && renderPaginationComponent()]
+            }), enablePagination && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: renderPaginationComponent()
+            })]
           }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
             horizontal: true,
             maxWidth: "100%",
@@ -600,8 +696,8 @@ function DataTableRoot(param) {
                         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",
+                          onPress: isSortableHeader && !disabled ? header.column.getToggleSortingHandler() : void 0,
+                          cursor: disabled ? "not-allowed" : isSortableHeader ? "pointer" : "default",
                           position: "relative",
                           "aria-sort": isSortableHeader ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
                           ...getColSizeProps(header.column, isLastHeader),
@@ -630,16 +726,16 @@ function DataTableRoot(param) {
                               }), sortDirection === false && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
                                 size: 14
                               })]
-                            }), pinning && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+                            }), pinning && /* @__PURE__ */(0, import_jsx_runtime.jsx)(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"
-                              })]
+                              children: (
+                              /* One compact cycle control (left →
+                              right → unpin) mirrors web. */
+                              /* @__PURE__ */
+                              (0, import_jsx_runtime.jsx)(pinning.PinButton, {
+                                columnId: header.column.id
+                              }))
                             })]
                           })
                         }, header.id);
@@ -654,16 +750,10 @@ function DataTableRoot(param) {
                   "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",
+                      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+                        compact: true,
                         "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")
-                        })
+                        title: computed.hasActiveFilters ? t("No results found") : t("No data available")
                       })
                     })
                   }) : isVirtualized ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -706,7 +796,10 @@ function DataTableRoot(param) {
                     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())
+                          children: header.isPlaceholder ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeCellContent, {
+                            cellDef: header.column.columnDef.footer,
+                            ctx: header.getContext()
+                          })
                         }, header.id);
                       })
                     }, footerGroup.id);
@@ -717,12 +810,16 @@ function DataTableRoot(param) {
           }), 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,
+              disabled: 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, {
+          }), !showCards && enablePagination && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: renderPaginationComponent()
+          }), state.isLoading && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
             position: "absolute",
             top: 0,
             left: 0,
@@ -743,7 +840,7 @@ function DataTableRoot(param) {
         })
       })
     });
-  }, [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]);
+  }, [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, showCards, renderPaginationComponent, showAddRow, maxRows, isFormMode, handleAddRow, handleDeleteRow, minRows, defaultRow, disabled, disabledState, t]);
   if (isFormMode) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Field, {
       form: resolvedForm,
@@ -766,6 +863,7 @@ var DataTable = (0, import_tamagui.withStaticProperties)(DataTableRoot, {
   Filters: import_DataTableFilters.DataTableFilters,
   Pagination: import_DataTablePagination.DataTablePagination,
   BulkActions: import_DataTableBulkActions.DataTableBulkActions,
+  SelectionToolbar: import_DataTableBulkActions.DataTableBulkActions,
   Export: import_DataTableExport.DataTableExport,
   Search: import_DataTableSearch.DataTableSearch,
   ViewOptions: import_DataTableViewOptions.DataTableViewOptions,