material-react-table 1.8.4 → 1.8.5

package/dist/cjs/types/MaterialReactTable.d.ts

@@ -18,7 +18,7 @@ import type { TablePaginationProps } from '@mui/material/TablePagination';
 import type { TableRowProps } from '@mui/material/TableRow';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { ToolbarProps } from '@mui/material/Toolbar';
-import type { AggregationFn, Cell, Column, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, DeepKeys, ExpandedState, FilterFn, GroupingState, Header, HeaderGroup, OnChangeFn, PaginationState, Row, RowSelectionState, SortingFn, SortingState, Table, TableOptions, TableState, VisibilityState } from '@tanstack/react-table';
+import type { AggregationFn, Cell, Column, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, DeepKeys, ExpandedState, FilterFn, GroupingState, Header, HeaderGroup, OnChangeFn, PaginationState, Row, RowSelectionState, SortingFn, SortingState, Table, TableOptions, TableState, Updater, VisibilityState } from '@tanstack/react-table';
 import type { VirtualizerOptions, Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_FilterFns } from './filterFns';
@@ -33,7 +33,7 @@ type Prettify<T> = {
 } & {};
 type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
-export type { ColumnFiltersState as MRT_ColumnFiltersState, ColumnOrderState as MRT_ColumnOrderState, ColumnPinningState as MRT_ColumnPinningState, ColumnSizingInfoState as MRT_ColumnSizingInfoState, ColumnSizingState as MRT_ColumnSizingState, ExpandedState as MRT_ExpandedState, GroupingState as MRT_GroupingState, PaginationState as MRT_PaginationState, RowSelectionState as MRT_RowSelectionState, SortingState as MRT_SortingState, VirtualItem as MRT_VirtualItem, Virtualizer as MRT_Virtualizer, VirtualizerOptions as MRT_VirtualizerOptions, VisibilityState as MRT_VisibilityState, };
+export type { ColumnFiltersState as MRT_ColumnFiltersState, ColumnOrderState as MRT_ColumnOrderState, ColumnPinningState as MRT_ColumnPinningState, ColumnSizingInfoState as MRT_ColumnSizingInfoState, ColumnSizingState as MRT_ColumnSizingState, ExpandedState as MRT_ExpandedState, GroupingState as MRT_GroupingState, PaginationState as MRT_PaginationState, RowSelectionState as MRT_RowSelectionState, SortingState as MRT_SortingState, Updater as MRT_Updater, VirtualItem as MRT_VirtualItem, Virtualizer as MRT_Virtualizer, VirtualizerOptions as MRT_VirtualizerOptions, VisibilityState as MRT_VisibilityState, };
 export interface MRT_Localization {
     actions: string;
     and: string;
@@ -615,7 +615,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
         table: MRT_TableInstance<TData>;
         headerGroup: MRT_HeaderGroup<TData>;
     }) => TableRowProps);
-    muiTablePaginationProps?: Partial<TablePaginationProps> | ((props: {
+    muiTablePaginationProps?: Partial<Omit<TablePaginationProps, 'rowsPerPage'>> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<TablePaginationProps>);
     muiTablePaperProps?: PaperProps | ((props: {

package/dist/cjs/types/buttons/MRT_ExpandButton.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { MRT_Row, MRT_TableInstance } from '..';
-interface Props {
-    row: MRT_Row;
-    table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ExpandButton: ({ row, table }: Props) => JSX.Element;
+export declare const MRT_ExpandButton: <TData extends Record<string, any> = {}>({ row, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/cjs/types/column.utils.d.ts

@@ -117,12 +117,12 @@ export declare const getCommonCellStyles: ({ column, header, table, tableCellPro
         id: string;
         getContext: () => import("@tanstack/react-table").HeaderContext<{}, unknown>;
         getLeafHeaders: () => import("@tanstack/react-table").Header<{}, unknown>[];
+        colSpan: number;
+        rowSpan: number;
+        index: number;
         depth: number;
         getSize: () => number;
         getStart: (position?: import("@tanstack/react-table").ColumnPinningPosition | undefined) => number;
-        index: number;
-        colSpan: number;
-        rowSpan: number;
         headerGroup: import("@tanstack/react-table").HeaderGroup<{}>;
         subHeaders: import("@tanstack/react-table").Header<{}, unknown>[];
         isPlaceholder: boolean;

package/dist/cjs/types/index.d.ts

@@ -3,20 +3,22 @@ export default MaterialReactTable;
 export * from './MaterialReactTable';
 import type { MRT_Icons } from './icons';
 export type { MRT_Icons };
+import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
 import { MRT_CopyButton } from './buttons/MRT_CopyButton';
 import { MRT_EditActionButtons } from './buttons/MRT_EditActionButtons';
+import { MRT_ExpandButton } from './buttons/MRT_ExpandButton';
 import { MRT_FilterOptionMenu } from './menus/MRT_FilterOptionMenu';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
+import { MRT_GrabHandleButton } from './buttons/MRT_GrabHandleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
 import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
-import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_TopToolbar } from './toolbar/MRT_TopToolbar';
-import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
-export { MRT_CopyButton, MRT_EditActionButtons, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_ToggleRowActionMenuButton, MRT_TopToolbar, MRT_BottomToolbar, };
+export { MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_ExpandButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GrabHandleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, };

package/dist/cjs/types/sortingFns.d.ts

@@ -13,10 +13,10 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
     getValue: <TValue>(columnId: string) => TValue;
     renderValue: <TValue_1>(columnId: string) => TValue_1;
     id: string;
-    getIsGrouped: () => boolean;
-    depth: number;
+    columnFilters: Record<string, boolean>;
     index: number;
     original: TData;
+    depth: number;
     _uniqueValuesCache: Record<string, unknown>;
     getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
     getLeafRows: () => Row<TData>[];
@@ -26,10 +26,10 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
     getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
-    columnFilters: Record<string, boolean>;
     columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
     groupingColumnId?: string | undefined;
     groupingValue?: unknown;
+    getIsGrouped: () => boolean;
     _groupingValuesCache: Record<string, any>;
     getIsSelected: () => boolean;
     getIsSomeSelected: () => boolean;
@@ -71,10 +71,10 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
     getValue: <TValue>(columnId: string) => TValue;
     renderValue: <TValue_1>(columnId: string) => TValue_1;
     id: string;
-    getIsGrouped: () => boolean;
-    depth: number;
+    columnFilters: Record<string, boolean>;
     index: number;
     original: TData;
+    depth: number;
     _uniqueValuesCache: Record<string, unknown>;
     getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
     getLeafRows: () => Row<TData>[];
@@ -84,10 +84,10 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
     getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
-    columnFilters: Record<string, boolean>;
     columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
     groupingColumnId?: string | undefined;
     groupingValue?: unknown;
+    getIsGrouped: () => boolean;
     _groupingValuesCache: Record<string, any>;
     getIsSelected: () => boolean;
     getIsSomeSelected: () => boolean;

package/dist/esm/material-react-table.esm.js

@@ -242,7 +242,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             : getIsFirstRightPinnedColumn(column)
                 ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
                 : undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', flex: table.options.layoutMode === 'grid'
-            ? `var(--col-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) 0 auto`
+            ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) 0 auto`
             : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
@@ -288,12 +288,7 @@ const MRT_DefaultDisplayColumn = {
     enableResizing: false,
     enableSorting: false,
 };
-const parseCSSVarId = (id) => id
-    .replaceAll('.', '_')
-    .replaceAll(' ', '_')
-    .replaceAll('+', '_')
-    .replaceAll('(', '_')
-    .replaceAll(')', '_');
+const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
 
 const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
     const itemRank = rankItem(row.getValue(columnId), filterValue, {
@@ -444,7 +439,7 @@ const MRT_ExpandAllButton = ({ table }) => {
                 } }))))));
 };
 
-const MRT_ExpandButton = ({ row, table }) => {
+const MRT_ExpandButton = ({ row, table, }) => {
     var _a, _b;
     const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
     const { density } = getState();
@@ -1832,7 +1827,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
     const { density } = getState();
     const { column } = header;
-    return (React.createElement(Box, { onDoubleClick: () => {
+    return (React.createElement(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
             setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
             column.resetSize();
         }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
@@ -1850,7 +1845,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
                 ? `translateX(${(_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0}px)`
                 : undefined,
         } },
-        React.createElement(Divider, { flexItem: true, orientation: "vertical", sx: {
+        React.createElement(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
                 height: '24px',
@@ -2671,9 +2666,9 @@ const MRT_Table = ({ table }) => {
         const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
-            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = header.getSize();
-            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] =
-                header.column.getSize();
+            const colSize = header.getSize();
+            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
         }
         return colSizes;
     }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
@@ -3109,5 +3104,5 @@ const MaterialReactTable = (_a) => {
     return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
+export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_ExpandButton, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
 //# sourceMappingURL=material-react-table.esm.js.map