material-react-table 0.26.4 → 0.27.0

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -4,6 +4,7 @@ import { MRT_TableInstance } from '..';
 export declare const commonToolbarStyles: ({ theme }: {
     theme: Theme;
 }) => {
+    alignItems: string;
     backgroundColor: string;
     backgroundImage: string;
     display: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.26.4",
+  "version": "0.27.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -57,12 +57,12 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.6",
+    "@babel/core": "^7.18.9",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.0",
+    "@mui/material": "^5.9.1",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",

package/src/MaterialReactTable.tsx

@@ -134,7 +134,7 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
   };
 
 export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
-  ColumnDef<TData>,
+  ColumnDef<TData, unknown>,
   | 'accessorFn'
   | 'accessorKey'
   | 'aggregatedCell'
@@ -215,6 +215,7 @@ export 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;
@@ -222,7 +223,6 @@ export 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; value: string })[];
   /**
@@ -422,6 +422,7 @@ export 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';
@@ -449,7 +450,6 @@ export 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>;
@@ -788,7 +788,7 @@ export default <TData extends Record<string, any> = {}>({
   defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
   editingMode = 'row',
   enableColumnActions = true,
-  enableColumnFilterChangeMode = true,
+  enableColumnFilterChangeMode = false,
   enableColumnFilters = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
@@ -797,7 +797,7 @@ export default <TData extends Record<string, any> = {}>({
   enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
-  enableGlobalFilterChangeMode = true,
+  enableGlobalFilterChangeMode = false,
   enableGlobalFilterRankedResults = true,
   enableGrouping = false,
   enableHiding = true,

package/src/body/MRT_TableBodyCell.tsx

@@ -35,6 +35,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableClickToCopy,
       enableColumnOrdering,
       enableEditing,
+      enablePagination,
       enableRowNumbers,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
@@ -147,7 +148,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
         borderLeft: draggingBorder,
         borderRight: draggingBorder,
         borderBottom:
-          row.index === table.getRowModel().rows.length - 1
+          row.index ===
+          (enablePagination
+            ? table.getRowModel()
+            : table.getPrePaginationRowModel()
+          ).rows.length -
+            1
             ? draggingBorder
             : undefined,
       }

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -43,6 +43,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
           sx={{
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
+            mt: density !== 'compact' ? '-0.25rem' : undefined,
             ...iconButtonProps?.sx,
           }}
         >

package/src/head/MRT_TableHeadCell.tsx

@@ -128,12 +128,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : 1,
         p:
           density === 'compact'
-            ? columnDefType === 'display'
-              ? '0 0.5rem'
-              : '0.5rem'
+            ? '0.5rem'
             : density === 'comfortable'
             ? columnDefType === 'display'
-              ? '0.5rem 0.75rem'
+              ? '0.75rem'
               : '1rem'
             : columnDefType === 'display'
             ? '1rem 1.25rem'

package/src/inputs/MRT_FilterTextField.tsx

@@ -33,7 +33,7 @@ export const MRT_FilterTextField: FC<Props> = ({
     getState,
     options: {
       enableColumnFilterChangeMode,
-      enabledColumnFilterOptions,
+      columnFilterModeOptions,
       icons: { FilterListIcon, CloseIcon },
       localization,
       muiTableHeadCellFilterTextFieldProps,
@@ -152,7 +152,7 @@ export const MRT_FilterTextField: FC<Props> = ({
       : '';
 
   const allowedColumnFilterOptions =
-    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const showChangeModeButton =
     enableColumnFilterChangeMode &&
@@ -260,7 +260,6 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         {...textFieldProps}
         sx={(theme) => ({
-          m: '-0.25rem',
           p: 0,
           minWidth: !filterChipLabel ? '8rem' : 'auto',
           width: 'calc(100% + 0.5rem)',

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -59,9 +59,9 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
         size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}
         sx={(theme) => ({
-          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?.sx instanceof Function
             ? checkboxProps.sx(theme)
             : (checkboxProps?.sx as any)),

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -41,7 +41,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       enableHiding,
       enablePinning,
       enableSorting,
-      enabledColumnFilterOptions,
+      columnFilterModeOptions,
       icons: {
         ArrowRightIcon,
         ClearAllIcon,
@@ -145,7 +145,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   const isSelectFilter = !!columnDef.filterSelectOptions;
 
   const allowedColumnFilterOptions =
-    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const showFilterModeSubMenu =
     enableColumnFilterChangeMode &&

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -21,7 +21,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
     getState,
     options: {
       enabledGlobalFilterOptions,
-      enabledColumnFilterOptions,
+      columnFilterModeOptions,
       localization,
     },
     setCurrentFilterFns,
@@ -32,7 +32,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
   const { columnDef } = column ?? {};
 
   const allowedColumnFilterOptions =
-    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const filterOptions = useMemo(
     () =>

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -31,10 +31,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
       ? muiTableToolbarBottomProps({ table })
       : muiTableToolbarBottomProps;
 
-  const stackAlertBanner =
-    isMobile ||
-    (positionToolbarAlertBanner === 'bottom' &&
-      !!renderToolbarBottomCustomActions);
+  const stackAlertBanner = isMobile || !!renderToolbarBottomCustomActions;
 
   return (
     <Toolbar

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,13 +1,14 @@
 import React, { FC } from 'react';
 import { Box, lighten, Theme, Toolbar, useMediaQuery } from '@mui/material';
-import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
-import { MRT_TablePagination } from './MRT_TablePagination';
-import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TableInstance } from '..';
-import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
+import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
+  alignItems: 'flex-start',
   backgroundColor: lighten(theme.palette.background.default, 0.04),
   backgroundImage: 'none',
   display: 'grid',
@@ -48,9 +49,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
       : muiTableToolbarTopProps;
 
   const stackAlertBanner =
-    isMobile ||
-    (positionToolbarAlertBanner === 'top' &&
-      (!!renderToolbarTopCustomActions || showGlobalFilter));
+    isMobile || !!renderToolbarTopCustomActions || showGlobalFilter;
 
   return (
     <Toolbar