material-react-table 0.26.5 → 0.28.0

package/README.md

@@ -1,18 +1,18 @@
 # Material React Table
 
-<a href="https://npmjs.com/package/material-react-table" target="_blank_">
+<a href="https://npmjs.com/package/material-react-table" target="_blank">
   <img alt="" src="https://badgen.net/npm/v/material-react-table" />
 </a>
-<a href="https://npmjs.com/package/material-react-table" target="_blank_">
+<a href="https://npmjs.com/package/material-react-table" target="_blank">
   <img alt="" src="https://img.shields.io/npm/dm/material-react-table.svg" />
 </a>
-<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank_">
+<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank">
   <img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest" />
 </a>
-<a href="https://github.com/KevinVandy/material-react-table" target="_blank_">
+<a href="https://github.com/KevinVandy/material-react-table" target="_blank">
   <img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
 </a>
-<a href="http://makeapullrequest.com" target="_blank_">
+<a href="http://makeapullrequest.com" target="_blank">
   <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
 </a>
 
@@ -40,6 +40,7 @@ See all [Props and Options](https://www.material-react-table.com/docs/api)
  - [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
  - [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features)
  - [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
+ - [Data Export Table](https://www.material-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
  - [Remote Data](https://www.material-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
  - [React Query](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
  - [Virtualized Rows](https://www.material-react-table.com/docs/examples/virtualized/) (20,000 rows at once!)
@@ -52,7 +53,7 @@ View additional [storybook examples](https://www.material-react-table.dev/)
 
 _All features can easily be enabled/disabled_
 
-- [x] < 35kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] < 36kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Click To Copy Cell Values
 - [x] Column Action Dropdown Menu
@@ -134,8 +135,6 @@ export default function App() {
     [],
   );
 
-  //simple data example
-  //Check out https://www.material-react-table.com/docs/examples/remote for a more realistic example
   const data = useMemo(
     () => [
       {

package/dist/MaterialReactTable.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent, Dispatch, DragEvent, FC, FocusEvent, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
-import type { Options as VirtualizerOptions } from 'react-virtual';
+import type { VirtualizerOptions } from '@tanstack/react-virtual';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filtersFns';
@@ -69,7 +69,7 @@ export declare type MRT_TableState<TData extends Record<string, any> = {}> = Tab
     showProgressBars: boolean;
     showSkeletons: boolean;
 };
-export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData>, 'accessorFn' | 'accessorKey' | 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
+export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorFn' | 'accessorKey' | 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
     AggregatedCell?: ({ cell, table, }: {
         cell: MRT_Cell<TData>;
         table: MRT_TableInstance<TData>;
@@ -117,6 +117,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      * @example columnDefType: 'display'
      */
     columnDefType?: 'data' | 'display' | 'group';
+    columnFilterModeOptions?: MRT_FilterOption[] | null;
     columns?: MRT_ColumnDef<TData>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -124,7 +125,6 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
     enableColumnFilterChangeMode?: boolean;
     enableColumnOrdering?: boolean;
     enableEditing?: boolean;
-    enabledColumnFilterOptions?: MRT_FilterOption[] | null;
     filterFn?: MRT_FilterFn<TData>;
     filterSelectOptions?: (string | {
         text: string;
@@ -236,6 +236,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     displayColumnDefOptions?: Partial<{
         [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
+    columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     editingMode?: 'table' | 'row' | 'cell';
@@ -263,7 +264,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     enableToolbarBottom?: boolean;
     enableToolbarInternalActions?: boolean;
     enableToolbarTop?: boolean;
-    enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
     enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
     expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
@@ -463,7 +463,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
-    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
+    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
 };
 declare const _default: <TData extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 export default _default;

package/dist/material-react-table.cjs.development.js

@@ -10,7 +10,7 @@ var iconsMaterial = require('@mui/icons-material');
 var reactTable = require('@tanstack/react-table');
 var material = require('@mui/material');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
-var reactVirtual = require('react-virtual');
+var reactVirtual = require('@tanstack/react-virtual');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -182,7 +182,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
   }, iconButtonProps, {
     sx: _extends({
       height: density === 'compact' ? '1.75rem' : '2.25rem',
-      width: density === 'compact' ? '1.75rem' : '2.25rem'
+      width: density === 'compact' ? '1.75rem' : '2.25rem',
+      mt: density !== 'compact' ? '-0.25rem' : undefined
     }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
   }), React__default.createElement(KeyboardDoubleArrowDownIcon, {
     style: {
@@ -239,7 +240,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
 };
 
 var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
-  var _columnDef$enabledCol;
+  var _columnDef$columnFilt;
 
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
@@ -249,7 +250,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var getState = table.getState,
       _table$options = table.options,
       enabledGlobalFilterOptions = _table$options.enabledGlobalFilterOptions,
-      enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
+      columnFilterModeOptions = _table$options.columnFilterModeOptions,
       localization = _table$options.localization,
       setCurrentFilterFns = table.setCurrentFilterFns,
       setCurrentGlobalFilterFn = table.setCurrentGlobalFilterFn;
@@ -265,7 +266,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var _ref3 = column != null ? column : {},
       columnDef = _ref3.columnDef;
 
-  var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
+  var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
   var filterOptions = React.useMemo(function () {
     return [{
       option: 'fuzzy',
@@ -987,7 +988,7 @@ var commonListItemStyles = {
   alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _columnDef$enabledCol, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
+  var _columnDef$columnFilt, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
 
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
@@ -1004,7 +1005,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       enableHiding = _table$options.enableHiding,
       enablePinning = _table$options.enablePinning,
       enableSorting = _table$options.enableSorting,
-      enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
+      columnFilterModeOptions = _table$options.columnFilterModeOptions,
       _table$options$icons = _table$options.icons,
       ArrowRightIcon = _table$options$icons.ArrowRightIcon,
       ClearAllIcon = _table$options$icons.ClearAllIcon,
@@ -1105,7 +1106,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   };
 
   var isSelectFilter = !!columnDef.filterSelectOptions;
-  var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
+  var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
   var showFilterModeSubMenu = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
   return React__default.createElement(material.Menu, {
     anchorEl: anchorEl,
@@ -1452,9 +1453,9 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   }, checkboxProps, {
     sx: function sx(theme) {
       return _extends({
-        height: density === 'compact' ? '1.5rem' : '2rem',
-        width: density === 'compact' ? '1.5rem' : '2rem',
-        m: '-1re.m'
+        height: density === 'compact' ? '1.75rem' : '2.5rem',
+        width: density === 'compact' ? '1.75rem' : '2.5rem',
+        m: density !== 'compact' ? '-0.4rem' : undefined
       }, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
     }
   })));
@@ -1947,7 +1948,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
     table: table
   }) : muiTableToolbarTopProps;
-  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarTopCustomActions || showGlobalFilter);
+  var stackAlertBanner = isMobile || !!renderToolbarTopCustomActions || showGlobalFilter;
   return React__default.createElement(material.Toolbar, Object.assign({
     id: "mrt-" + tableId + "-toolbar-top",
     variant: "dense"
@@ -2010,7 +2011,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
     table: table
   }) : muiTableToolbarBottomProps;
-  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && !!renderToolbarBottomCustomActions;
+  var stackAlertBanner = isMobile || !!renderToolbarBottomCustomActions;
   return React__default.createElement(material.Toolbar, Object.assign({
     id: "mrt-" + tableId + "-toolbar-bottom",
     variant: "dense"
@@ -2120,7 +2121,7 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _currentFilterOption$, _localization$filterB, _columnDef$enabledCol, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
+  var _currentFilterOption$, _localization$filterB, _columnDef$columnFilt, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
@@ -2128,7 +2129,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var getState = table.getState,
       _table$options = table.options,
       enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
-      enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
+      columnFilterModeOptions = _table$options.columnFilterModeOptions,
       _table$options$icons = _table$options.icons,
       FilterListIcon = _table$options$icons.FilterListIcon,
       CloseIcon = _table$options$icons.CloseIcon,
@@ -2225,7 +2226,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
   localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
   var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
-  var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
+  var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
   var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
     fullWidth: true,
@@ -2297,7 +2298,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }, textFieldProps, {
     sx: function sx(theme) {
       return _extends({
-        m: '-0.25rem',
         p: 0,
         minWidth: !filterChipLabel ? '8rem' : 'auto',
         width: 'calc(100% + 0.5rem)',
@@ -2630,7 +2630,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'visible',
         opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
-        p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
+        p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
         pb: columnDefType === 'display' ? 0 : undefined,
         position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
         pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
@@ -2931,6 +2931,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       enableClickToCopy = _table$options.enableClickToCopy,
       enableColumnOrdering = _table$options.enableColumnOrdering,
       enableEditing = _table$options.enableEditing,
+      enablePagination = _table$options.enablePagination,
       enableRowNumbers = _table$options.enableRowNumbers,
       muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
@@ -3005,7 +3006,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var draggingBorders = draggingBorder ? {
     borderLeft: draggingBorder,
     borderRight: draggingBorder,
-    borderBottom: row.index === table.getRowModel().rows.length - 1 ? draggingBorder : undefined
+    borderBottom: row.index === (enablePagination ? table.getRowModel() : table.getPrePaginationRowModel()).rows.length - 1 ? draggingBorder : undefined
   } : undefined;
   return React__default.createElement(material.TableCell, Object.assign({
     onDoubleClick: handleDoubleClick,
@@ -3208,19 +3209,23 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 
     return enablePagination ? getRowModel().rows : getPrePaginationRowModel().rows;
   }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getRowModel().rows, globalFilter]);
-  var rowVirtualizer = enableRowVirtualization ? reactVirtual.useVirtual(_extends({
-    // estimateSize: () => (density === 'compact' ? 25 : 50),
+  var rowVirtualizer = enableRowVirtualization ? reactVirtual.useVirtualizer(_extends({
+    estimateSize: function estimateSize() {
+      return density === 'compact' ? 25 : 50;
+    },
     overscan: density === 'compact' ? 30 : 10,
-    parentRef: tableContainerRef,
-    size: rows.length
+    getScrollElement: function getScrollElement() {
+      return tableContainerRef.current;
+    },
+    count: rows.length
   }, virtualizerProps)) : {};
-  var virtualRows = enableRowVirtualization ? rowVirtualizer.virtualItems : [];
+  var virtualRows = enableRowVirtualization ? rowVirtualizer.getVirtualItems() : [];
   var paddingTop = 0;
   var paddingBottom = 0;
 
   if (enableRowVirtualization) {
-    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
-    paddingBottom = virtualRows.length > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
+    paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
+    paddingBottom = !!virtualRows.length ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
   }
 
   return React__default.createElement(material.TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
@@ -3733,7 +3738,7 @@ var MaterialReactTable = (function (_ref) {
       _ref$enableColumnActi = _ref.enableColumnActions,
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
       _ref$enableColumnFilt = _ref.enableColumnFilterChangeMode,
-      enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? false : _ref$enableColumnFilt,
       _ref$enableColumnFilt2 = _ref.enableColumnFilters,
       enableColumnFilters = _ref$enableColumnFilt2 === void 0 ? true : _ref$enableColumnFilt2,
       _ref$enableColumnOrde = _ref.enableColumnOrdering,
@@ -3751,7 +3756,7 @@ var MaterialReactTable = (function (_ref) {
       _ref$enableGlobalFilt = _ref.enableGlobalFilter,
       enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
       _ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
-      enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? true : _ref$enableGlobalFilt2,
+      enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? false : _ref$enableGlobalFilt2,
       _ref$enableGlobalFilt3 = _ref.enableGlobalFilterRankedResults,
       enableGlobalFilterRankedResults = _ref$enableGlobalFilt3 === void 0 ? true : _ref$enableGlobalFilt3,
       _ref$enableGrouping = _ref.enableGrouping,