@multiplatform.one/table 6.0.0

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

@@ -0,0 +1,732 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CaretDownIcon, CaretRightIcon, CaretUpDownIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { FlashList } from "@shopify/flash-list";
+import { Button, Field, useFormField, zIndex } from "@multiplatform.one/forms";
+import { flexRender } from "@tanstack/react-table";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useRef, useMemo, useCallback } from "react";
+import { ScrollView, Spinner, Text, View, useMedia, withStaticProperties } from "tamagui";
+import { useTranslation } from "react-i18next";
+import { useDataTable } from "../../hooks/useDataTable.native.js";
+import { DataTableColumnPinning } from "../DataTableColumnPinning/index.native.js";
+import { DataTablePagination } from "../DataTablePagination/index.native.js";
+import { DataTableToolbar } from "../DataTableToolbar/index.native.js";
+import { DataTableFilters } from "../DataTableFilters/index.native.js";
+import { DataTableBulkActions } from "../DataTableBulkActions/index.native.js";
+import { DataTableExport } from "../DataTableExport/index.native.js";
+import { DataTableSearch } from "../DataTableSearch/index.native.js";
+import { DataTableViewOptions } from "../DataTableViewOptions/index.native.js";
+import { DataTableGrouping } from "../DataTableGrouping/index.native.js";
+import { DataTableCell } from "../DataTableCell/index.native.js";
+import { Table } from "@multiplatform.one/table-primitives";
+import { DataTableContext } from "./DataTableContext.native.js";
+import { DataTableStateContext } from "./DataTableStateContext.native.js";
+import { DataTableContext as DataTableContext2 } from "./DataTableContext.native.js";
+import { DataTableStateContext as DataTableStateContext2, useDataTableState } from "./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
+  } = 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,
+    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 = useRef(null);
+  var getColSizeProps = 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 = useMemo(function () {
+    return enableColumnPinning ? 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 = 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 = cell.column.columnDef;
+    var columnId = cell.column.id;
+    var value = cell.getValue();
+    if (columnDef.cell && !columnDef.field) {
+      return flexRender(columnDef.cell, cell.getContext());
+    }
+    return /* @__PURE__ */_jsx(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 = useCallback(function (row, rowIndex) {
+    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,
+        cellHeight,
+        cellLocation: showRowNumbers ? "middle" : "first",
+        children: 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",
+          children: /* @__PURE__ */_jsx(CaretRightIcon, {
+            size: 14,
+            style: {
+              transform: row.getIsExpanded() ? "rotate(90deg)" : "none"
+            }
+          })
+        }) : /* @__PURE__ */_jsx(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__ */_jsx(Table.Cell, {
+          ...getColSizeProps(cell.column, isLastDataCell),
+          cellHeight,
+          cellLocation,
+          minWidth: 0,
+          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, getColSizeProps, renderCellContent, handleDeleteRow, data.length, minRows, t]);
+  var renderRow = useCallback(function (row, index) {
+    return /* @__PURE__ */_jsx(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 = useCallback(function (row, index, onDelete) {
+    var rowData = row.original;
+    var visibleCells = row.getVisibleCells();
+    return /* @__PURE__ */_jsxs(View, {
+      backgroundColor: "$color1",
+      borderRadius: "$4",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      padding: "$3",
+      marginBottom: "$2",
+      children: [showRowNumbers && /* @__PURE__ */_jsxs(View, {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingBottom: "$2",
+        borderBottomWidth: 1,
+        borderBottomColor: "$borderColor",
+        marginBottom: "$2",
+        children: [/* @__PURE__ */_jsxs(Text, {
+          fontSize: "$3",
+          color: "$color10",
+          fontWeight: "600",
+          children: ["#", index + 1]
+        }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Button, {
+          chromeless: true,
+          circular: true,
+          size: "$2",
+          icon: 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__ */_jsxs(View, {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingVertical: "$1.5",
+          gap: "$2",
+          children: [/* @__PURE__ */_jsx(Text, {
+            fontSize: "$3",
+            color: "$color10",
+            fontWeight: "500",
+            width: "40%",
+            flexShrink: 0,
+            children: headerLabel
+          }), /* @__PURE__ */_jsx(View, {
+            flex: 1,
+            children: renderCellContent(cell, index, rowData)
+          })]
+        }, cell.id);
+      }), !showRowNumbers && showDeleteRow && !readOnly && /* @__PURE__ */_jsx(View, {
+        paddingTop: "$2",
+        alignItems: "flex-end",
+        children: /* @__PURE__ */_jsx(Button, {
+          chromeless: true,
+          circular: true,
+          size: "$2",
+          icon: 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__ */_jsx(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__ */_jsx(DataTablePagination, {
+      pagination: state.pagination,
+      onPaginationChange: actions.setPagination,
+      pageSizeOptions: [10, 20, 50, 100],
+      showInfo: !sm
+    });
+  };
+  var stateContextValue = useMemo(function () {
+    return {
+      table,
+      state,
+      actions,
+      computed
+    };
+  }, [table, state, actions, computed]);
+  var renderTableInner = 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__ */_jsx(DataTableContext.Provider, {
+      size: resolvedSize,
+      compact: isCompact,
+      children: /* @__PURE__ */_jsx(DataTableStateContext.Provider, {
+        value: stateContextValue,
+        children: /* @__PURE__ */_jsxs(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__ */_jsxs(View, {
+            flexDirection: "column",
+            gap: "$2",
+            children: [tableRows.length === 0 ? /* @__PURE__ */_jsx(View, {
+              padding: "$8",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "$color1",
+              borderRadius: "$4",
+              "aria-live": "polite",
+              children: /* @__PURE__ */_jsx(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__ */_jsx(ScrollView, {
+            horizontal: true,
+            maxWidth: "100%",
+            children: /* @__PURE__ */_jsx(View, {
+              flex: 1,
+              flexDirection: "column",
+              width: "100%",
+              "aria-label": `${ariaLabel || "Data table"} content`,
+              children: /* @__PURE__ */_jsxs(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__ */_jsx(Table.Head, {
+                  zIndex: "$1",
+                  "aria-label": "Table headers",
+                  children: headerGroups.map(function (headerGroup, groupIndex) {
+                    return /* @__PURE__ */_jsxs(Table.Row, {
+                      backgroundColor: "$color2",
+                      rowLocation: groupIndex === 0 ? "first" : "middle",
+                      borderTopRightRadius: "$4",
+                      borderTopLeftRadius: "$4",
+                      borderBottomLeftRadius: "$0",
+                      borderBottomRightRadius: "$0",
+                      "aria-rowindex": groupIndex,
+                      children: [showRowNumbers && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                        cellWidth: 50,
+                        cellHeight,
+                        children: /* @__PURE__ */_jsx(Text, {
+                          fontSize: "$4",
+                          fontWeight: "600",
+                          children: "#"
+                        })
+                      }), enableRowExpansion && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                        cellWidth: 32,
+                        cellHeight,
+                        children: /* @__PURE__ */_jsx(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__ */_jsx(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__ */_jsxs(View, {
+                            flexDirection: "row",
+                            gap: "$2",
+                            alignItems: "center",
+                            justifyContent: "flex-start",
+                            flex: 1,
+                            children: [/* @__PURE__ */_jsx(Text, {
+                              fontSize: "$4",
+                              selectable: false,
+                              userSelect: "none",
+                              children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                            }), isSortableHeader && /* @__PURE__ */_jsxs(Text, {
+                              "aria-hidden": true,
+                              role: "presentation",
+                              color: sortDirection ? "$color10" : "$color8",
+                              children: [sortDirection === "asc" && /* @__PURE__ */_jsx(CaretDownIcon, {
+                                size: 14
+                              }), sortDirection === "desc" && /* @__PURE__ */_jsx(CaretDownIcon, {
+                                size: 14,
+                                style: {
+                                  transform: "rotate(180deg)"
+                                }
+                              }), sortDirection === false && /* @__PURE__ */_jsx(CaretUpDownIcon, {
+                                size: 14
+                              })]
+                            }), pinning && /* @__PURE__ */_jsxs(View, {
+                              flexDirection: "row",
+                              gap: "$1",
+                              children: [/* @__PURE__ */_jsx(pinning.PinButton, {
+                                columnId: header.column.id,
+                                position: "left"
+                              }), /* @__PURE__ */_jsx(pinning.PinButton, {
+                                columnId: header.column.id,
+                                position: "right"
+                              })]
+                            })]
+                          })
+                        }, header.id);
+                      }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                        cellWidth: 60,
+                        cellHeight,
+                        cellLocation: "last"
+                      })]
+                    }, headerGroup.id);
+                  })
+                }), /* @__PURE__ */_jsx(Table.Body, {
+                  "aria-label": "Table data",
+                  children: tableRows.length === 0 ? /* @__PURE__ */_jsx(Table.Row, {
+                    children: /* @__PURE__ */_jsx(Table.Cell, {
+                      children: /* @__PURE__ */_jsx(View, {
+                        padding: "$8",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        "aria-live": "polite",
+                        children: /* @__PURE__ */_jsx(Text, {
+                          color: "$color10",
+                          fontSize: "$4",
+                          children: computed.hasActiveFilters ? t("No results found") : t("No data available")
+                        })
+                      })
+                    })
+                  }) : isVirtualized ? /* @__PURE__ */_jsx(View, {
+                    style: {
+                      height: virtualizationHeight
+                    },
+                    children: /* @__PURE__ */_jsx(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__ */_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);
+                  })
+                }), footerGroups.length > 0 && /* @__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);
+                  })
+                })]
+              })
+            })
+          }), showAddRow && !readOnly && /* @__PURE__ */_jsx(View, {
+            children: /* @__PURE__ */_jsx(Button, {
+              icon: 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__ */_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"
+            })
+          })]
+        })
+      })
+    });
+  }, [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__ */_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 renderTableInner(formData, setFormData);
+      }
+    });
+  }
+  return renderTableInner(data, onDataChange);
+}
+var DataTable = withStaticProperties(DataTableRoot, {
+  Toolbar: DataTableToolbar,
+  Filters: DataTableFilters,
+  Pagination: DataTablePagination,
+  BulkActions: DataTableBulkActions,
+  Export: DataTableExport,
+  Search: DataTableSearch,
+  ViewOptions: DataTableViewOptions,
+  Grouping: DataTableGrouping
+});
+export { DataTable, DataTableContext2 as DataTableContext, DataTableStateContext2 as DataTableStateContext, useDataTableState };
+//# sourceMappingURL=index.native.js.map