material-react-table 0.12.1 → 0.13.1

package/dist/table/MRT_TableRoot.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { MaterialReactTableProps } from '../MaterialReactTable';
 export declare const MRT_TableRoot: <D extends Record<string, any> = {}>(props: MaterialReactTableProps<D>) => JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.12.1",
+  "version": "0.13.1",
   "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.",

package/src/MaterialReactTable.tsx

@@ -121,7 +121,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
     }>
   >;
   setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn>>;
-  setIsDensePadding: Dispatch<SetStateAction<boolean>>;
+  setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
   setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
@@ -132,7 +132,7 @@ export type MRT_TableState<D extends Record<string, any> = {}> = TableState & {
   currentEditingRow: MRT_Row<D> | null;
   currentFilterFns: Record<string, string | Function>;
   currentGlobalFilterFn: Record<string, string | Function>;
-  isDensePadding: boolean;
+  density: 'comfortable' | 'compact' | 'spacious';
   isLoading: boolean;
   isFullScreen: boolean;
   showFilters: boolean;
@@ -294,19 +294,23 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     column,
     event,
     filterValue,
+    instance,
   }: {
     column: MRT_Column<D>;
     event: ChangeEvent<HTMLInputElement>;
     filterValue: any;
+    instance: MRT_TableInstance<D>;
   }) => void;
   onColumnFilterValueChangedDebounced?: ({
     column,
     event,
     filterValue,
+    instance,
   }: {
     column: MRT_Column<D>;
     event: ChangeEvent<HTMLInputElement>;
     filterValue: any;
+    instance: MRT_TableInstance<D>;
   }) => void;
 };
 
@@ -382,7 +386,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnOrdering?: boolean;
-    enableDensePaddingToggle?: boolean;
+    enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
@@ -600,19 +604,23 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       column,
       event,
       filterValue,
+      instance,
     }: {
       column: MRT_Column<D>;
       event: ChangeEvent<HTMLInputElement>;
       filterValue: any;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onColumnFilterValueChangedDebounced?: ({
       column,
       event,
       filterValue,
+      instance,
     }: {
       column: MRT_Column<D>;
       event: ChangeEvent<HTMLInputElement>;
       filterValue: any;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onColumnVisibilityChanged?: ({
       column,
@@ -665,14 +673,14 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       event: ChangeEvent<HTMLInputElement>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onIsDensePaddingChange?: OnChangeFn<boolean>;
-    onIsDensePaddingChanged?: ({
+    onDensityChange?: OnChangeFn<boolean>;
+    onDensityChanged?: ({
       event,
-      isDensePadding,
+      density,
       instance,
     }: {
       event: MouseEvent<HTMLButtonElement>;
-      isDensePadding: boolean;
+      density: 'comfortable' | 'compact' | 'spacious';
       instance: MRT_TableInstance<D>;
     }) => void;
     onIsFullScreenChange?: OnChangeFn<boolean>;
@@ -808,7 +816,7 @@ export default <D extends Record<string, any> = {}>({
   enableColumnFilters = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
-  enableDensePaddingToggle = true,
+  enableDensityToggle = true,
   enableExpandAll = true,
   enableFilters = true,
   enableFullScreenToggle = true,
@@ -847,7 +855,7 @@ export default <D extends Record<string, any> = {}>({
     enableColumnFilters={enableColumnFilters}
     enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
-    enableDensePaddingToggle={enableDensePaddingToggle}
+    enableDensityToggle={enableDensityToggle}
     enableExpandAll={enableExpandAll}
     enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}

package/src/body/MRT_TableBody.tsx

@@ -22,7 +22,7 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
     },
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
@@ -35,7 +35,7 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
 
   const rowVirtualizer = enableRowVirtualization
     ? useVirtual({
-        overscan: isDensePadding ? 15 : 5,
+        overscan: density === 'compact' ? 15 : 5,
         size: rows.length,
         parentRef: tableContainerRef,
         ...virtualizerProps,

package/src/body/MRT_TableBodyCell.tsx

@@ -41,7 +41,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
     columnOrder,
     currentEditingCell,
     currentEditingRow,
-    isDensePadding,
+    density,
     isLoading,
     showSkeletons,
   } = getState();
@@ -152,23 +152,35 @@ export const MRT_TableBodyCell: FC<Props> = ({
             ? `${column.getStart('left')}px`
             : undefined,
         overflow: 'hidden',
-        p: isDensePadding
-          ? columnDefType === 'display'
-            ? '0 0.5rem'
-            : '0.5rem'
-          : columnDefType === 'display'
-          ? '0.5rem 0.75rem'
-          : '1rem',
+        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',
         pl:
           column.id === 'mrt-expand'
-            ? `${row.depth + (isDensePadding ? 0.5 : 0.75)}rem`
+            ? `${
+                row.depth +
+                (density === 'compact'
+                  ? 0.5
+                  : density === 'comfortable'
+                  ? 0.75
+                  : 1.25)
+              }rem`
             : undefined,
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         transition: 'all 0.2s ease-in-out',
-        whiteSpace: isDensePadding ? 'nowrap' : 'normal',
+        whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor:

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -20,7 +20,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
     toggleAllRowsExpanded,
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
 
   return (
     <Tooltip
@@ -34,8 +34,8 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
         disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
         onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
         sx={{
-          height: isDensePadding ? '1.75rem' : '2.25rem',
-          width: isDensePadding ? '1.75rem' : '2.25rem',
+          height: density === 'compact' ? '1.75rem' : '2.25rem',
+          width: density === 'compact' ? '1.75rem' : '2.25rem',
         }}
       >
         <KeyboardDoubleArrowDownIcon

package/src/buttons/MRT_ExpandButton.tsx

@@ -18,7 +18,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
     },
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     row.toggleExpanded();
@@ -37,8 +37,8 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
         disabled={!row.getCanExpand() && !renderDetailPanel}
         onClick={handleToggleExpand}
         sx={{
-          height: isDensePadding ? '1.75rem' : '2.25rem',
-          width: isDensePadding ? '1.75rem' : '2.25rem',
+          height: density === 'compact' ? '1.75rem' : '2.25rem',
+          width: density === 'compact' ? '1.75rem' : '2.25rem',
         }}
       >
         <ExpandMoreIcon

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -13,32 +13,44 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
   const {
     getState,
     options: {
-      icons: { DensityMediumIcon, DensitySmallIcon },
+      icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon },
       localization,
-      onIsDensePaddingChanged,
+      onDensityChanged,
     },
-    setIsDensePadding,
+    setDensity,
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
 
   const handleToggleDensePadding = (event: MouseEvent<HTMLButtonElement>) => {
-    onIsDensePaddingChanged?.({
+    const nextDensity =
+      density === 'comfortable'
+        ? 'compact'
+        : density === 'compact'
+        ? 'spacious'
+        : 'comfortable';
+    onDensityChanged?.({
       event,
-      isDensePadding: !isDensePadding,
+      density: nextDensity,
       instance,
     });
-    setIsDensePadding(!isDensePadding);
+    setDensity(nextDensity);
   };
 
   return (
-    <Tooltip arrow title={localization.toggleDensePadding}>
+    <Tooltip arrow title={localization.toggleDensity}>
       <IconButton
-        aria-label={localization.toggleDensePadding}
+        aria-label={localization.toggleDensity}
         onClick={handleToggleDensePadding}
         {...rest}
       >
-        {isDensePadding ? <DensitySmallIcon /> : <DensityMediumIcon />}
+        {density === 'compact' ? (
+          <DensitySmallIcon />
+        ) : density === 'comfortable' ? (
+          <DensityMediumIcon />
+        ) : (
+          <DensityLargeIcon />
+        )}
       </IconButton>
     </Tooltip>
   );

package/src/footer/MRT_TableFooterCell.tsx

@@ -13,7 +13,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, instance }) => {
     options: { muiTableFooterCellProps, enableColumnResizing },
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
 
   const { column } = footer;
 
@@ -49,7 +49,12 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, instance }) => {
         fontWeight: 'bold',
         maxWidth: `${column.getSize()}px`,
         minWidth: `${column.getSize()}px`,
-        p: isDensePadding ? '0.5rem' : '1rem',
+        p:
+          density === 'compact'
+            ? '0.5rem'
+            : density === 'comfortable'
+            ? '1rem'
+            : '1.5rem',
         transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
         width: column.getSize(),
         verticalAlign: 'text-top',

package/src/head/MRT_TableHeadCell.tsx

@@ -37,7 +37,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
     },
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
 
   const { column } = header;
 
@@ -111,19 +111,31 @@ export const MRT_TableHeadCell: FC<Props> = ({
             ? `${column.getStart('left')}px`
             : undefined,
         overflow: 'visible',
-        p: isDensePadding
-          ? columnDefType === 'display'
-            ? '0 0.5rem'
-            : '0.5rem'
-          : columnDefType === 'display'
-          ? '0.5rem 0.75rem'
-          : '1rem',
+        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',
         pb: columnDefType === 'display' ? 0 : undefined,
         position:
           column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'
             : undefined,
-        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.75rem',
+        pt:
+          columnDefType !== 'data'
+            ? 0
+            : density === 'compact'
+            ? '0.25'
+            : density === 'comfortable'
+            ? '.75rem'
+            : '1.25rem',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,

package/src/icons.ts

@@ -4,9 +4,9 @@ import {
   CheckBox,
   ClearAll,
   Close,
+  DensityLarge,
   DensityMedium,
   DensitySmall,
-  KeyboardDoubleArrowDown,
   DragHandle,
   DynamicFeed,
   Edit,
@@ -16,8 +16,9 @@ import {
   FilterAltOff,
   FilterList,
   FilterListOff,
-  FullscreenExit,
   Fullscreen,
+  FullscreenExit,
+  KeyboardDoubleArrowDown,
   MoreHoriz,
   MoreVert,
   PushPin,
@@ -36,6 +37,7 @@ export interface MRT_Icons {
   CheckBoxIcon: any;
   ClearAllIcon: any;
   CloseIcon: any;
+  DensityLargeIcon: any;
   DensityMediumIcon: any;
   DensitySmallIcon: any;
   KeyboardDoubleArrowDownIcon: any;
@@ -68,9 +70,9 @@ export const MRT_Default_Icons: MRT_Icons = {
   CheckBoxIcon: CheckBox,
   ClearAllIcon: ClearAll,
   CloseIcon: Close,
+  DensityLargeIcon: DensityLarge,
   DensityMediumIcon: DensityMedium,
   DensitySmallIcon: DensitySmall,
-  KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
   DragHandleIcon: DragHandle,
   DynamicFeedIcon: DynamicFeed,
   EditIcon: Edit,
@@ -82,6 +84,7 @@ export const MRT_Default_Icons: MRT_Icons = {
   FilterListOffIcon: FilterListOff,
   FullscreenExitIcon: FullscreenExit,
   FullscreenIcon: Fullscreen,
+  KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
   MoreHorizIcon: MoreHoriz,
   MoreVertIcon: MoreVert,
   PushPinIcon: PushPin,

package/src/inputs/MRT_FilterTextField.tsx

@@ -90,11 +90,13 @@ export const MRT_FilterTextField: FC<Props> = ({
         column,
         event,
         filterValue: event.target.value,
+        instance,
       });
       columnDef.onColumnFilterValueChangedDebounced?.({
         column,
         event,
         filterValue: event.target.value,
+        instance,
       });
     }, 200),
     [],
@@ -107,11 +109,13 @@ export const MRT_FilterTextField: FC<Props> = ({
       column,
       event,
       filterValue: event.target.value,
+      instance,
     });
     columnDef.onColumnFilterValueChanged?.({
       column,
       event,
       filterValue: event.target.value,
+      instance,
     });
   };
 

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -22,7 +22,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
     },
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
@@ -80,11 +80,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
             : localization.toggleSelectRow,
         }}
         onChange={handleSelectChange}
-        size={isDensePadding ? 'small' : 'medium'}
+        size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}
         sx={{
-          height: isDensePadding ? '1.75rem' : '2.25rem',
-          width: isDensePadding ? '1.75rem' : '2.25rem',
+          height: density === 'compact' ? '1.75rem' : '2.25rem',
+          width: density === 'compact' ? '1.75rem' : '2.25rem',
           ...checkboxProps?.sx,
         }}
       />

package/src/localization.ts

@@ -56,7 +56,7 @@ export interface MRT_Localization {
   sortedByColumnDesc: string;
   thenBy: string;
   to: string;
-  toggleDensePadding: string;
+  toggleDensity: string;
   toggleFullScreen: string;
   toggleSelectAll: string;
   toggleSelectRow: string;
@@ -125,7 +125,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
   to: 'to',
-  toggleDensePadding: 'Toggle dense padding',
+  toggleDensity: 'Toggle density',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -62,7 +62,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const { columnDef } = column;
 
-  const { columnSizing, columnVisibility, isDensePadding } = getState();
+  const { columnSizing, columnVisibility, density } = getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
@@ -150,7 +150,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
-        dense: isDensePadding,
+        dense: density === 'compact',
       }}
     >
       {enableSorting &&

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -52,8 +52,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
     setCurrentGlobalFilterFn,
   } = instance;
 
-  const { isDensePadding, currentFilterFns, currentGlobalFilterFn } =
-    getState();
+  const { density, currentFilterFns, currentGlobalFilterFn } = getState();
 
   const { column } = header ?? {};
 
@@ -178,7 +177,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       MenuListProps={{
-        dense: isDensePadding,
+        dense: density === 'compact',
       }}
     >
       {filterOptions.map(({ option, label, divider, fn }, index) => (

package/src/menus/MRT_RowActionMenu.tsx

@@ -31,7 +31,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
     },
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
 
   return (
     <Menu
@@ -39,7 +39,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
-        dense: isDensePadding,
+        dense: density === 'compact',
       }}
     >
       {enableEditing && (

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -30,7 +30,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     options: { localization, enablePinning, enableColumnOrdering },
   } = instance;
 
-  const { isDensePadding, columnOrder, columnPinning } = getState();
+  const { density, columnOrder, columnPinning } = getState();
 
   const hideAllColumns = () => {
     getAllLeafColumns()
@@ -68,7 +68,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
-        dense: isDensePadding,
+        dense: density === 'compact',
       }}
     >
       <Box