material-react-table 1.11.2 → 1.11.4

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

@@ -33,6 +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 MRT_FilterFnsState = Record<string, MRT_FilterOption>;
 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;
@@ -162,9 +163,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Prettify
         tablePaperRef: MutableRefObject<HTMLDivElement>;
         topToolbarRef: MutableRefObject<HTMLDivElement>;
     };
-    setColumnFilterFns: Dispatch<SetStateAction<{
-        [key: string]: MRT_FilterOption;
-    }>>;
+    setColumnFilterFns: Dispatch<SetStateAction<MRT_FilterFnsState>>;
     setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
     setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
     setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
@@ -184,7 +183,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Prettify
     setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 }>;
 export type MRT_TableState<TData extends Record<string, any> = {}> = Prettify<TableState & {
-    columnFilterFns: Record<string, MRT_FilterOption>;
+    columnFilterFns: MRT_FilterFnsState;
     density: MRT_DensityState;
     draggingColumn: MRT_Column<TData> | null;
     draggingRow: MRT_Row<TData> | null;

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

@@ -0,0 +1,2 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_HU: MRT_Localization;

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

@@ -9,9 +9,10 @@ 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_GrabHandleButton } from './buttons/MRT_GrabHandleButton';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
+import { MRT_TableHeadCellFilterContainer } from './head/MRT_TableHeadCellFilterContainer';
 import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
@@ -21,4 +22,4 @@ import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
 import { MRT_TopToolbar } from './toolbar/MRT_TopToolbar';
-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, };
+export { MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_ExpandButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_ShowHideColumnsButton, MRT_TableHeadCellFilterContainer, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, };

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

@@ -236,7 +236,10 @@ const getIsFirstRightPinnedColumn = (column) => {
     return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
 };
 const getTotalRight = (table, column) => {
-    return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 200);
+    return table
+        .getRightLeafHeaders()
+        .slice(column.getPinnedIndex() + 1)
+        .reduce((acc, col) => acc + col.getSize(), 0);
 };
 const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -681,7 +684,7 @@ const commonListItemStyles = {
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowColumnFilters, } = table;
+    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
@@ -751,23 +754,24 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         column,
         table,
     })) !== null && _d !== void 0 ? _d : (enableSorting &&
-        column.getCanSort() && [
-        React.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
-            React.createElement(Box, { sx: commonListItemStyles },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(ClearAllIcon, null)),
-                localization.clearSort)),
-        React.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
-            React.createElement(Box, { sx: commonListItemStyles },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 :
-                _e.replace('{column}', String(columnDef.header)))),
-        React.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
-            React.createElement(Box, { sx: commonListItemStyles },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(SortIcon, null)), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 :
-                _f.replace('{column}', String(columnDef.header)))),
-    ]),
+        column.getCanSort() &&
+        [
+            enableSortingRemoval !== false && (React.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(ClearAllIcon, null)),
+                    localization.clearSort))),
+            React.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 :
+                    _e.replace('{column}', String(columnDef.header)))),
+            React.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(SortIcon, null)), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 :
+                    _f.replace('{column}', String(columnDef.header)))),
+        ].filter(Boolean)),
         enableColumnFilters &&
             column.getCanFilter() &&
             [
@@ -2487,9 +2491,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                     rowRef.current = node;
                     measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
                 }
-            } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, top: virtualRow ? 0 : undefined, transform: virtualRow
-                    ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
-                    : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', '&:hover td': {
+            } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), boxSizing: 'border-box', display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', top: virtualRow ? 0 : undefined, width: '100%', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
                         ? row.getIsSelected()
                             ? `${alpha(theme.palette.primary.main, 0.2)}`
@@ -2499,7 +2501,9 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                         : undefined,
                 } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)
-                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }),
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), style: Object.assign({ transform: virtualRow
+                    ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
+                    : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) }),
             virtualPaddingLeft ? (React.createElement("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
             (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
                 const cell = columnVirtualizer
@@ -2577,7 +2581,10 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
         pagination.pageSize,
     ]);
     const rowVirtualizer = enableRowVirtualization
-        ? useVirtualizer(Object.assign(Object.assign({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height, overscan: 4 }, vProps_old), vProps))
+        ? useVirtualizer(Object.assign(Object.assign({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
+                navigator.userAgent.indexOf('Firefox') === -1
+                ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
+                : undefined, overscan: 4 }, vProps_old), vProps))
         : undefined;
     if (rowVirtualizerInstanceRef && rowVirtualizer) {
         rowVirtualizerInstanceRef.current = rowVirtualizer;
@@ -3169,5 +3176,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_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 };
+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_TableHeadCellFilterContainer, 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