@perses-dev/components 0.53.1 → 0.54.0-beta.1

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/Table.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, useTheme } from '@mui/material';\nimport {\n  ColumnDef,\n  OnChangeFn,\n  Row,\n  RowSelectionState,\n  SortingState,\n  Table as TanstackTable,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { ReactElement, useCallback, useMemo } from 'react';\nimport { TableCheckbox } from './TableCheckbox';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { DEFAULT_COLUMN_WIDTH, TableProps, persesColumnsToTanstackColumns } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number): string => {\n  return `${index}`;\n};\n\n// Setting these defaults one enables them to be consistent across renders instead\n// of being recreated every time, which can be important for perf because react\n// does not do deep equality checking for objects and arrays.\nconst DEFAULT_ROW_SELECTION: NonNullable<TableProps<unknown>['rowSelection']> = {};\nconst DEFAULT_SORTING: NonNullable<TableProps<unknown>['sorting']> = [];\n\n/**\n * Component used to render tabular data in Perses use cases. This component is\n * **not** intended to be a general use data table for use cases unrelated to Perses.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function Table<TableData>({\n  data,\n  columns,\n  cellConfigs,\n  density = 'standard',\n  defaultColumnWidth = DEFAULT_COLUMN_WIDTH,\n  defaultColumnHeight = 'auto',\n  checkboxSelection,\n  onRowSelectionChange,\n  onSortingChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = DEFAULT_ROW_SELECTION,\n  sorting = DEFAULT_SORTING,\n  getItemActions,\n  hasItemActions,\n  pagination,\n  onPaginationChange,\n  rowSelectionVariant = 'standard',\n  ...otherProps\n}: TableProps<TableData>): ReactElement {\n  const theme = useTheme();\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {\n    const newRowSelection =\n      typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;\n    onRowSelectionChange?.(newRowSelection);\n  };\n\n  const handleRowSelectionEvent = useCallback(\n    (table: TanstackTable<TableData>, row: Row<TableData>, isModified: boolean) => {\n      if (rowSelectionVariant === 'standard' || isModified) {\n        row.toggleSelected();\n      } else {\n        // Legend variant (when action not modified with shift/meta key).\n        // Note that this behavior needs to be kept in sync with behavior in\n        // the Legend component for list-based legends.\n        if (row.getIsSelected() && !table.getIsAllRowsSelected()) {\n          // Row was already selected. Revert to select all.\n          table.toggleAllRowsSelected();\n        } else {\n          // Focus the selected row.\n          onRowSelectionChange?.({\n            [row.id]: true,\n          });\n        }\n      }\n    },\n    [onRowSelectionChange, rowSelectionVariant]\n  );\n\n  const handleCheckboxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, table: TanstackTable<TableData>, row: Row<TableData>) => {\n      const nativePointerEvent =\n        e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent)\n          ? (e.nativeEvent as PointerEvent)\n          : undefined;\n      const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;\n      handleRowSelectionEvent(table, row, isModifed);\n    },\n    [handleRowSelectionEvent]\n  );\n\n  const handleSortingChange: OnChangeFn<SortingState> = (sortingUpdater) => {\n    const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;\n    onSortingChange?.(newSorting);\n  };\n\n  const actionsColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'itemActions',\n      header: 'Actions',\n      cell: ({ row }): ReactElement => {\n        return (\n          <Stack direction=\"row\" alignItems=\"center\">\n            {getItemActions?.({ id: row.id, data: row.original })}\n          </Stack>\n        );\n      },\n      enableSorting: false,\n    };\n  }, [getItemActions]);\n\n  const checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 28,\n      header: ({ table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n            color={theme.palette.text.primary}\n            density={density}\n          />\n        );\n      },\n      cell: ({ row, table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              handleCheckboxChange(e, table, row);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n      enableSorting: false,\n    };\n  }, [theme.palette.text.primary, density, getCheckboxColor, handleCheckboxChange]);\n\n  const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {\n    const initTableColumns = persesColumnsToTanstackColumns(columns);\n\n    if (hasItemActions) {\n      initTableColumns.unshift(actionsColumn);\n    }\n\n    if (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns, hasItemActions, actionsColumn]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,\n    // without this setting, the getPaginationRowModel setting persists and it is not possible to switch from paginated to unpaginated\n    // can be removed once https://github.com/TanStack/table/pull/5974 is merged\n    manualPagination: !pagination,\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    onSortingChange: handleSortingChange,\n    // For now, defaulting to sort by descending first. We can expose the ability\n    // to customize it if/when we have use cases for it.\n    sortDescFirst: true,\n    state: {\n      rowSelection,\n      sorting,\n      ...(pagination ? { pagination } : {}),\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>, rowId: string) => {\n      const row = table.getRow(rowId);\n      const isModifiedClick = e.metaKey || e.shiftKey;\n      handleRowSelectionEvent(table, row, isModifiedClick);\n    },\n    [handleRowSelectionEvent, table]\n  );\n\n  return (\n    <VirtualizedTable\n      {...otherProps}\n      density={density}\n      defaultColumnWidth={defaultColumnWidth}\n      defaultColumnHeight={defaultColumnHeight}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n      cellConfigs={cellConfigs}\n      pagination={pagination}\n      onPaginationChange={onPaginationChange}\n      rowCount={table.getRowCount()}\n    />\n  );\n}\n"],"names":["Stack","useTheme","getCoreRowModel","getPaginationRowModel","getSortedRowModel","useReactTable","useCallback","useMemo","TableCheckbox","VirtualizedTable","DEFAULT_COLUMN_WIDTH","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","cellConfigs","density","defaultColumnWidth","defaultColumnHeight","checkboxSelection","onRowSelectionChange","onSortingChange","getCheckboxColor","getRowId","rowSelection","sorting","getItemActions","hasItemActions","pagination","onPaginationChange","rowSelectionVariant","otherProps","theme","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","handleRowSelectionEvent","table","row","isModified","toggleSelected","getIsSelected","getIsAllRowsSelected","toggleAllRowsSelected","id","handleCheckboxChange","e","nativePointerEvent","nativeEvent","MouseEvent","KeyboardEvent","undefined","isModifed","metaKey","shiftKey","handleSortingChange","sortingUpdater","newSorting","actionsColumn","header","cell","direction","alignItems","original","enableSorting","checkboxColumn","size","checked","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","getIsSomeSelected","tableColumns","initTableColumns","unshift","manualPagination","enableRowSelection","sortDescFirst","state","handleRowClick","rowId","getRow","isModifiedClick","onRowClick","rows","getRowModel","getAllFlatColumns","headers","getHeaderGroups","rowCount","getRowCount"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/Table.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, useTheme } from '@mui/material';\nimport {\n  ColumnDef,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  OnChangeFn,\n  Row,\n  RowSelectionState,\n  SortingState,\n  Table as TanstackTable,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { ReactElement, useCallback, useMemo, useState } from 'react';\nimport { useFuzzySearch } from './hooks/useFuzzySearch';\nimport { TableCheckbox } from './TableCheckbox';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { DEFAULT_COLUMN_WIDTH, persesColumnsToTanstackColumns, TableProps } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number): string => {\n  return `${index}`;\n};\n\n// Setting these defaults one enables them to be consistent across renders instead\n// of being recreated every time, which can be important for perf because react\n// does not do deep equality checking for objects and arrays.\nconst DEFAULT_ROW_SELECTION: NonNullable<TableProps<unknown>['rowSelection']> = {};\nconst DEFAULT_SORTING: NonNullable<TableProps<unknown>['sorting']> = [];\n\n/**\n * Component used to render tabular data in Perses use cases. This component is\n * **not** intended to be a general use data table for use cases unrelated to Perses.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function Table<TableData>({\n  data,\n  columns,\n  cellConfigs,\n  density = 'standard',\n  defaultColumnWidth = DEFAULT_COLUMN_WIDTH,\n  defaultColumnHeight = 'auto',\n  checkboxSelection,\n  onRowSelectionChange,\n  onSortingChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = DEFAULT_ROW_SELECTION,\n  sorting = DEFAULT_SORTING,\n  getItemActions,\n  hasItemActions,\n  pagination,\n  onPaginationChange,\n  rowSelectionVariant = 'standard',\n  getSubRows,\n  hiddenColumns,\n  tableToolbarConfig,\n  ...otherProps\n}: TableProps<TableData>): ReactElement {\n  const theme = useTheme();\n\n  const { globalFilter, setGlobalFilter, fuzzySearchOptions } = useFuzzySearch<TableData>(\n    tableToolbarConfig?.isSearchEnabled\n  );\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    hiddenColumns?.reduce((acc, columnId) => ({ ...acc, [columnId]: false }), {}) ?? {}\n  );\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {\n    const newRowSelection =\n      typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;\n    onRowSelectionChange?.(newRowSelection);\n  };\n\n  const handleRowSelectionEvent = useCallback(\n    (table: TanstackTable<TableData>, row: Row<TableData>, isModified: boolean) => {\n      if (rowSelectionVariant === 'standard' || isModified) {\n        row.toggleSelected();\n      } else {\n        // Legend variant (when action not modified with shift/meta key).\n        // Note that this behavior needs to be kept in sync with behavior in\n        // the Legend component for list-based legends.\n        if (row.getIsSelected() && !table.getIsAllRowsSelected()) {\n          // Row was already selected. Revert to select all.\n          table.toggleAllRowsSelected();\n        } else {\n          // Focus the selected row.\n          onRowSelectionChange?.({\n            [row.id]: true,\n          });\n        }\n      }\n    },\n    [onRowSelectionChange, rowSelectionVariant]\n  );\n\n  const handleCheckboxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, table: TanstackTable<TableData>, row: Row<TableData>) => {\n      const nativePointerEvent =\n        e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent)\n          ? (e.nativeEvent as PointerEvent)\n          : undefined;\n      const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;\n      handleRowSelectionEvent(table, row, isModifed);\n    },\n    [handleRowSelectionEvent]\n  );\n\n  const handleSortingChange: OnChangeFn<SortingState> = (sortingUpdater) => {\n    const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;\n    onSortingChange?.(newSorting);\n  };\n\n  const actionsColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'itemActions',\n      header: 'Actions',\n      cell: ({ row }): ReactElement => {\n        return (\n          <Stack direction=\"row\" alignItems=\"center\">\n            {getItemActions?.({ id: row.id, data: row.original })}\n          </Stack>\n        );\n      },\n      enableSorting: false,\n    };\n  }, [getItemActions]);\n\n  const checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 28,\n      header: ({ table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n            color={theme.palette.text.primary}\n            density={density}\n          />\n        );\n      },\n      cell: ({ row, table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              handleCheckboxChange(e, table, row);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n      enableSorting: false,\n    };\n  }, [theme.palette.text.primary, density, getCheckboxColor, handleCheckboxChange]);\n\n  const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {\n    const initTableColumns = persesColumnsToTanstackColumns(columns);\n\n    if (hasItemActions) {\n      initTableColumns.unshift(actionsColumn);\n    }\n\n    if (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns, hasItemActions, actionsColumn]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId: getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,\n    // without this setting, the getPaginationRowModel setting persists and it is not possible to switch from paginated to unpaginated\n    // can be removed once https://github.com/TanStack/table/pull/5974 is merged\n    manualPagination: !pagination,\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    onSortingChange: handleSortingChange,\n    onColumnVisibilityChange: setColumnVisibility,\n    getSubRows: getSubRows,\n    getExpandedRowModel: getSubRows ? getExpandedRowModel() : undefined,\n    ...fuzzySearchOptions,\n    // For now, defaulting to sort by descending first. We can expose the ability\n    // to customize it if/when we have use cases for it.\n    sortDescFirst: true,\n    state: {\n      rowSelection,\n      sorting,\n      globalFilter: tableToolbarConfig?.isSearchEnabled ? globalFilter : undefined,\n      columnVisibility,\n      ...(pagination ? { pagination } : {}),\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>, rowId: string) => {\n      const row = table.getRow(rowId);\n      const isModifiedClick = e.metaKey || e.shiftKey;\n      handleRowSelectionEvent(table, row, isModifiedClick);\n    },\n    [handleRowSelectionEvent, table]\n  );\n\n  return (\n    <VirtualizedTable\n      {...otherProps}\n      density={density}\n      defaultColumnWidth={defaultColumnWidth}\n      defaultColumnHeight={defaultColumnHeight}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getVisibleFlatColumns()}\n      headers={table.getHeaderGroups()}\n      cellConfigs={cellConfigs}\n      pagination={pagination}\n      onPaginationChange={onPaginationChange}\n      rowCount={table.getRowCount()}\n      toolbarConfig={{\n        isSearchEnabled: tableToolbarConfig?.isSearchEnabled,\n        globalFilter,\n        onGlobalFilterChange: setGlobalFilter,\n        isColumnFilterEnabled: tableToolbarConfig?.isColumnFilterEnabled,\n        columns: table.getAllColumns(),\n        columnFilterMenuMaxHeight: tableToolbarConfig?.columnFilterMenuMaxHeight,\n      }}\n    />\n  );\n}\n"],"names":["Stack","useTheme","getCoreRowModel","getExpandedRowModel","getPaginationRowModel","getSortedRowModel","useReactTable","useCallback","useMemo","useState","useFuzzySearch","TableCheckbox","VirtualizedTable","DEFAULT_COLUMN_WIDTH","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","cellConfigs","density","defaultColumnWidth","defaultColumnHeight","checkboxSelection","onRowSelectionChange","onSortingChange","getCheckboxColor","getRowId","rowSelection","sorting","getItemActions","hasItemActions","pagination","onPaginationChange","rowSelectionVariant","getSubRows","hiddenColumns","tableToolbarConfig","otherProps","theme","globalFilter","setGlobalFilter","fuzzySearchOptions","isSearchEnabled","columnVisibility","setColumnVisibility","reduce","acc","columnId","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","handleRowSelectionEvent","table","row","isModified","toggleSelected","getIsSelected","getIsAllRowsSelected","toggleAllRowsSelected","id","handleCheckboxChange","e","nativePointerEvent","nativeEvent","MouseEvent","KeyboardEvent","undefined","isModifed","metaKey","shiftKey","handleSortingChange","sortingUpdater","newSorting","actionsColumn","header","cell","direction","alignItems","original","enableSorting","checkboxColumn","size","checked","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","getIsSomeSelected","tableColumns","initTableColumns","unshift","manualPagination","enableRowSelection","onColumnVisibilityChange","sortDescFirst","state","handleRowClick","rowId","getRow","isModifiedClick","onRowClick","rows","getRowModel","getVisibleFlatColumns","headers","getHeaderGroups","rowCount","getRowCount","toolbarConfig","onGlobalFilterChange","isColumnFilterEnabled","getAllColumns","columnFilterMenuMaxHeight"],"mappings":"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"}

package/dist/Table/TableToolbar.d.ts

@@ -0,0 +1,34 @@
+import { Column } from '@tanstack/react-table';
+import { ReactElement } from 'react';
+export interface TableToolbarProps<TableData> {
+    /**
+     * When `true`, a search input is rendered.
+     */
+    isSearchEnabled?: boolean;
+    /**
+     * Current value of the global filter / search query.
+     */
+    globalFilter: string;
+    /**
+     * Callback fired when the search query changes.
+     */
+    onGlobalFilterChange: (value: string) => void;
+    /**
+     * When `true`, a "Columns" button is rendered that opens a column visibility dropdown.
+     */
+    isColumnFilterEnabled?: boolean;
+    /**
+     * All columns from the table instance, used to build the visibility menu.
+     */
+    columns: Array<Column<TableData>>;
+    /**
+     * The width of the toolbar, used to determine when to switch to a more compact layout.
+     */
+    width: number | string;
+    /**
+     * Max height for the column filter menu.
+     */
+    columnFilterMenuMaxHeight?: number | string;
+}
+export declare function TableToolbar<TableData>({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight, }: TableToolbarProps<TableData>): ReactElement | null;
+//# sourceMappingURL=TableToolbar.d.ts.map

package/dist/Table/TableToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbar.d.ts","sourceRoot":"","sources":["../../src/Table/TableToolbar.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAM5D,MAAM,WAAW,iBAAiB,CAAC,SAAS;IAC1C;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7C;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,EACtC,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,qBAAqB,EACrB,OAAO,EACP,KAAK,EACL,yBAA+B,GAChC,EAAE,iBAAiB,CAAC,SAAS,CAAC,GAAG,YAAY,GAAG,IAAI,CA8FpD"}

package/dist/Table/TableToolbar.js

@@ -0,0 +1,127 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Checkbox, IconButton, InputAdornment, ListItemText, Menu, MenuItem, Stack } from '@mui/material';
+import { useCallback, useState } from 'react';
+import Magnify from 'mdi-material-ui/Magnify';
+import Close from 'mdi-material-ui/Close';
+import ViewColumn from 'mdi-material-ui/ViewColumn';
+import { TextField } from '../controls';
+export function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight = 400 }) {
+    const [colMenuAnchor, setColMenuAnchor] = useState(null);
+    const colMenuOpen = Boolean(colMenuAnchor);
+    const [searchResetKey, setSearchResetKey] = useState(0);
+    const handleSearchClear = useCallback(()=>{
+        onGlobalFilterChange('');
+        setSearchResetKey((prev)=>prev + 1);
+    }, [
+        onGlobalFilterChange
+    ]);
+    if (!isSearchEnabled && !isColumnFilterEnabled) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        gap: 1,
+        alignItems: "center",
+        justifyContent: "flex-end",
+        width: width,
+        padding: "0.5rem",
+        sx: {
+            backgroundColor: (theme)=>theme.palette.background.default
+        },
+        children: [
+            isSearchEnabled && /*#__PURE__*/ _jsx(TextField, {
+                placeholder: "Search...",
+                value: globalFilter,
+                onChange: onGlobalFilterChange,
+                variant: "standard",
+                slotProps: {
+                    htmlInput: {
+                        'aria-label': 'search table'
+                    },
+                    input: {
+                        startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                            position: "start",
+                            children: /*#__PURE__*/ _jsx(Magnify, {
+                                fontSize: "small"
+                            })
+                        }),
+                        endAdornment: globalFilter !== '' && /*#__PURE__*/ _jsx(InputAdornment, {
+                            position: "end",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                onClick: handleSearchClear,
+                                children: /*#__PURE__*/ _jsx(Close, {
+                                    fontSize: "small"
+                                })
+                            })
+                        })
+                    }
+                },
+                sx: {
+                    flexGrow: 1
+                }
+            }, searchResetKey),
+            isColumnFilterEnabled && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        onClick: (e)=>setColMenuAnchor(e.currentTarget),
+                        "aria-haspopup": "listbox",
+                        "aria-expanded": colMenuOpen,
+                        color: "info",
+                        children: /*#__PURE__*/ _jsx(ViewColumn, {})
+                    }),
+                    /*#__PURE__*/ _jsx(Menu, {
+                        anchorEl: colMenuAnchor,
+                        open: colMenuOpen,
+                        onClose: ()=>setColMenuAnchor(null),
+                        slotProps: {
+                            list: {
+                                dense: true
+                            }
+                        },
+                        sx: {
+                            maxHeight: columnFilterMenuMaxHeight
+                        },
+                        children: columns.map((column)=>{
+                            const header = column.columnDef.header;
+                            const label = typeof header === 'string' ? header : column.id;
+                            return /*#__PURE__*/ _jsxs(MenuItem, {
+                                disabled: !column.getCanHide(),
+                                onClick: column.getCanHide() ? column.getToggleVisibilityHandler() : undefined,
+                                dense: true,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                        checked: column.getIsVisible(),
+                                        disabled: !column.getCanHide(),
+                                        size: "small",
+                                        disableRipple: true,
+                                        sx: {
+                                            p: 0,
+                                            mr: 1
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(ListItemText, {
+                                        primary: label
+                                    })
+                                ]
+                            }, column.id);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TableToolbar.js.map

package/dist/Table/TableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/TableToolbar.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, IconButton, InputAdornment, ListItemText, Menu, MenuItem, Stack } from '@mui/material';\nimport { Column } from '@tanstack/react-table';\nimport { ReactElement, useCallback, useState } from 'react';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport Close from 'mdi-material-ui/Close';\nimport ViewColumn from 'mdi-material-ui/ViewColumn';\nimport { TextField } from '../controls';\n\nexport interface TableToolbarProps<TableData> {\n  /**\n   * When `true`, a search input is rendered.\n   */\n  isSearchEnabled?: boolean;\n\n  /**\n   * Current value of the global filter / search query.\n   */\n  globalFilter: string;\n\n  /**\n   * Callback fired when the search query changes.\n   */\n  onGlobalFilterChange: (value: string) => void;\n\n  /**\n   * When `true`, a \"Columns\" button is rendered that opens a column visibility dropdown.\n   */\n  isColumnFilterEnabled?: boolean;\n\n  /**\n   * All columns from the table instance, used to build the visibility menu.\n   */\n  columns: Array<Column<TableData>>;\n  /**\n   * The width of the toolbar, used to determine when to switch to a more compact layout.\n   */\n  width: number | string;\n\n  /**\n   * Max height for the column filter menu.\n   */\n  columnFilterMenuMaxHeight?: number | string;\n}\n\nexport function TableToolbar<TableData>({\n  isSearchEnabled,\n  globalFilter,\n  onGlobalFilterChange,\n  isColumnFilterEnabled,\n  columns,\n  width,\n  columnFilterMenuMaxHeight = 400,\n}: TableToolbarProps<TableData>): ReactElement | null {\n  const [colMenuAnchor, setColMenuAnchor] = useState<null | HTMLElement>(null);\n  const colMenuOpen = Boolean(colMenuAnchor);\n  const [searchResetKey, setSearchResetKey] = useState(0);\n\n  const handleSearchClear = useCallback(() => {\n    onGlobalFilterChange('');\n    setSearchResetKey((prev) => prev + 1);\n  }, [onGlobalFilterChange]);\n\n  if (!isSearchEnabled && !isColumnFilterEnabled) {\n    return null;\n  }\n\n  return (\n    <Stack\n      direction=\"row\"\n      gap={1}\n      alignItems=\"center\"\n      justifyContent=\"flex-end\"\n      width={width}\n      padding=\"0.5rem\"\n      sx={{ backgroundColor: (theme) => theme.palette.background.default }}\n    >\n      {isSearchEnabled && (\n        <TextField\n          key={searchResetKey}\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={onGlobalFilterChange}\n          variant=\"standard\"\n          slotProps={{\n            htmlInput: { 'aria-label': 'search table' },\n            input: {\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <Magnify fontSize=\"small\" />\n                </InputAdornment>\n              ),\n              endAdornment: globalFilter !== '' && (\n                <InputAdornment position=\"end\">\n                  <IconButton onClick={handleSearchClear}>\n                    <Close fontSize=\"small\" />\n                  </IconButton>\n                </InputAdornment>\n              ),\n            },\n          }}\n          sx={{ flexGrow: 1 }}\n        />\n      )}\n      {isColumnFilterEnabled && (\n        <>\n          <IconButton\n            onClick={(e) => setColMenuAnchor(e.currentTarget)}\n            aria-haspopup=\"listbox\"\n            aria-expanded={colMenuOpen}\n            color=\"info\"\n          >\n            <ViewColumn />\n          </IconButton>\n          <Menu\n            anchorEl={colMenuAnchor}\n            open={colMenuOpen}\n            onClose={() => setColMenuAnchor(null)}\n            slotProps={{ list: { dense: true } }}\n            sx={{ maxHeight: columnFilterMenuMaxHeight }}\n          >\n            {columns.map((column) => {\n              const header = column.columnDef.header;\n              const label = typeof header === 'string' ? header : column.id;\n              return (\n                <MenuItem\n                  key={column.id}\n                  disabled={!column.getCanHide()}\n                  onClick={column.getCanHide() ? column.getToggleVisibilityHandler() : undefined}\n                  dense\n                >\n                  <Checkbox\n                    checked={column.getIsVisible()}\n                    disabled={!column.getCanHide()}\n                    size=\"small\"\n                    disableRipple\n                    sx={{ p: 0, mr: 1 }}\n                  />\n                  <ListItemText primary={label} />\n                </MenuItem>\n              );\n            })}\n          </Menu>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Checkbox","IconButton","InputAdornment","ListItemText","Menu","MenuItem","Stack","useCallback","useState","Magnify","Close","ViewColumn","TextField","TableToolbar","isSearchEnabled","globalFilter","onGlobalFilterChange","isColumnFilterEnabled","columns","width","columnFilterMenuMaxHeight","colMenuAnchor","setColMenuAnchor","colMenuOpen","Boolean","searchResetKey","setSearchResetKey","handleSearchClear","prev","direction","gap","alignItems","justifyContent","padding","sx","backgroundColor","theme","palette","background","default","placeholder","value","onChange","variant","slotProps","htmlInput","input","startAdornment","position","fontSize","endAdornment","onClick","flexGrow","e","currentTarget","aria-haspopup","aria-expanded","color","anchorEl","open","onClose","list","dense","maxHeight","map","column","header","columnDef","label","id","disabled","getCanHide","getToggleVisibilityHandler","undefined","checked","getIsVisible","size","disableRipple","p","mr","primary"],"mappings":"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"}

package/dist/Table/VirtualizedTable.d.ts

@@ -1,5 +1,6 @@
 import { Column, HeaderGroup, Row } from '@tanstack/react-table';
 import { ReactElement } from 'react';
+import { TableToolbarProps } from './TableToolbar';
 import { TableCellConfigs, TableProps } from './model/table-model';
 export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth' | 'defaultColumnHeight'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {
     onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;
@@ -8,6 +9,7 @@ export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableDat
     headers: Array<HeaderGroup<TableData>>;
     cellConfigs?: TableCellConfigs;
     rowCount: number;
+    toolbarConfig: Pick<TableToolbarProps<TableData>, 'isSearchEnabled' | 'globalFilter' | 'onGlobalFilterChange' | 'isColumnFilterEnabled' | 'columns' | 'columnFilterMenuMaxHeight'>;
 };
-export declare function VirtualizedTable<TableData>({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, }: VirtualizedTableProps<TableData>): ReactElement;
+export declare function VirtualizedTable<TableData>({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig, }: VirtualizedTableProps<TableData>): ReactElement;
 //# sourceMappingURL=VirtualizedTable.d.ts.map

package/dist/Table/VirtualizedTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAAmB,YAAY,EAAE,MAAM,OAAO,CAAC;AAQtD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAStF,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,GAAG,qBAAqB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,QAAQ,GACT,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAsPjD"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAc,WAAW,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAQjE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAStF,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,GAAG,qBAAqB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,IAAI,CACjB,iBAAiB,CAAC,SAAS,CAAC,EAC1B,iBAAiB,GACjB,cAAc,GACd,sBAAsB,GACtB,uBAAuB,GACvB,SAAS,GACT,2BAA2B,CAC9B,CAAC;CACH,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,aAAa,GACd,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAyPjD"}

package/dist/Table/VirtualizedTable.js

@@ -10,11 +10,12 @@
 // 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 { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { flexRender } from '@tanstack/react-table';
 import { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';
 import { TableVirtuoso } from 'react-virtuoso';
-import { useRef, useMemo } from 'react';
+import { useMemo, useRef } from 'react';
+import { TableToolbar } from './TableToolbar';
 import { TableRow } from './TableRow';
 import { TableBody } from './TableBody';
 import { InnerTable } from './InnerTable';
@@ -27,7 +28,7 @@ import { TableFoot } from './TableFoot';
 // Separating out the virtualized table because we may want a paginated table
 // in the future that does not need virtualization, and we'd likely lay them
 // out differently.
-export function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount }) {
+export function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig }) {
     const virtuosoRef = useRef(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -115,129 +116,139 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, d
             pageSize: parseInt(event.target.value, 10)
         });
     };
-    return /*#__PURE__*/ _jsx(Box, {
-        style: {
-            width,
-            height
-        },
-        children: /*#__PURE__*/ _jsx(TableVirtuoso, {
-            ref: virtuosoRef,
-            totalCount: rows.length,
-            components: VirtuosoTableComponents,
-            // Note: this value is impacted by overscan. See this issue if overscan
-            // is added.
-            // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138
-            rangeChanged: setVisibleRange,
-            fixedHeaderContent: ()=>{
-                return /*#__PURE__*/ _jsx(_Fragment, {
-                    children: headers.map((headerGroup)=>{
-                        return /*#__PURE__*/ _jsx(TableRow, {
-                            density: density,
-                            children: headerGroup.headers.map((header, i, headers)=>{
-                                const column = header.column;
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: /*#__PURE__*/ _jsxs(Box, {
+            style: {
+                width,
+                height,
+                display: 'flex',
+                flexDirection: 'column'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(TableToolbar, {
+                    ...toolbarConfig,
+                    width: width
+                }),
+                /*#__PURE__*/ _jsx(TableVirtuoso, {
+                    ref: virtuosoRef,
+                    totalCount: rows.length,
+                    components: VirtuosoTableComponents,
+                    // Note: this value is impacted by overscan. See this issue if overscan
+                    // is added.
+                    // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138
+                    rangeChanged: setVisibleRange,
+                    fixedHeaderContent: ()=>{
+                        return /*#__PURE__*/ _jsx(_Fragment, {
+                            children: headers.map((headerGroup)=>{
+                                return /*#__PURE__*/ _jsx(TableRow, {
+                                    density: density,
+                                    children: headerGroup.headers.map((header, i, headers)=>{
+                                        const column = header.column;
+                                        const position = {
+                                            row: 0,
+                                            column: i
+                                        };
+                                        const isSorted = column.getIsSorted();
+                                        const nextSorting = column.getNextSortingOrder();
+                                        return /*#__PURE__*/ _jsx(TableHeaderCell, {
+                                            onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
+                                            sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
+                                            nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
+                                            width: column.getSize() || defaultColumnWidth,
+                                            defaultColumnHeight: defaultColumnHeight,
+                                            align: column.columnDef.meta?.align,
+                                            variant: "head",
+                                            density: density,
+                                            description: column.columnDef.meta?.headerDescription,
+                                            focusState: getFocusState(position),
+                                            onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                            isFirstColumn: i === 0,
+                                            isLastColumn: i === headers.length - 1,
+                                            children: flexRender(column.columnDef.header, header.getContext())
+                                        }, header.id);
+                                    })
+                                }, headerGroup.id);
+                            })
+                        });
+                    },
+                    fixedFooterContent: pagination ? ()=>/*#__PURE__*/ _jsx(MuiTableRow, {
+                            sx: {
+                                backgroundColor: (theme)=>theme.palette.background.default
+                            },
+                            children: /*#__PURE__*/ _jsx(TablePagination, {
+                                colSpan: columns.length,
+                                count: rowCount,
+                                page: pagination.pageIndex,
+                                rowsPerPage: pagination.pageSize,
+                                onPageChange: handleChangePage,
+                                onRowsPerPageChange: handleChangeRowsPerPage
+                            })
+                        }) : undefined,
+                    itemContent: (index)=>{
+                        const row = rows[index];
+                        if (!row) {
+                            return null;
+                        }
+                        return /*#__PURE__*/ _jsx(_Fragment, {
+                            children: row.getVisibleCells().map((cell, i, cells)=>{
                                 const position = {
-                                    row: 0,
+                                    row: index + 1,
                                     column: i
                                 };
-                                const isSorted = column.getIsSorted();
-                                const nextSorting = column.getNextSortingOrder();
-                                return /*#__PURE__*/ _jsx(TableHeaderCell, {
-                                    onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
-                                    sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
-                                    nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
-                                    width: column.getSize() || defaultColumnWidth,
+                                const cellContext = cell.getContext();
+                                const cellConfig = cellConfigs?.[cellContext.cell.id];
+                                const cellRenderFn = cell.column.columnDef.cell;
+                                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
+                                /*
+                     IMPORTANT:
+                     If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)
+                     Components have no access to any context (Which is intentional and correct)
+                     We may want to add parameters to a link from neighboring cells in the future as well.
+                     If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)
+                  */ const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
+                                let description = undefined;
+                                if (typeof cellDescriptionDef === 'function') {
+                                    // If the cell description is a function, set the value using
+                                    // the function.
+                                    description = cellDescriptionDef(cellContext);
+                                } else if (cellDescriptionDef && typeof cellContent === 'string') {
+                                    // If the cell description is `true` AND the cell content is
+                                    // a string (and thus viable as a `title` attribute), use the
+                                    // cell content.
+                                    description = cellContent;
+                                }
+                                /* this has been specifically added for the data link,
+                     therefore, non string and numeric values should be excluded
+                  */ const adjacentCellsValuesMap = Object.entries(row.original)?.filter(([_, value])=>[
+                                        'string',
+                                        'number'
+                                    ].includes(typeof value)).reduce((acc, [key, value])=>({
+                                        ...acc,
+                                        [key]: String(value)
+                                    }), {});
+                                return /*#__PURE__*/ _jsx(TableCell, {
+                                    "data-testid": cell.id,
+                                    title: description || cellConfig?.text || cellContent,
+                                    width: cell.column.getSize() || defaultColumnWidth,
                                     defaultColumnHeight: defaultColumnHeight,
-                                    align: column.columnDef.meta?.align,
-                                    variant: "head",
+                                    align: cell.column.columnDef.meta?.align,
                                     density: density,
-                                    description: column.columnDef.meta?.headerDescription,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                                     isFirstColumn: i === 0,
-                                    isLastColumn: i === headers.length - 1,
-                                    children: flexRender(column.columnDef.header, header.getContext())
-                                }, header.id);
+                                    isLastColumn: i === cells.length - 1,
+                                    description: description,
+                                    color: cellConfig?.textColor ?? undefined,
+                                    backgroundColor: cellConfig?.backgroundColor ?? undefined,
+                                    dataLink: cell.column.columnDef.meta?.dataLink,
+                                    adjacentCellsValuesMap: adjacentCellsValuesMap,
+                                    children: cellConfig?.text || cellContent
+                                }, cell.id);
                             })
-                        }, headerGroup.id);
-                    })
-                });
-            },
-            fixedFooterContent: pagination ? ()=>/*#__PURE__*/ _jsx(MuiTableRow, {
-                    sx: {
-                        backgroundColor: (theme)=>theme.palette.background.default
-                    },
-                    children: /*#__PURE__*/ _jsx(TablePagination, {
-                        colSpan: columns.length,
-                        count: rowCount,
-                        page: pagination.pageIndex,
-                        rowsPerPage: pagination.pageSize,
-                        onPageChange: handleChangePage,
-                        onRowsPerPageChange: handleChangeRowsPerPage
-                    })
-                }) : undefined,
-            itemContent: (index)=>{
-                const row = rows[index];
-                if (!row) {
-                    return null;
-                }
-                return /*#__PURE__*/ _jsx(_Fragment, {
-                    children: row.getVisibleCells().map((cell, i, cells)=>{
-                        const position = {
-                            row: index + 1,
-                            column: i
-                        };
-                        const cellContext = cell.getContext();
-                        const cellConfig = cellConfigs?.[cellContext.cell.id];
-                        const cellRenderFn = cell.column.columnDef.cell;
-                        const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
-                        /* 
-                   IMPORTANT:
-                   If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)
-                   Components have no access to any context (Which is intentional and correct)
-                   We may want to add parameters to a link from neighboring cells in the future as well.
-                   If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)
-                */ const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
-                        let description = undefined;
-                        if (typeof cellDescriptionDef === 'function') {
-                            // If the cell description is a function, set the value using
-                            // the function.
-                            description = cellDescriptionDef(cellContext);
-                        } else if (cellDescriptionDef && typeof cellContent === 'string') {
-                            // If the cell description is `true` AND the cell content is
-                            // a string (and thus viable as a `title` attribute), use the
-                            // cell content.
-                            description = cellContent;
-                        }
-                        /* this has been specifically added for the data link, 
-                   therefore, non string and numeric values should be excluded
-                */ const adjacentCellsValuesMap = Object.entries(row.original)?.filter(([_, value])=>[
-                                'string',
-                                'number'
-                            ].includes(typeof value)).reduce((acc, [key, value])=>({
-                                ...acc,
-                                [key]: String(value)
-                            }), {});
-                        return /*#__PURE__*/ _jsx(TableCell, {
-                            "data-testid": cell.id,
-                            title: description || cellConfig?.text || cellContent,
-                            width: cell.column.getSize() || defaultColumnWidth,
-                            defaultColumnHeight: defaultColumnHeight,
-                            align: cell.column.columnDef.meta?.align,
-                            density: density,
-                            focusState: getFocusState(position),
-                            onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
-                            isFirstColumn: i === 0,
-                            isLastColumn: i === cells.length - 1,
-                            description: description,
-                            color: cellConfig?.textColor ?? undefined,
-                            backgroundColor: cellConfig?.backgroundColor ?? undefined,
-                            dataLink: cell.column.columnDef.meta?.dataLink,
-                            adjacentCellsValuesMap: adjacentCellsValuesMap,
-                            children: cellConfig?.text || cellContent
-                        }, cell.id);
-                    })
-                });
-            }
+                        });
+                    }
+                })
+            ]
         })
     });
 }