@multiplatform.one/table 6.1.0 → 6.4.0

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

@@ -1,13 +1,16 @@
 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 { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpDownIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
 import { FlashList } from "@shopify/flash-list";
+import { AsyncBoundary, EmptyState, useDirection } from "@multiplatform.one/components";
 import { Button, Field, useFormField, zIndex } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { hairline, 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 { DEFAULT_PAGE_SIZE_OPTIONS } from "../../utils/paginationDefaults.native.js";
+import { withInterp } from "../../utils/withInterp.native.js";
 import { DataTableColumnPinning } from "../DataTableColumnPinning/index.native.js";
 import { DataTablePagination } from "../DataTablePagination/index.native.js";
 import { DataTableToolbar } from "../DataTableToolbar/index.native.js";
@@ -23,6 +26,23 @@ 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 NativeCellContent(param) {
+  var {
+    cellDef,
+    ctx,
+    fontSize
+  } = param;
+  var rendered = typeof cellDef === "function" ? cellDef(ctx) : cellDef;
+  if (typeof rendered === "string" || typeof rendered === "number") {
+    return /* @__PURE__ */_jsx(Text, {
+      ...(fontSize ? {
+        fontSize
+      } : {}),
+      children: String(rendered)
+    });
+  }
+  return rendered !== null && rendered !== void 0 ? rendered : null;
+}
 function mapFieldToFilterType(field) {
   switch (field) {
     case "stepper":
@@ -56,6 +76,7 @@ function DataTableRoot(param) {
     columns,
     initialState,
     onStateChange,
+    onRetry,
     syncWithUrl = false,
     urlDebounceMs = 500,
     urlStrategy,
@@ -65,11 +86,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,
@@ -97,6 +120,7 @@ function DataTableRoot(param) {
     className: _className,
     size,
     compact = false,
+    disabled = false,
     children,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
@@ -108,13 +132,18 @@ function DataTableRoot(param) {
   var {
     sm
   } = useMedia();
+  var showCards = layout === "cards" || layout === "auto" && !sm;
   var {
-    knobProps
+    knobProps,
+    disabledState
   } = useResolvedKnobs({
     intent: void 0,
     component: "DataTable",
     compact
   });
+  var isRTL = useDirection() === "rtl";
+  var ExpandCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
+  var expandedCaretRotation = isRTL ? "rotate(-90deg)" : "rotate(90deg)";
   var {
     resolvedForm
   } = useFormField({
@@ -187,19 +216,20 @@ function DataTableRoot(param) {
     };
   }, [enableColumnResizing]);
   var isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0;
-  var pinning = useMemo(function () {
-    return enableColumnPinning ? DataTableColumnPinning({
-      table,
-      maxPinnedColumns,
-      allowPinning: true
-    }) : null;
-  }, [enableColumnPinning, table, maxPinnedColumns]);
+  var pinningHelpers = 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 = 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;
@@ -212,9 +242,9 @@ function DataTableRoot(param) {
       };
       onDataChange(newData);
     }
-  }, [readOnly, data, onCellChange, isFormMode, onDataChange]);
+  }, [readOnly, disabled, data, onCellChange, isFormMode, onDataChange]);
   var handleAddRow = useCallback(function () {
-    if (readOnly || maxRows && data.length >= maxRows) return;
+    if (readOnly || disabled || maxRows && data.length >= maxRows) return;
     var newRow = {
       ...defaultRow,
       idx: data.length + 1
@@ -222,22 +252,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 = 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 = 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(NativeCellContent, {
+        cellDef: columnDef.cell,
+        ctx: cell.getContext(),
+        fontSize: knobProps.sizeToken
+      });
     }
     return /* @__PURE__ */_jsx(DataTableCell, {
       value,
@@ -247,11 +281,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 = useCallback(function (row, rowIndex) {
     var rowData = row.original;
     return /* @__PURE__ */_jsxs(_Fragment, {
@@ -270,16 +306,26 @@ function DataTableRoot(param) {
         cellLocation: showRowNumbers ? "middle" : "first",
         children: row.getCanExpand() ? /* @__PURE__ */_jsx(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__ */_jsx(CaretRightIcon, {
+          "aria-label": row.getIsExpanded() ? withInterp(t("Collapse row {{row}}", {
+            row: rowIndex + 1
+          }), {
+            row: rowIndex + 1
+          }) : withInterp(t("Expand row {{row}}", {
+            row: rowIndex + 1
+          }), {
+            row: rowIndex + 1
+          }),
+          children: /* @__PURE__ */_jsx(ExpandCaretIcon, {
             size: 14,
             style: {
-              transform: row.getIsExpanded() ? "rotate(90deg)" : "none"
+              transform: row.getIsExpanded() ? expandedCaretRotation : "none"
             }
           })
         }) : /* @__PURE__ */_jsx(View, {
@@ -305,24 +351,36 @@ function DataTableRoot(param) {
           chromeless: true,
           circular: true,
           icon: TrashIcon,
-          disabled: data.length <= minRows,
+          disabled: disabled || data.length <= minRows,
           onPress: function onPress() {
             return handleDeleteRow(rowIndex);
           },
-          "aria-label": t("Delete row")
+          "aria-label": 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 = useCallback(function (row, index) {
     return /* @__PURE__ */_jsx(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": 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 = useCallback(function (row, index, onDelete) {
     var rowData = row.original;
     var visibleCells = row.getVisibleCells();
@@ -337,7 +395,7 @@ function DataTableRoot(param) {
         flexDirection: "row",
         justifyContent: "space-between",
         paddingBottom: "$2",
-        borderBottomWidth: 1,
+        ...hairline.bottom,
         borderBottomColor: "$borderColor",
         marginBottom: "$2",
         children: [/* @__PURE__ */_jsxs(Text, {
@@ -350,11 +408,15 @@ function DataTableRoot(param) {
           circular: true,
           size: "$2",
           icon: 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": withInterp(t("Delete row {{row}}", {
+            row: index + 1
+          }), {
+            row: index + 1
+          })
         })]
       }), visibleCells.map(function (cell) {
         var columnDef = cell.column.columnDef;
@@ -384,15 +446,19 @@ function DataTableRoot(param) {
           circular: true,
           size: "$2",
           icon: 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": 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({
@@ -419,17 +485,18 @@ function DataTableRoot(param) {
     });
   };
   var renderPaginationComponent = function renderPaginationComponent2() {
+    var resolvedPageSizeOptions = pageSizeOptions !== null && pageSizeOptions !== void 0 ? pageSizeOptions : [...DEFAULT_PAGE_SIZE_OPTIONS];
     if (renderPagination) {
       return renderPagination({
         pagination: state.pagination,
         onPaginationChange: actions.setPagination,
-        pageSizeOptions: [10, 20, 50, 100]
+        pageSizeOptions: resolvedPageSizeOptions
       });
     }
     return /* @__PURE__ */_jsx(DataTablePagination, {
       pagination: state.pagination,
       onPaginationChange: actions.setPagination,
-      pageSizeOptions: [10, 20, 50, 100],
+      pageSizeOptions: resolvedPageSizeOptions,
       showInfo: !sm
     });
   };
@@ -443,7 +510,7 @@ function DataTableRoot(param) {
   }, [table, state, actions, computed]);
   var renderTableInner = 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
@@ -451,11 +518,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__ */_jsx(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__ */_jsx(AsyncBoundary, {
+        loading: true,
+        layout: "table",
+        "aria-label": ariaLabel || "Data table"
+      });
+    }
     return /* @__PURE__ */_jsx(DataTableContext.Provider, {
       size: resolvedSize,
       compact: isCompact,
@@ -469,8 +553,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__ */_jsx(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,
@@ -483,24 +581,22 @@ function DataTableRoot(param) {
                 type: mapFieldToFilterType(col.field)
               };
             })
-          }), !sm ? /* @__PURE__ */_jsxs(View, {
+          }), showCards ? /* @__PURE__ */_jsxs(View, {
             flexDirection: "column",
             gap: "$2",
-            children: [tableRows.length === 0 ? /* @__PURE__ */_jsx(View, {
-              padding: "$8",
-              alignItems: "center",
-              justifyContent: "center",
+            children: [tableRows.length === 0 ? /* @__PURE__ */_jsx(EmptyState, {
+              compact: true,
               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")
-              })
+              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__ */_jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: renderPaginationComponent()
+            })]
           }) : /* @__PURE__ */_jsx(ScrollView, {
             horizontal: true,
             maxWidth: "100%",
@@ -557,8 +653,8 @@ function DataTableRoot(param) {
                         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",
+                          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),
@@ -587,16 +683,16 @@ function DataTableRoot(param) {
                               }), sortDirection === false && /* @__PURE__ */_jsx(CaretUpDownIcon, {
                                 size: 14
                               })]
-                            }), pinning && /* @__PURE__ */_jsxs(View, {
+                            }), pinning && /* @__PURE__ */_jsx(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"
-                              })]
+                              children: (
+                              /* One compact cycle control (left →
+                              right → unpin) mirrors web. */
+                              /* @__PURE__ */
+                              _jsx(pinning.PinButton, {
+                                columnId: header.column.id
+                              }))
                             })]
                           })
                         }, header.id);
@@ -611,16 +707,10 @@ function DataTableRoot(param) {
                   "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",
+                      children: /* @__PURE__ */_jsx(EmptyState, {
+                        compact: true,
                         "aria-live": "polite",
-                        children: /* @__PURE__ */_jsx(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__ */_jsx(View, {
@@ -663,7 +753,10 @@ function DataTableRoot(param) {
                     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())
+                          children: header.isPlaceholder ? null : /* @__PURE__ */_jsx(NativeCellContent, {
+                            cellDef: header.column.columnDef.footer,
+                            ctx: header.getContext()
+                          })
                         }, header.id);
                       })
                     }, footerGroup.id);
@@ -674,12 +767,16 @@ function DataTableRoot(param) {
           }), showAddRow && !readOnly && /* @__PURE__ */_jsx(View, {
             children: /* @__PURE__ */_jsx(Button, {
               icon: 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__ */_jsx(View, {
+          }), !showCards && enablePagination && /* @__PURE__ */_jsx(View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: renderPaginationComponent()
+          }), state.isLoading && /* @__PURE__ */_jsx(View, {
             position: "absolute",
             top: 0,
             left: 0,
@@ -700,7 +797,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__ */_jsx(Field, {
       form: resolvedForm,
@@ -723,6 +820,7 @@ var DataTable = withStaticProperties(DataTableRoot, {
   Filters: DataTableFilters,
   Pagination: DataTablePagination,
   BulkActions: DataTableBulkActions,
+  SelectionToolbar: DataTableBulkActions,
   Export: DataTableExport,
   Search: DataTableSearch,
   ViewOptions: DataTableViewOptions,