@okta/odyssey-react-mui 1.6.20 → 1.6.21

package/dist/labs/DataTable.js

@@ -0,0 +1,366 @@
+import _Checkbox from "@mui/material/Checkbox";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useMaterialReactTable, MRT_TableContainer } from "material-react-table";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ArrowTopIcon, ArrowBottomIcon, ArrowDownIcon, ArrowUpIcon, DragIndicatorIcon, ListIcon, ShowIcon, MoreIcon } from "../icons.generated/index.js";
+import { DataTablePagination } from "./DataTablePagination.js";
+import { DataFilters } from "./DataFilters.js";
+import { Box } from "../Box.js";
+import { MenuButton, MenuItem } from "../index.js";
+import { ArrowUnsortedIcon } from "../icons.generated/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const densityValues = ["comfortable", "spacious", "compact"];
+const DataTable = _ref => {
+  let {
+    columns,
+    data: dataProp,
+    getRowId,
+    page: pageProp = 1,
+    initialDensity = densityValues[0],
+    resultsPerPage: resultsPerPageProp = 20,
+    fetchDataFn,
+    reorderDataFn,
+    totalRows,
+    hasSearchSubmitButton,
+    paginationType = "paged",
+    onRowSelectionChange,
+    rowActionButtons,
+    rowActionMenuItems,
+    hasChangeableDensity,
+    hasColumnResizing,
+    hasColumnVisibility,
+    hasFilters,
+    hasPagination,
+    hasRowReordering,
+    hasRowSelection,
+    hasSearch,
+    hasSorting
+  } = _ref;
+  const [draggingRow, setDraggingRow] = useState();
+  const [showSkeletons, setShowSkeletons] = useState(true);
+  const [data, setData] = useState(dataProp);
+  const [page, setPage] = useState(pageProp);
+  const [resultsPerPage, setResultsPerPage] = useState(resultsPerPageProp);
+  const [rowSelection, setRowSelection] = useState({});
+  const [sorting, setSorting] = useState([]);
+  const [density, setDensity] = useState(initialDensity);
+  const initialColumnVisibility = useMemo(() => {
+    return columns.reduce((acc, column) => {
+      acc[column.accessorKey] = true;
+      return acc;
+    }, {});
+  }, [columns]);
+  const [columnVisibility, setColumnVisibility] = useState(initialColumnVisibility);
+  const [globalFilter, setGlobalFilter] = useState("");
+  const [filters, setFilters] = useState();
+  const refreshData = useCallback(async () => {
+    setShowSkeletons(true);
+    try {
+      const newData = await fetchDataFn({
+        page: page,
+        resultsPerPage: resultsPerPage,
+        sort: sorting,
+        search: globalFilter,
+        filters: filters
+      });
+      setData(newData);
+      setShowSkeletons(false);
+    } catch (error) {
+      console.log(error);
+      setShowSkeletons(false);
+    }
+  }, [page, resultsPerPage, sorting, globalFilter, filters, fetchDataFn]);
+  const handleSortingChange = useCallback(updater => {
+    setSorting(prevSorting => updater instanceof Function ? updater(prevSorting) : sorting);
+  }, [sorting]);
+  const handleColumnVisibility = useCallback(columnId => {
+    setColumnVisibility(prevVisibility => ({
+      ...prevVisibility,
+      [columnId]: !columnVisibility[columnId]
+    }));
+  }, [columnVisibility]);
+  const handleSearch = useCallback(value => {
+    setGlobalFilter(value);
+  }, []);
+  const handleFilters = useCallback(updatedFilters => {
+    setFilters(updatedFilters);
+  }, []);
+  const handleRowSelectionChange = useCallback(updater => {
+    setRowSelection(prevRowSelection => updater instanceof Function ? updater(prevRowSelection) : rowSelection);
+  }, [rowSelection]);
+  const handleReordering = useCallback(_ref2 => {
+    let {
+      rowId,
+      newIndex
+    } = _ref2;
+    if (newIndex < 0) {
+      return;
+    }
+    if (totalRows && newIndex > totalRows) {
+      return;
+    }
+    reorderDataFn?.({
+      rowId,
+      newIndex
+    });
+    refreshData();
+  }, [totalRows, reorderDataFn, refreshData]);
+  useEffect(() => {
+    setShowSkeletons(false);
+  }, [data]);
+  useEffect(() => {
+    refreshData();
+  }, [refreshData, page, resultsPerPage, sorting, globalFilter, filters]);
+  useEffect(() => {
+    onRowSelectionChange?.(rowSelection);
+  }, [rowSelection, onRowSelectionChange]);
+  const rowVirtualizerInstanceRef = useRef(null);
+  const table = useMaterialReactTable({
+    columns: columns,
+    data: data,
+    state: {
+      density,
+      sorting,
+      globalFilter,
+      columnVisibility,
+      rowSelection,
+      showSkeletons
+    },
+    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
+    rowVirtualizerOptions: {
+      overscan: 4
+    },
+    enableRowVirtualization: paginationType === "loadMore" || resultsPerPage > 50,
+    enableColumnResizing: hasColumnResizing,
+    enableDensityToggle: false,
+    enableFullScreenToggle: false,
+    enablePagination: false,
+    enableRowSelection: hasRowSelection,
+    enableFilters: false,
+    enableHiding: false,
+    enableRowOrdering: hasRowReordering,
+    enableRowDragging: hasRowReordering,
+    enableSorting: hasSorting,
+    selectAllMode: "all",
+    enableColumnActions: false,
+    layoutMode: "grid-no-grow",
+    displayColumnDefOptions: {
+      "mrt-row-actions": {
+        muiTableBodyCellProps: {
+          align: "right",
+          sx: {
+            overflow: "visible",
+            width: "unset"
+          }
+        },
+        muiTableHeadCellProps: {
+          align: "right",
+          sx: {
+            width: "unset"
+          }
+        }
+      },
+      "mrt-row-drag": {
+        header: "",
+        muiTableBodyCellProps: {
+          sx: {
+            minWidth: 0,
+            width: 32
+          }
+        },
+        muiTableHeadCellProps: {
+          sx: {
+            minWidth: 0,
+            width: 32
+          }
+        }
+      }
+    },
+    enableGlobalFilter: false,
+    manualFiltering: true,
+    manualSorting: true,
+    getRowId: getRowId,
+    icons: {
+      ArrowDownwardIcon: ArrowDownIcon,
+      DragHandleIcon: DragIndicatorIcon,
+      SyncAltIcon: ArrowUnsortedIcon
+    },
+    onSortingChange: handleSortingChange,
+    onRowSelectionChange: handleRowSelectionChange,
+    enableRowActions: hasRowReordering || rowActionButtons || rowActionMenuItems ? true : false,
+    positionActionsColumn: "last",
+    muiTableHeadCellProps: _ref3 => {
+      let {
+        column
+      } = _ref3;
+      return {
+        className: sorting.find(item => item.id === column.id) ? "isSorted" : "isUnsorted"
+      };
+    },
+    muiTableBodyRowProps: _ref4 => {
+      let {
+        table,
+        row
+      } = _ref4;
+      return {
+        className: draggingRow?.id === row.id && table.getState().hoveredRow?.id !== row.id ? "isDragging" : table.getState().hoveredRow?.id === row.id && draggingRow?.id !== row.id ? "isDragTarget" : draggingRow?.id === row.id && table.getState().hoveredRow?.id === row.id ? "isDragging isDragTarget" : undefined
+      };
+    },
+    muiRowDragHandleProps: {
+      tabIndex: -1,
+      onDragEnd: () => {
+        const cols = table.getAllColumns();
+        cols[0].toggleVisibility();
+        const {
+          draggingRow,
+          hoveredRow
+        } = table.getState();
+        if (draggingRow) {
+          handleReordering({
+            rowId: draggingRow.id,
+            newIndex: hoveredRow.index
+          });
+        }
+        setDraggingRow(null);
+      },
+      onDragCapture: () => {
+        if (!draggingRow && table.getState().draggingRow?.id) {
+          setDraggingRow(table.getState().draggingRow);
+        }
+      }
+    },
+    renderRowActions: _ref5 => {
+      let {
+        row
+      } = _ref5;
+      const currentIndex = row.index + (page - 1) * resultsPerPage;
+      return _jsxs(Box, {
+        sx: {
+          display: "flex"
+        },
+        children: [rowActionButtons?.(row), (rowActionMenuItems || hasRowReordering) && _jsxs(MenuButton, {
+          endIcon: _jsx(MoreIcon, {}),
+          size: "small",
+          buttonVariant: "floating",
+          ariaLabel: "More actions",
+          menuAlignment: "right",
+          children: [rowActionMenuItems && _jsxs(_Fragment, {
+            children: [rowActionMenuItems(row), _jsx("hr", {})]
+          }), _jsxs(MenuItem, {
+            isDisabled: currentIndex <= 0,
+            onClick: () => handleReordering({
+              rowId: row.id,
+              newIndex: 0
+            }),
+            children: [_jsx(ArrowTopIcon, {}), " Bring to front"]
+          }), _jsxs(MenuItem, {
+            isDisabled: currentIndex <= 0,
+            onClick: () => handleReordering({
+              rowId: row.id,
+              newIndex: currentIndex <= 0 ? 0 : currentIndex - 1
+            }),
+            children: [_jsx(ArrowUpIcon, {}), " Bring forward"]
+          }), _jsxs(MenuItem, {
+            isDisabled: totalRows ? currentIndex >= totalRows - 1 : false,
+            onClick: () => handleReordering({
+              rowId: row.id,
+              newIndex: currentIndex + 1
+            }),
+            children: [_jsx(ArrowDownIcon, {}), " Send backward"]
+          }), _jsx(_Fragment, {
+            children: totalRows && _jsxs(MenuItem, {
+              isDisabled: currentIndex >= totalRows - 1,
+              onClick: () => handleReordering({
+                rowId: row.id,
+                newIndex: totalRows
+              }),
+              children: [_jsx(ArrowBottomIcon, {}), " Send to back"]
+            })
+          })]
+        })]
+      });
+    }
+  });
+  const tableSettings = useMemo(() => _jsxs(_Fragment, {
+    children: [hasChangeableDensity && _jsx(MenuButton, {
+      endIcon: _jsx(ListIcon, {}),
+      ariaLabel: "Table density",
+      menuAlignment: "right",
+      shouldCloseOnSelect: false,
+      children: _jsx(_Fragment, {
+        children: densityValues.map(value => _jsx(MenuItem, {
+          isSelected: density === value,
+          onClick: () => setDensity(value),
+          children: `${value.charAt(0).toUpperCase()}${value.slice(1)}`
+        }, value))
+      })
+    }), hasColumnVisibility && _jsx(MenuButton, {
+      endIcon: _jsx(ShowIcon, {}),
+      ariaLabel: "Show/hide columns",
+      menuAlignment: "right",
+      shouldCloseOnSelect: false,
+      children: _jsx(_Fragment, {
+        children: columns.filter(column => column.enableHiding !== false).map(column => _jsxs(MenuItem, {
+          onClick: () => handleColumnVisibility(column.accessorKey),
+          children: [_jsx(_Checkbox, {
+            checked: columnVisibility[column.accessorKey] !== false
+          }), column.header]
+        }, column.accessorKey))
+      })
+    })]
+  }), [density, columnVisibility, columns, hasChangeableDensity]);
+  return _jsxs(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4
+    },
+    children: [_jsx(DataFilters, {
+      onChangeSearch: hasSearch ? handleSearch : undefined,
+      onChangeFilters: handleFilters,
+      hasSearchSubmitButton: hasSearchSubmitButton,
+      additionalActions: tableSettings,
+      filters: hasFilters ? columns.filter(column => column.enableColumnFilter !== false).map(column => {
+        return {
+          id: column.accessorKey,
+          label: column.header,
+          variant: column.filterVariant ?? "text",
+          options: column.filterSelectOptions
+        };
+      }) : undefined
+    }), _jsx(MRT_TableContainer, {
+      table: table
+    }), hasPagination && _jsx(DataTablePagination, {
+      paginationType: paginationType,
+      currentNumberOfResults: data.length,
+      currentPage: page,
+      isPreviousButtonDisabled: page <= 1,
+      isNextButtonDisabled: false,
+      onClickPrevious: () => setPage(page - 1),
+      onClickNext: () => {
+        if (paginationType === "loadMore") {
+          setResultsPerPage(resultsPerPage + resultsPerPageProp);
+        } else {
+          setPage(page + 1);
+        }
+      }
+    })]
+  });
+};
+const MemoizedDataTable = memo(DataTable);
+MemoizedDataTable.displayName = "DataTable";
+export { MemoizedDataTable as DataTable };
+//# sourceMappingURL=DataTable.js.map

package/dist/labs/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","names":["useMaterialReactTable","MRT_TableContainer","memo","useCallback","useEffect","useMemo","useRef","useState","ArrowTopIcon","ArrowBottomIcon","ArrowDownIcon","ArrowUpIcon","DragIndicatorIcon","ListIcon","ShowIcon","MoreIcon","DataTablePagination","DataFilters","Box","MenuButton","MenuItem","ArrowUnsortedIcon","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","densityValues","DataTable","_ref","columns","data","dataProp","getRowId","page","pageProp","initialDensity","resultsPerPage","resultsPerPageProp","fetchDataFn","reorderDataFn","totalRows","hasSearchSubmitButton","paginationType","onRowSelectionChange","rowActionButtons","rowActionMenuItems","hasChangeableDensity","hasColumnResizing","hasColumnVisibility","hasFilters","hasPagination","hasRowReordering","hasRowSelection","hasSearch","hasSorting","draggingRow","setDraggingRow","showSkeletons","setShowSkeletons","setData","setPage","setResultsPerPage","rowSelection","setRowSelection","sorting","setSorting","density","setDensity","initialColumnVisibility","reduce","acc","column","accessorKey","columnVisibility","setColumnVisibility","globalFilter","setGlobalFilter","filters","setFilters","refreshData","newData","sort","search","error","console","log","handleSortingChange","updater","prevSorting","Function","handleColumnVisibility","columnId","prevVisibility","handleSearch","value","handleFilters","updatedFilters","handleRowSelectionChange","prevRowSelection","handleReordering","_ref2","rowId","newIndex","rowVirtualizerInstanceRef","table","state","rowVirtualizerOptions","overscan","enableRowVirtualization","enableColumnResizing","enableDensityToggle","enableFullScreenToggle","enablePagination","enableRowSelection","enableFilters","enableHiding","enableRowOrdering","enableRowDragging","enableSorting","selectAllMode","enableColumnActions","layoutMode","displayColumnDefOptions","muiTableBodyCellProps","align","sx","overflow","width","muiTableHeadCellProps","header","minWidth","enableGlobalFilter","manualFiltering","manualSorting","icons","ArrowDownwardIcon","DragHandleIcon","SyncAltIcon","onSortingChange","enableRowActions","positionActionsColumn","_ref3","className","find","item","id","muiTableBodyRowProps","_ref4","row","getState","hoveredRow","undefined","muiRowDragHandleProps","tabIndex","onDragEnd","cols","getAllColumns","toggleVisibility","index","onDragCapture","renderRowActions","_ref5","currentIndex","display","children","endIcon","size","buttonVariant","ariaLabel","menuAlignment","isDisabled","onClick","tableSettings","shouldCloseOnSelect","map","isSelected","charAt","toUpperCase","slice","filter","_Checkbox","checked","flexDirection","gap","onChangeSearch","onChangeFilters","additionalActions","enableColumnFilter","label","variant","filterVariant","options","filterSelectOptions","currentNumberOfResults","length","currentPage","isPreviousButtonDisabled","isNextButtonDisabled","onClickPrevious","onClickNext","MemoizedDataTable","displayName"],"sources":["../../src/labs/DataTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  MRT_Updater,\n  MRT_Virtualizer,\n  MRT_RowData,\n  MRT_TableOptions,\n  useMaterialReactTable,\n  MRT_SortingState,\n  MRT_DensityState,\n  MRT_VisibilityState,\n  MRT_TableContainer,\n  MRT_RowSelectionState,\n  MRT_Row,\n  MRT_ColumnDef,\n} from \"material-react-table\";\nimport {\n  Fragment,\n  ReactElement,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowTopIcon,\n  ArrowBottomIcon,\n  ArrowDownIcon,\n  ArrowUpIcon,\n  DragIndicatorIcon,\n  ListIcon,\n  ShowIcon,\n  MoreIcon,\n} from \"../icons.generated\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport {\n  DataTablePagination,\n  paginationTypeValues,\n} from \"./DataTablePagination\";\nimport { DataFilter, DataFilters } from \"./DataFilters\";\nimport { Button } from \"../Button\";\nimport { Box } from \"../Box\";\nimport { MenuButton, MenuItem } from \"..\";\nimport { ArrowUnsortedIcon } from \"../icons.generated\";\n\nexport const densityValues = [\"comfortable\", \"spacious\", \"compact\"] as const;\n\nexport type {\n  MRT_ColumnFiltersState,\n  MRT_SortingState,\n  MRT_ColumnDef as TableColumn,\n} from \"material-react-table\";\n\n// The shape of the table columns,\n// with props named to match their MRT_ColumnDef counterparts\nexport type DataColumn = {\n  /**\n   * The unique ID of the column\n   */\n  accessorKey: string;\n  /**\n   * The human-friendly title of the column\n   */\n  header: string;\n  /**\n   * Customize the way each cell in the column is\n   * displayed via a custom React component.\n   */\n  Cell?: MRT_ColumnDef<MRT_RowData>[\"Cell\"];\n  /**\n   * The UI control that will be used to filter the column.\n   * Defaults to a standard text input.\n   */\n  filterVariant?: MRT_ColumnDef<MRT_RowData>[\"filterVariant\"];\n  /**\n   * If the filter control has preset options (such as a select or multi-select),\n   * these are the options provided.\n   */\n  filterSelectOptions?: Array<{ label: string; value: string }>;\n  /**\n   * The optional column width, in pixels\n   */\n  size?: number;\n  /**\n   * The minimum column width, in pixels\n   */\n  minSize?: number;\n  /**\n   * The maximum column width, in pixels\n   */\n  maxSize?: number;\n  /**\n   * If set to false, the column won't be filterable\n   */\n  enableColumnFilter?: boolean;\n  /**\n   * If set to false, the column won't be searchable\n   */\n  enableGlobalFilter?: boolean;\n  /**\n   * If set to false, the column won't be sortable\n   */\n  enableSorting?: boolean;\n  /**\n   * If set to false, the column won't be resizable\n   */\n  enableResizing?: boolean;\n  /**\n   * If set to false, the column won't be hideable\n   */\n  enableHiding?: boolean;\n};\n\nexport type DataTableProps = {\n  /**\n   * The columns that make up the table\n   */\n  columns: DataColumn[];\n  /**\n   * The data that goes into the table, which will be displayed\n   * as the table rows\n   */\n  data: MRT_TableOptions<MRT_RowData>[\"data\"];\n  /**\n   * The total number of rows in the table. Optional, because it's sometimes impossible\n   * to calculate. Used in table pagination to know when to disable the \"next\"/\"more\" button.\n   */\n  totalRows?: number;\n  /**\n   * The function to get the ID of a row\n   */\n  getRowId?: MRT_TableOptions<MRT_RowData>[\"getRowId\"];\n  /**\n   * The initial density of the table. This is available even if the table density\n   * isn't changeable.\n   */\n  initialDensity?: (typeof densityValues)[number];\n  /**\n   * If true, the end user will be able to change the table density.\n   */\n  hasChangeableDensity?: boolean;\n  /**\n   * If true, the end user can resize individual columns.\n   */\n  hasColumnResizing?: boolean;\n  /**\n   * If true, the end user will be able to show/hide columns.\n   */\n  hasColumnVisibility?: boolean;\n  /**\n   * If true, the end user will be able to filter columns.\n   */\n  hasFilters?: boolean;\n  /**\n   * If true, the table will include pagination controls.\n   */\n  hasPagination?: boolean;\n  /**\n   * If true, the table will include checkboxes on each row, enabling\n   * the user to select some or all rows.\n   */\n  hasRowSelection?: boolean;\n  /**\n   * If true, the global table search controls will be shown.\n   */\n  hasSearch?: boolean;\n  /**\n   * If true, the end user can sort columns (ascending, descending, or neither)\n   */\n  hasSorting?: boolean;\n  /**\n   * If true, the end user can reorder rows via a drag-and-drop interface\n   */\n  hasRowReordering?: boolean;\n  /**\n   * If true, the search field will include a Search button, rather than\n   * firing on input change.\n   */\n  hasSearchSubmitButton?: boolean;\n  /**\n   * Callback that fires when a row (or rows) is selected or unselected.\n   */\n  onRowSelectionChange?: (rowSelection: MRT_RowSelectionState) => void;\n  /**\n   * Callback that fires whenever the table needs to fetch new data, due to changes in\n   * page, results per page, search input, filters, or sorting\n   */\n  fetchDataFn: ({\n    page,\n    resultsPerPage,\n    search,\n    filters,\n    sort,\n  }: {\n    page?: number;\n    resultsPerPage?: number;\n    search?: string;\n    filters?: DataFilter[];\n    sort?: MRT_SortingState;\n  }) => MRT_TableOptions<MRT_RowData>[\"data\"];\n  /**\n   * Callback that fires when the user reorders rows within the table. Can be used\n   * to propogate order change to the backend.\n   */\n  reorderDataFn?: ({\n    rowId,\n    newIndex,\n  }: {\n    rowId: string;\n    newIndex: number;\n  }) => void;\n  /**\n   * The current page number.\n   */\n  page?: number;\n  /**\n   * The number of results per page.\n   */\n  resultsPerPage?: number;\n  /**\n   * The type of pagination controls shown. Defaults to next/prev buttons, but can be\n   * set to a simple \"Load more\" button by setting to \"loadMore\".\n   */\n  paginationType?: (typeof paginationTypeValues)[number];\n  /**\n   * Action buttons to display in each row\n   */\n  rowActionButtons?: (\n    row: MRT_RowData\n  ) => ReactElement<typeof Button | typeof Fragment>;\n  /**\n   * Menu items to include in the optional actions menu on each row.\n   */\n  rowActionMenuItems?: (\n    row: MRT_RowData\n  ) => ReactElement<typeof MenuItem | typeof Fragment>;\n};\n\nconst DataTable = ({\n  columns,\n  data: dataProp,\n  getRowId,\n  page: pageProp = 1,\n  initialDensity = densityValues[0],\n  resultsPerPage: resultsPerPageProp = 20,\n  fetchDataFn,\n  reorderDataFn,\n  totalRows,\n  hasSearchSubmitButton,\n  paginationType = \"paged\",\n  onRowSelectionChange,\n  rowActionButtons,\n  rowActionMenuItems,\n  hasChangeableDensity,\n  hasColumnResizing,\n  hasColumnVisibility,\n  hasFilters,\n  hasPagination,\n  hasRowReordering,\n  hasRowSelection,\n  hasSearch,\n  hasSorting,\n}: DataTableProps) => {\n  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();\n  const [showSkeletons, setShowSkeletons] = useState<boolean>(true);\n  const [data, setData] =\n    useState<MRT_TableOptions<MRT_RowData>[\"data\"]>(dataProp);\n  const [page, setPage] = useState<number>(pageProp);\n  const [resultsPerPage, setResultsPerPage] =\n    useState<number>(resultsPerPageProp);\n  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n  const [sorting, setSorting] = useState<MRT_SortingState>([]);\n  const [density, setDensity] = useState<MRT_DensityState>(initialDensity);\n\n  const initialColumnVisibility = useMemo(() => {\n    return columns.reduce((acc, column) => {\n      acc[column.accessorKey as string] = true;\n      return acc;\n    }, {} as MRT_VisibilityState);\n  }, [columns]);\n\n  const [columnVisibility, setColumnVisibility] = useState<MRT_VisibilityState>(\n    initialColumnVisibility\n  );\n\n  const [globalFilter, setGlobalFilter] = useState<string>(\"\");\n  const [filters, setFilters] = useState<Array<DataFilter>>();\n\n  const refreshData = useCallback(async () => {\n    setShowSkeletons(true);\n    try {\n      const newData = await fetchDataFn({\n        page: page,\n        resultsPerPage: resultsPerPage,\n        sort: sorting,\n        search: globalFilter,\n        filters: filters,\n      });\n      setData(newData);\n      setShowSkeletons(false);\n    } catch (error) {\n      console.log(error);\n      setShowSkeletons(false);\n    }\n  }, [page, resultsPerPage, sorting, globalFilter, filters, fetchDataFn]);\n\n  const handleSortingChange = useCallback(\n    (updater: MRT_Updater<MRT_SortingState>) => {\n      setSorting((prevSorting) =>\n        updater instanceof Function ? updater(prevSorting) : sorting\n      );\n    },\n    [sorting]\n  );\n\n  const handleColumnVisibility = useCallback(\n    (columnId: string) => {\n      setColumnVisibility((prevVisibility) => ({\n        ...prevVisibility,\n        [columnId]: !columnVisibility[columnId],\n      }));\n    },\n    [columnVisibility]\n  );\n\n  const handleSearch = useCallback((value: string) => {\n    setGlobalFilter(value);\n  }, []);\n\n  const handleFilters = useCallback((updatedFilters: Array<DataFilter>) => {\n    setFilters(updatedFilters);\n  }, []);\n\n  const handleRowSelectionChange = useCallback(\n    (updater: MRT_Updater<MRT_RowSelectionState>) => {\n      setRowSelection((prevRowSelection) =>\n        updater instanceof Function ? updater(prevRowSelection) : rowSelection\n      );\n    },\n    [rowSelection]\n  );\n\n  const handleReordering = useCallback(\n    ({ rowId, newIndex }: { rowId: string; newIndex: number }) => {\n      if (newIndex < 0) {\n        return;\n      }\n\n      if (totalRows && newIndex > totalRows) {\n        return;\n      }\n\n      reorderDataFn?.({ rowId, newIndex });\n      refreshData();\n    },\n    [totalRows, reorderDataFn, refreshData]\n  );\n\n  useEffect(() => {\n    setShowSkeletons(false);\n  }, [data]);\n\n  useEffect(() => {\n    refreshData();\n  }, [refreshData, page, resultsPerPage, sorting, globalFilter, filters]);\n\n  useEffect(() => {\n    onRowSelectionChange?.(rowSelection);\n  }, [rowSelection, onRowSelectionChange]);\n\n  const rowVirtualizerInstanceRef =\n    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);\n\n  const table = useMaterialReactTable({\n    columns: columns,\n    data: data,\n    state: {\n      density,\n      sorting,\n      globalFilter,\n      columnVisibility,\n      rowSelection,\n      showSkeletons,\n    },\n    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,\n    rowVirtualizerOptions: { overscan: 4 },\n    enableRowVirtualization:\n      paginationType === \"loadMore\" || resultsPerPage > 50,\n    enableColumnResizing: hasColumnResizing,\n    enableDensityToggle: false,\n    enableFullScreenToggle: false,\n    enablePagination: false,\n    enableRowSelection: hasRowSelection,\n    enableFilters: false,\n    enableHiding: false,\n    enableRowOrdering: hasRowReordering,\n    enableRowDragging: hasRowReordering,\n    enableSorting: hasSorting,\n    selectAllMode: \"all\",\n    enableColumnActions: false,\n    layoutMode: \"grid-no-grow\",\n    displayColumnDefOptions: {\n      \"mrt-row-actions\": {\n        muiTableBodyCellProps: {\n          align: \"right\",\n          sx: {\n            overflow: \"visible\",\n            width: \"unset\",\n          },\n        },\n        muiTableHeadCellProps: {\n          align: \"right\",\n          sx: {\n            width: \"unset\",\n            // TODO: Make the right padding here 16px (and possibly adapt it to the density padding)\n          },\n        },\n      },\n      \"mrt-row-drag\": {\n        header: \"\",\n        muiTableBodyCellProps: {\n          sx: {\n            minWidth: 0,\n            width: 32,\n          },\n        },\n        muiTableHeadCellProps: {\n          sx: {\n            minWidth: 0,\n            width: 32,\n          },\n        },\n      },\n    },\n    enableGlobalFilter: false,\n    manualFiltering: true,\n    manualSorting: true,\n    getRowId: getRowId,\n    icons: {\n      ArrowDownwardIcon: ArrowDownIcon,\n      DragHandleIcon: DragIndicatorIcon,\n      SyncAltIcon: ArrowUnsortedIcon,\n    },\n    onSortingChange: handleSortingChange,\n    onRowSelectionChange: handleRowSelectionChange,\n    enableRowActions:\n      hasRowReordering || rowActionButtons || rowActionMenuItems ? true : false,\n    positionActionsColumn: \"last\",\n\n    muiTableHeadCellProps: ({ column }) => ({\n      className: sorting.find((item) => item.id === column.id)\n        ? \"isSorted\"\n        : \"isUnsorted\",\n    }),\n\n    muiTableBodyRowProps: ({ table, row }) => ({\n      className:\n        draggingRow?.id === row.id && table.getState().hoveredRow?.id !== row.id\n          ? \"isDragging\"\n          : table.getState().hoveredRow?.id === row.id &&\n            draggingRow?.id !== row.id\n          ? \"isDragTarget\"\n          : draggingRow?.id === row.id &&\n            table.getState().hoveredRow?.id === row.id\n          ? \"isDragging isDragTarget\"\n          : undefined,\n    }),\n\n    muiRowDragHandleProps: {\n      tabIndex: -1,\n      onDragEnd: () => {\n        const cols = table.getAllColumns();\n        cols[0].toggleVisibility();\n\n        const { draggingRow, hoveredRow } = table.getState();\n        if (draggingRow) {\n          handleReordering({\n            rowId: draggingRow.id,\n            newIndex: (hoveredRow as MRT_RowData).index,\n          });\n        }\n\n        setDraggingRow(null);\n      },\n\n      onDragCapture: () => {\n        if (!draggingRow && table.getState().draggingRow?.id) {\n          setDraggingRow(table.getState().draggingRow);\n        }\n      },\n    },\n\n    renderRowActions: ({ row }) => {\n      const currentIndex = row.index + (page - 1) * resultsPerPage;\n\n      return (\n        <Box sx={{ display: \"flex\" }}>\n          {rowActionButtons?.(row)}\n          {(rowActionMenuItems || hasRowReordering) && (\n            <MenuButton\n              endIcon={<MoreIcon />}\n              size=\"small\"\n              buttonVariant=\"floating\"\n              ariaLabel=\"More actions\"\n              menuAlignment=\"right\"\n            >\n              {rowActionMenuItems && (\n                <>\n                  {rowActionMenuItems(row)}\n                  <hr />\n                </>\n              )}\n              <MenuItem\n                isDisabled={currentIndex <= 0}\n                onClick={() => handleReordering({ rowId: row.id, newIndex: 0 })}\n              >\n                <ArrowTopIcon /> Bring to front\n              </MenuItem>\n              <MenuItem\n                isDisabled={currentIndex <= 0}\n                onClick={() =>\n                  handleReordering({\n                    rowId: row.id,\n                    newIndex: currentIndex <= 0 ? 0 : currentIndex - 1,\n                  })\n                }\n              >\n                <ArrowUpIcon /> Bring forward\n              </MenuItem>\n              <MenuItem\n                isDisabled={totalRows ? currentIndex >= totalRows - 1 : false}\n                onClick={() =>\n                  handleReordering({\n                    rowId: row.id,\n                    newIndex: currentIndex + 1,\n                  })\n                }\n              >\n                <ArrowDownIcon /> Send backward\n              </MenuItem>\n              <>\n                {totalRows && (\n                  <MenuItem\n                    isDisabled={currentIndex >= totalRows - 1}\n                    onClick={() =>\n                      handleReordering({\n                        rowId: row.id,\n                        newIndex: totalRows,\n                      })\n                    }\n                  >\n                    <ArrowBottomIcon /> Send to back\n                  </MenuItem>\n                )}\n              </>\n            </MenuButton>\n          )}\n        </Box>\n      );\n    },\n  });\n\n  const tableSettings = useMemo(\n    () => (\n      <>\n        {hasChangeableDensity && (\n          <MenuButton\n            endIcon={<ListIcon />}\n            ariaLabel=\"Table density\"\n            menuAlignment=\"right\"\n            shouldCloseOnSelect={false}\n          >\n            <>\n              {densityValues.map((value: MRT_DensityState) => (\n                <MenuItem\n                  key={value}\n                  isSelected={density === value}\n                  onClick={() => setDensity(value)}\n                >\n                  {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}\n                </MenuItem>\n              ))}\n            </>\n          </MenuButton>\n        )}\n\n        {hasColumnVisibility && (\n          <MenuButton\n            endIcon={<ShowIcon />}\n            ariaLabel=\"Show/hide columns\"\n            menuAlignment=\"right\"\n            shouldCloseOnSelect={false}\n          >\n            <>\n              {columns\n                .filter((column) => column.enableHiding !== false)\n                .map((column) => (\n                  <MenuItem\n                    key={column.accessorKey}\n                    onClick={() =>\n                      handleColumnVisibility(column.accessorKey as string)\n                    }\n                  >\n                    <MuiCheckbox\n                      checked={\n                        columnVisibility[column.accessorKey as string] !== false\n                      }\n                    />\n                    {column.header}\n                  </MenuItem>\n                ))}\n            </>\n          </MenuButton>\n        )}\n      </>\n    ),\n    [density, columnVisibility, columns, hasChangeableDensity]\n  );\n\n  return (\n    <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n      <DataFilters\n        onChangeSearch={hasSearch ? handleSearch : undefined}\n        onChangeFilters={handleFilters}\n        hasSearchSubmitButton={hasSearchSubmitButton}\n        additionalActions={tableSettings}\n        filters={\n          hasFilters\n            ? columns\n                .filter((column) => column.enableColumnFilter !== false)\n                .map((column) => {\n                  return {\n                    id: column.accessorKey as string,\n                    label: column.header,\n                    variant: column.filterVariant ?? \"text\",\n                    options: column.filterSelectOptions,\n                  };\n                })\n            : undefined\n        }\n      />\n\n      <MRT_TableContainer table={table} />\n\n      {hasPagination && (\n        <DataTablePagination\n          paginationType={paginationType}\n          currentNumberOfResults={data.length}\n          currentPage={page}\n          isPreviousButtonDisabled={page <= 1}\n          isNextButtonDisabled={false} // TODO: Add logic for disabling next/load more button\n          onClickPrevious={() => setPage(page - 1)}\n          onClickNext={() => {\n            if (paginationType === \"loadMore\") {\n              setResultsPerPage(resultsPerPage + resultsPerPageProp);\n            } else {\n              setPage(page + 1);\n            }\n          }}\n        />\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedDataTable = memo(DataTable);\nMemoizedDataTable.displayName = \"DataTable\";\n\nexport { MemoizedDataTable as DataTable };\n"],"mappings":"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"}

package/dist/labs/DataTablePagination.js

@@ -0,0 +1,74 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { Box } from "../Box.js";
+import { Button } from "../Button.js";
+import { Support } from "../Typography.js";
+import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const paginationTypeValues = ["paged", "loadMore"];
+const DataTablePagination = _ref => {
+  let {
+    currentPage,
+    currentNumberOfResults,
+    isNextButtonDisabled,
+    isPreviousButtonDisabled,
+    onClickNext,
+    onClickPrevious,
+    paginationType
+  } = _ref;
+  return _jsx(Box, {
+    sx: {
+      display: "flex",
+      gap: 4,
+      alignItems: "center"
+    },
+    children: paginationType === "loadMore" ? _jsxs(_Fragment, {
+      children: [_jsx(Button, {
+        label: "Show more",
+        variant: "secondary",
+        onClick: onClickNext,
+        isDisabled: isNextButtonDisabled
+      }), currentNumberOfResults && _jsxs(Support, {
+        color: "textSecondary",
+        children: [currentNumberOfResults, " results"]
+      })]
+    }) : _jsxs(_Fragment, {
+      children: [_jsx(Button, {
+        label: "Previous",
+        startIcon: _jsx(ArrowLeftIcon, {}),
+        variant: "secondary",
+        onClick: onClickPrevious,
+        isDisabled: isPreviousButtonDisabled
+      }), currentPage && _jsx(Box, {
+        children: _jsxs(Support, {
+          color: "textSecondary",
+          component: "span",
+          children: ["Page ", currentPage]
+        })
+      }), _jsx(Button, {
+        label: "Next",
+        endIcon: _jsx(ArrowRightIcon, {}),
+        variant: "secondary",
+        onClick: onClickNext,
+        isDisabled: isNextButtonDisabled
+      })]
+    })
+  });
+};
+const MemoizedDataTablePagination = memo(DataTablePagination);
+MemoizedDataTablePagination.displayName = "DataTablePagination";
+export { MemoizedDataTablePagination as DataTablePagination };
+//# sourceMappingURL=DataTablePagination.js.map

package/dist/labs/DataTablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.js","names":["memo","Box","Button","Support","ArrowLeftIcon","ArrowRightIcon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","paginationTypeValues","DataTablePagination","_ref","currentPage","currentNumberOfResults","isNextButtonDisabled","isPreviousButtonDisabled","onClickNext","onClickPrevious","paginationType","sx","display","gap","alignItems","children","label","variant","onClick","isDisabled","color","startIcon","component","endIcon","MemoizedDataTablePagination","displayName"],"sources":["../../src/labs/DataTablePagination.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\nimport { Box } from \"../Box\";\nimport { Button } from \"../Button\";\nimport { Support } from \"../Typography\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"../icons.generated\";\n\nexport const paginationTypeValues = [\"paged\", \"loadMore\"] as const;\n\nexport type DataTablePaginationProps = {\n  currentPage?: number;\n  currentNumberOfResults?: number;\n  isNextButtonDisabled?: boolean;\n  isPreviousButtonDisabled?: boolean;\n  onClickNext: () => void;\n  onClickPrevious?: () => void;\n  paginationType?: (typeof paginationTypeValues)[number];\n};\n\nconst DataTablePagination = ({\n  currentPage,\n  currentNumberOfResults,\n  isNextButtonDisabled,\n  isPreviousButtonDisabled,\n  onClickNext,\n  onClickPrevious,\n  paginationType,\n}: DataTablePaginationProps) => {\n  return (\n    <Box sx={{ display: \"flex\", gap: 4, alignItems: \"center\" }}>\n      {paginationType === \"loadMore\" ? (\n        <>\n          <Button\n            label=\"Show more\"\n            variant=\"secondary\"\n            onClick={onClickNext}\n            isDisabled={isNextButtonDisabled}\n          />\n          {currentNumberOfResults && (\n            <Support color=\"textSecondary\">\n              {currentNumberOfResults} results\n            </Support>\n          )}\n        </>\n      ) : (\n        <>\n          <Button\n            label=\"Previous\"\n            startIcon={<ArrowLeftIcon />}\n            variant=\"secondary\"\n            onClick={onClickPrevious}\n            isDisabled={isPreviousButtonDisabled}\n          />\n          {currentPage && (\n            <Box>\n              <Support color=\"textSecondary\" component=\"span\">\n                Page {currentPage}\n              </Support>\n            </Box>\n          )}\n          <Button\n            label=\"Next\"\n            endIcon={<ArrowRightIcon />}\n            variant=\"secondary\"\n            onClick={onClickNext}\n            isDisabled={isNextButtonDisabled}\n          />\n        </>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedDataTablePagination = memo(DataTablePagination);\nMemoizedDataTablePagination.displayName = \"DataTablePagination\";\n\nexport { MemoizedDataTablePagination as DataTablePagination };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SACpBC,GAAG;AAAA,SACHC,MAAM;AAAA,SACNC,OAAO;AAAA,SACPC,aAAa,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEtC,OAAO,MAAMC,oBAAoB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAU;AAYlE,MAAMC,mBAAmB,GAAGC,IAAA,IAQI;EAAA,IARH;IAC3BC,WAAW;IACXC,sBAAsB;IACtBC,oBAAoB;IACpBC,wBAAwB;IACxBC,WAAW;IACXC,eAAe;IACfC;EACwB,CAAC,GAAAP,IAAA;EACzB,OACEP,IAAA,CAACN,GAAG;IAACqB,EAAE,EAAE;MAAEC,OAAO,EAAE,MAAM;MAAEC,GAAG,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAS,CAAE;IAAAC,QAAA,EACxDL,cAAc,KAAK,UAAU,GAC5BZ,KAAA,CAAAE,SAAA;MAAAe,QAAA,GACEnB,IAAA,CAACL,MAAM;QACLyB,KAAK,EAAC,WAAW;QACjBC,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAEV,WAAY;QACrBW,UAAU,EAAEb;MAAqB,CAClC,CAAC,EACDD,sBAAsB,IACrBP,KAAA,CAACN,OAAO;QAAC4B,KAAK,EAAC,eAAe;QAAAL,QAAA,GAC3BV,sBAAsB,EAAC,UAC1B;MAAA,CAAS,CACV;IAAA,CACD,CAAC,GAEHP,KAAA,CAAAE,SAAA;MAAAe,QAAA,GACEnB,IAAA,CAACL,MAAM;QACLyB,KAAK,EAAC,UAAU;QAChBK,SAAS,EAAEzB,IAAA,CAACH,aAAa,IAAE,CAAE;QAC7BwB,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAET,eAAgB;QACzBU,UAAU,EAAEZ;MAAyB,CACtC,CAAC,EACDH,WAAW,IACVR,IAAA,CAACN,GAAG;QAAAyB,QAAA,EACFjB,KAAA,CAACN,OAAO;UAAC4B,KAAK,EAAC,eAAe;UAACE,SAAS,EAAC,MAAM;UAAAP,QAAA,GAAC,OACzC,EAACX,WAAW;QAAA,CACV;MAAC,CACP,CACN,EACDR,IAAA,CAACL,MAAM;QACLyB,KAAK,EAAC,MAAM;QACZO,OAAO,EAAE3B,IAAA,CAACF,cAAc,IAAE,CAAE;QAC5BuB,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAEV,WAAY;QACrBW,UAAU,EAAEb;MAAqB,CAClC,CAAC;IAAA,CACF;EACH,CACE,CAAC;AAEV,CAAC;AAED,MAAMkB,2BAA2B,GAAGnC,IAAI,CAACa,mBAAmB,CAAC;AAC7DsB,2BAA2B,CAACC,WAAW,GAAG,qBAAqB;AAE/D,SAASD,2BAA2B,IAAItB,mBAAmB"}

package/dist/labs/PaginatedTable.js

@@ -10,15 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import { Typography } from "../Typography.js";
-import MaterialReactTable from "material-react-table";
+import { useMaterialReactTable, MaterialReactTable } from "material-react-table";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const PaginatedTable = _ref => {
   let {
-    columns,
-    data,
+    columns = [],
+    data = [],
     fetchMoreData,
     getRowId,
     hasError,
@@ -136,7 +136,7 @@ const PaginatedTable = _ref => {
     ownerState: {},
     theme
   }) : "", []);
-  return _jsx(MaterialReactTable, {
+  const table = useMaterialReactTable({
     columns: columns,
     data: data,
     enableMultiRowSelection: hasRowSelection,
@@ -151,7 +151,7 @@ const PaginatedTable = _ref => {
     muiSelectCheckboxProps: {
       sx: muiCheckboxStyles
     },
-    muiTablePaginationProps: muiTablePaginationProps,
+    muiPaginationProps: muiTablePaginationProps,
     muiToolbarAlertBannerProps: muiToolbarAlertBannerProps,
     onColumnFiltersChange: setColumnFilters,
     onGlobalFilterChange: setGlobalFilter,
@@ -160,11 +160,14 @@ const PaginatedTable = _ref => {
     renderBottomToolbarCustomActions: renderBottomToolbarCustomActions,
     renderTopToolbarCustomActions: renderTopToolbarCustomActions,
     rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
-    rowVirtualizerProps: {
+    rowVirtualizerOptions: {
       overscan: 4
     },
     state: modifiedState
   });
+  return _jsx(MaterialReactTable, {
+    table: table
+  });
 };
 const MemoizedPaginatedTable = memo(PaginatedTable);
 MemoizedPaginatedTable.displayName = "PaginatedTable";