material-react-table 2.0.0-beta.0 → 2.0.0-beta.2

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

@@ -1,5 +1,5 @@
 import { type Dispatch, type MutableRefObject, type ReactNode, type RefObject, type SetStateAction } from 'react';
-import { type AggregationFn, type Cell, type Column, type ColumnDef, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingInfoState, type ColumnSizingState, type DeepKeys, type ExpandedState, type FilterFn, type GroupingState, type Header, type HeaderGroup, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingFn, type SortingState, type Table, type TableOptions, type TableState, type Updater, type VisibilityState } from '@tanstack/react-table';
+import { type AccessorFn, type AggregationFn, type Cell, type Column, type ColumnDef, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingInfoState, type ColumnSizingState, type DeepKeys, type DeepValue, type ExpandedState, type FilterFn, type GroupingState, type Header, type HeaderGroup, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingFn, type SortingState, type Table, type TableOptions, type TableState, type Updater, type VisibilityState } from '@tanstack/react-table';
 import { type VirtualItem, type Virtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
 import { type AlertProps } from '@mui/material/Alert';
 import { type AutocompleteProps } from '@mui/material/Autocomplete';
@@ -41,7 +41,13 @@ export type Xor<A, B> = Prettify<A & {
 }>;
 export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
 export type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;
+export type MRT_RowData = Record<string, any>;
 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 type MRT_ColumnHelper<TData extends MRT_RowData> = {
+    accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: MRT_DisplayColumnDef<TData, TValue>) => MRT_ColumnDef<TData, TValue>;
+    display: (column: MRT_DisplayColumnDef<TData>) => MRT_ColumnDef<TData>;
+    group: (column: MRT_GroupColumnDef<TData>) => MRT_ColumnDef<TData>;
+};
 export interface MRT_Localization {
     actions: string;
     and: string;
@@ -133,14 +139,14 @@ export interface MRT_Localization {
     unpin: string;
     unpinAll: string;
 }
-export interface MRT_RowModel<TData extends Record<string, any>> {
+export interface MRT_RowModel<TData extends MRT_RowData> {
     flatRows: MRT_Row<TData>[];
     rows: MRT_Row<TData>[];
     rowsById: {
         [key: string]: MRT_Row<TData>;
     };
 }
-export type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'> & {
+export type MRT_TableInstance<TData extends MRT_RowData> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'> & {
     getAllColumns: () => MRT_Column<TData>[];
     getAllFlatColumns: () => MRT_Column<TData>[];
     getAllLeafColumns: () => MRT_Column<TData>[];
@@ -189,11 +195,11 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TD
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
     setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 };
-export type MRT_DefinedTableOptions<TData extends Record<string, any>> = MRT_TableOptions<TData> & {
+export type MRT_DefinedTableOptions<TData extends MRT_RowData> = MRT_TableOptions<TData> & {
     icons: MRT_Icons;
     localization: MRT_Localization;
 };
-export type MRT_TableState<TData extends Record<string, any>> = TableState & {
+export type MRT_TableState<TData extends MRT_RowData> = TableState & {
     columnFilterFns: MRT_ColumnFilterFnsState;
     creatingRow: MRT_Row<TData> | null;
     density: MRT_DensityState;
@@ -215,52 +221,52 @@ export type MRT_TableState<TData extends Record<string, any>> = TableState & {
     showSkeletons: boolean;
     showToolbarDropZone: boolean;
 };
-export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TData, unknown>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
+export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef<TData, TValue>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
     AggregatedCell?: (props: {
-        cell: MRT_Cell<TData>;
-        column: MRT_Column<TData>;
+        cell: MRT_Cell<TData, TValue>;
+        column: MRT_Column<TData, TValue>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     Cell?: (props: {
-        cell: MRT_Cell<TData>;
-        column: MRT_Column<TData>;
-        renderedCellValue: ReactNode | number | string;
+        cell: MRT_Cell<TData, TValue>;
+        column: MRT_Column<TData, TValue>;
+        renderedCellValue: ReactNode;
         row: MRT_Row<TData>;
         rowRef?: RefObject<HTMLTableRowElement>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     Edit?: (props: {
-        cell: MRT_Cell<TData>;
-        column: MRT_Column<TData>;
+        cell: MRT_Cell<TData, TValue>;
+        column: MRT_Column<TData, TValue>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     Filter?: (props: {
-        column: MRT_Column<TData>;
+        column: MRT_Column<TData, TValue>;
         header: MRT_Header<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     Footer?: ((props: {
-        column: MRT_Column<TData>;
+        column: MRT_Column<TData, TValue>;
         footer: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode) | ReactNode;
     GroupedCell?: (props: {
-        cell: MRT_Cell<TData>;
-        column: MRT_Column<TData>;
+        cell: MRT_Cell<TData, TValue>;
+        column: MRT_Column<TData, TValue>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     Header?: ((props: {
-        column: MRT_Column<TData>;
+        column: MRT_Column<TData, TValue>;
         header: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode) | ReactNode;
     PlaceholderCell?: (props: {
-        cell: MRT_Cell<TData>;
-        column: MRT_Column<TData>;
+        cell: MRT_Cell<TData, TValue>;
+        column: MRT_Column<TData, TValue>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
@@ -270,7 +276,7 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
      *
      * @example accessorFn: (row) => row.username
      */
-    accessorFn?: (originalRow: TData) => any;
+    accessorFn?: (originalRow: TData) => TValue;
     /**
      * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
      * Specify which key in the row this column should use to access the correct data.
@@ -291,7 +297,7 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
      */
     columnDefType?: 'data' | 'display' | 'group';
     columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
-    columns?: MRT_ColumnDef<TData>[];
+    columns?: MRT_ColumnDef<TData, TValue>[];
     editSelectOptions?: ({
         text: string;
         value: any;
@@ -337,13 +343,13 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
         table: MRT_TableInstance<TData>;
     }) => IconButtonProps) | IconButtonProps;
     muiCopyButtonProps?: ((props: {
-        cell: MRT_Cell<TData>;
+        cell: MRT_Cell<TData, TValue>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ButtonProps) | ButtonProps;
     muiEditTextFieldProps?: ((props: {
-        cell: MRT_Cell<TData>;
+        cell: MRT_Cell<TData, TValue>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -371,7 +377,7 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
         table: MRT_TableInstance<TData>;
     }) => TextFieldProps) | TextFieldProps;
     muiTableBodyCellProps?: ((props: {
-        cell: MRT_Cell<TData>;
+        cell: MRT_Cell<TData, TValue>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -398,40 +404,44 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
     }) => ReactNode[];
     sortingFn?: MRT_SortingFn<TData>;
 };
-export type MRT_DefinedColumnDef<TData extends Record<string, any>> = Omit<MRT_ColumnDef<TData>, 'defaultDisplayColumn' | 'id'> & {
+export type MRT_DisplayColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<MRT_ColumnDef<TData, TValue>, 'accessorFn' | 'accessorKey'>;
+export type MRT_GroupColumnDef<TData extends MRT_RowData> = MRT_DisplayColumnDef<TData, any> & {
+    columns: MRT_ColumnDef<TData>[];
+};
+export type MRT_DefinedColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<MRT_ColumnDef<TData, TValue>, 'defaultDisplayColumn' | 'id'> & {
     _filterFn: MRT_FilterOption;
-    defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
+    defaultDisplayColumn: Partial<MRT_ColumnDef<TData, TValue>>;
     id: string;
 };
-export type MRT_Column<TData extends Record<string, any>> = Omit<Column<TData, unknown>, 'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header'> & {
-    columnDef: MRT_DefinedColumnDef<TData>;
-    columns?: MRT_Column<TData>[];
+export type MRT_Column<TData extends MRT_RowData, TValue = unknown> = Omit<Column<TData, TValue>, 'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header'> & {
+    columnDef: MRT_DefinedColumnDef<TData, TValue>;
+    columns?: MRT_Column<TData, TValue>[];
     filterFn?: MRT_FilterFn<TData>;
     footer: string;
     header: string;
 };
-export type MRT_Header<TData extends Record<string, any>> = Omit<Header<TData, unknown>, 'column'> & {
+export type MRT_Header<TData extends MRT_RowData> = Omit<Header<TData, unknown>, 'column'> & {
     column: MRT_Column<TData>;
 };
-export type MRT_HeaderGroup<TData extends Record<string, any>> = Omit<HeaderGroup<TData>, 'headers'> & {
+export type MRT_HeaderGroup<TData extends MRT_RowData> = Omit<HeaderGroup<TData>, 'headers'> & {
     headers: MRT_Header<TData>[];
 };
-export type MRT_Row<TData extends Record<string, any>> = Omit<Row<TData>, '_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows'> & {
+export type MRT_Row<TData extends MRT_RowData> = Omit<Row<TData>, '_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows'> & {
     _valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     getAllCells: () => MRT_Cell<TData>[];
     getVisibleCells: () => MRT_Cell<TData>[];
     subRows?: MRT_Row<TData>[];
 };
-export type MRT_Cell<TData extends Record<string, any>> = Omit<Cell<TData, unknown>, 'column' | 'row'> & {
-    column: MRT_Column<TData>;
+export type MRT_Cell<TData extends MRT_RowData, TValue = unknown> = Omit<Cell<TData, TValue>, 'column' | 'row'> & {
+    column: MRT_Column<TData, TValue>;
     row: MRT_Row<TData>;
 };
 export type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
-export type MRT_AggregationFn<TData extends Record<string, any>> = AggregationFn<TData> | MRT_AggregationOption;
+export type MRT_AggregationFn<TData extends MRT_RowData> = AggregationFn<TData> | MRT_AggregationOption;
 export type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingFns>;
-export type MRT_SortingFn<TData extends Record<string, any>> = MRT_SortingOption | SortingFn<TData>;
+export type MRT_SortingFn<TData extends MRT_RowData> = MRT_SortingOption | SortingFn<TData>;
 export type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
-export type MRT_FilterFn<TData extends Record<string, any>> = FilterFn<TData> | MRT_FilterOption;
+export type MRT_FilterFn<TData extends MRT_RowData> = FilterFn<TData> | MRT_FilterOption;
 export type MRT_InternalFilterOption = {
     divider: boolean;
     label: string;
@@ -448,7 +458,7 @@ export type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row
  * See the full props list on the official docs site:
  * @link https://www.material-react-table.com/docs/api/props
  */
-export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
+export type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
     columnFilterDisplayMode?: 'custom' | 'popover' | 'subheader';
     columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     columnVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableCellElement> | null>;
@@ -465,7 +475,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
      * See all Columns Options on the official docs site:
      * @link https://www.material-react-table.com/docs/api/column-options
      */
-    columns: MRT_ColumnDef<TData>[];
+    columns: MRT_ColumnDef<TData, any>[];
     createDisplayMode?: 'custom' | 'modal' | 'row';
     /**
      * Pass your data as an array of objects. Objects can theoretically be any shape, but it's best to keep them consistent.

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

@@ -1,2 +1,2 @@
-import { type MRT_TableInstance, type MRT_TableOptions } from './types';
-export declare const useMaterialReactTable: <TData extends Record<string, any>>(tableOptions: MRT_TableOptions<TData>) => MRT_TableInstance<TData>;
+import { type MRT_RowData, type MRT_TableInstance, type MRT_TableOptions } from './types';
+export declare const useMaterialReactTable: <TData extends MRT_RowData>(tableOptions: MRT_TableOptions<TData>) => MRT_TableInstance<TData>;

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

@@ -405,6 +405,17 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
     }
     return newIndexs;
 };
+function createMRTColumnHelper() {
+    return {
+        accessor: (accessor, column) => {
+            return typeof accessor === 'function'
+                ? Object.assign(Object.assign({}, column), { accessorFn: accessor })
+                : Object.assign(Object.assign({}, column), { accessorKey: accessor });
+        },
+        display: (column) => column,
+        group: (column) => column,
+    };
+}
 
 const MRT_GrabHandleButton = ({ iconButtonProps, location, onDragEnd, onDragStart, table, }) => {
     var _a;
@@ -530,11 +541,11 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
-            ? column.columnDef.header
+        }, label: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
+            ? columnDef.header
             : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? columnDef.header
-            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
+            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign({ disableUnderline: editDisplayMode === 'table' }, textFieldProps.InputProps), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
@@ -562,7 +573,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
     var _a, _b, _c, _d;
     const theme = useTheme();
     const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
+    const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -599,12 +610,19 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
         const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
         const isFirstColumn = getIsFirstColumn(column, table);
         const isLastColumn = getIsLastColumn(column, table);
-        const isLastRow = rowIndex === numRows - 1;
-        const borderStyle = isDraggingColumn || isDraggingRow
-            ? `1px dashed ${theme.palette.text.secondary} !important`
-            : isHoveredColumn || isHoveredRow
-                ? `2px dashed ${theme.palette.primary.main} !important`
-                : undefined;
+        const isLastRow = numRows && rowIndex === numRows - 1;
+        const borderStyle = columnSizingInfo.isResizingColumn === column.id
+            ? `2px solid ${theme.palette.primary.main} !important`
+            : isDraggingColumn || isDraggingRow
+                ? `1px dashed ${theme.palette.text.secondary} !important`
+                : isHoveredColumn ||
+                    isHoveredRow ||
+                    columnSizingInfo.isResizingColumn === column.id
+                    ? `2px dashed ${theme.palette.primary.main} !important`
+                    : undefined;
+        if (columnSizingInfo.isResizingColumn === column.id) {
+            return { borderRight: borderStyle };
+        }
         return borderStyle
             ? {
                 borderBottom: isDraggingRow || isHoveredRow || isLastRow
@@ -623,7 +641,14 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                 borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
             }
             : undefined;
-    }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
+    }, [
+        columnSizingInfo.isResizingColumn,
+        draggingColumn,
+        draggingRow,
+        hoveredColumn,
+        hoveredRow,
+        rowIndex,
+    ]);
     const isEditable = parseFromValuesOrFunc(enableEditing, row) &&
         parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
     const isEditing = isEditable &&
@@ -730,7 +755,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
                     : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
         }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
                     ? lighten(theme.palette.background.default, 0.05)
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
+                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : 'table-cell', py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
@@ -850,8 +875,8 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
 
 const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     var _a, _b, _c, _d, _e, _f;
-    const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
-    const { columnFilters, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
+    const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
+    const { columnFilters, creatingRow, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
     const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
@@ -934,44 +959,44 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                         virtualPaddingRight,
                     };
                     return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-                }) }))), jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
+                }) }))), jsxs(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
                         ? `${rowVirtualizer.getTotalSize()}px`
-                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsx("tr", { style: {
-                        display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
-                    }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                            display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
-                                ? 'grid'
-                                : 'table-cell',
-                        }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsx(Typography, { sx: {
-                                color: 'text.secondary',
-                                fontStyle: 'italic',
-                                maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
-                                py: '2rem',
-                                textAlign: 'center',
-                                width: '100%',
-                            }, children: globalFilter || columnFilters.length
-                                ? localization.noResultsFound
-                                : localization.noRecordsToDisplay })) }) })) : (jsx(Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
-                        const row = rowVirtualizer
-                            ? rows[rowOrVirtualRow.index]
-                            : rowOrVirtualRow;
-                        const props = {
-                            columnVirtualizer,
-                            measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                            numRows: rows.length,
-                            pinnedRowIds,
-                            row,
-                            rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
-                            table,
-                            virtualColumns,
-                            virtualPaddingLeft,
-                            virtualPaddingRight,
-                            virtualRow: rowVirtualizer
-                                ? rowOrVirtualRow
-                                : undefined,
-                        };
-                        return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-                    }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [creatingRow && createDisplayMode === 'row' && (jsx(MRT_TableBodyRow, { row: creatingRow, rowIndex: -1, table: table })), (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsx("tr", { style: {
+                            display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+                        }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
+                                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
+                                    ? 'grid'
+                                    : 'table-cell',
+                            }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsx(Typography, { sx: {
+                                    color: 'text.secondary',
+                                    fontStyle: 'italic',
+                                    maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
+                                    py: '2rem',
+                                    textAlign: 'center',
+                                    width: '100%',
+                                }, children: globalFilter || columnFilters.length
+                                    ? localization.noResultsFound
+                                    : localization.noRecordsToDisplay })) }) })) : (jsx(Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+                            const row = rowVirtualizer
+                                ? rows[rowOrVirtualRow.index]
+                                : rowOrVirtualRow;
+                            const props = {
+                                columnVirtualizer,
+                                measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                                numRows: rows.length,
+                                pinnedRowIds,
+                                row,
+                                rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
+                                table,
+                                virtualColumns,
+                                virtualPaddingLeft,
+                                virtualPaddingRight,
+                                virtualRow: rowVirtualizer
+                                    ? rowOrVirtualRow
+                                    : undefined,
+                            };
+                            return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                        }) })))] })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
                 getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
                     const props = {
                         columnVirtualizer,
@@ -1615,11 +1640,13 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
             ? undefined
             : filterPlaceholder, variant: 'standard' }, textFieldProps), { sx: (theme) => (Object.assign({ minWidth: isDateFilter
                 ? '160px'
-                : isRangeFilter
-                    ? '100px'
-                    : !filterChipLabel
-                        ? '120px'
-                        : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
+                : enableColumnFilterModes && rangeFilterIndex === 0
+                    ? '110px'
+                    : isRangeFilter
+                        ? '100px'
+                        : !filterChipLabel
+                            ? '120px'
+                            : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
     return (jsxs(Fragment, { children: [isDateFilter ? (jsx(DatePicker, Object.assign({ onChange: (newDate) => {
                     handleChange(newDate);
                 }, value: filterValue || null }, datePickerProps, { slotProps: {
@@ -1863,13 +1890,17 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
         }, sx: (theme) => ({
             '&:active > hr': {
                 backgroundColor: theme.palette.info.main,
-                opacity: 1,
+                opacity: header.subHeaders.length ? 1 : 0,
             },
             cursor: 'col-resize',
-            mr: density === 'compact' ? '-0.75rem' : '-1rem',
+            mr: density === 'compact'
+                ? '-12px'
+                : density === 'comfortable'
+                    ? '-20px'
+                    : '-28px',
             position: 'absolute',
             px: '4px',
-            right: '4px',
+            right: '0',
         }), children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
@@ -1914,7 +1945,7 @@ const MRT_TableHeadCell = ({ header, table, }) => {
     var _a, _b, _c, _d, _f;
     const theme = useTheme();
     const { getState, options: { columnFilterDisplayMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
-    const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
+    const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -1941,18 +1972,27 @@ const MRT_TableHeadCell = ({ header, table, }) => {
             pl += 1.5;
         return pl;
     }, [showColumnActions, showDragHandle]);
-    const draggingBorder = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
-        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
-            : undefined, [draggingColumn, hoveredColumn]);
-    const draggingBorders = draggingBorder
-        ? {
-            borderLeft: draggingBorder,
-            borderRight: draggingBorder,
-            borderTop: draggingBorder,
+    const draggingBorders = useMemo(() => {
+        const borderStyle = columnSizingInfo.isResizingColumn === column.id &&
+            !header.subHeaders.length
+            ? `2px solid ${theme.palette.primary.main} !important`
+            : (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+                ? `1px dashed ${theme.palette.text.secondary}`
+                : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
+                    ? `2px dashed ${theme.palette.primary.main}`
+                    : undefined;
+        if (columnSizingInfo.isResizingColumn === column.id) {
+            return { borderRight: borderStyle };
         }
-        : undefined;
+        const draggingBorders = borderStyle
+            ? {
+                borderLeft: borderStyle,
+                borderRight: borderStyle,
+                borderTop: borderStyle,
+            }
+            : undefined;
+        return draggingBorders;
+    }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
     const handleDragEnter = (_e) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             setHoveredColumn(null);
@@ -2107,8 +2147,9 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
     return (jsxs(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
+            flexWrap: 'wrap',
             gap: '8px',
-            justifyContent: 'space-between',
+            justifyContent: { md: 'space-between', sm: 'center' },
             justifySelf: 'flex-end',
             mt: position === 'top' &&
                 enableToolbarInternalActions &&
@@ -2119,12 +2160,12 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
             px: '4px',
             py: '12px',
             zIndex: 2,
-        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
+        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
                         first: FirstPageIcon,
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
@@ -2821,7 +2862,7 @@ const MRT_TablePaper = ({ table, }) => {
                 right: 0,
                 top: 0,
                 width: '100vw',
-                zIndex: 10,
+                zIndex: 9999,
             }
             : {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), children: [enableTopToolbar &&
                 ((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
@@ -2872,9 +2913,7 @@ const MRT_ExpandAllButton = ({ table, }) => {
         table,
     });
     const isAllRowsExpanded = getIsAllRowsExpanded();
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
-            ? localization.collapseAll
-            : localization.expandAll, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isAllRowsExpanded ? localization.collapseAll : localization.expandAll), children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
                         transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -2896,9 +2935,7 @@ const MRT_ExpandButton = ({ row, table, }) => {
         row.toggleExpanded();
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
     };
-    return (jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
-            ? localization.collapse
-            : localization.expand, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !renderDetailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
+    return (jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isExpanded ? localization.collapse : localization.expand), children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !renderDetailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
                         transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -3564,5 +3601,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
+export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createMRTColumnHelper, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
 //# sourceMappingURL=material-react-table.esm.js.map