material-react-table 0.12.2 → 0.13.0

package/package.json

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

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;
@@ -665,14 +665,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>;

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_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

package/src/table/MRT_TableRoot.tsx

@@ -102,8 +102,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | null>(
     initialState?.currentEditingRow ?? null,
   );
-  const [isDensePadding, setIsDensePadding] = useState(
-    initialState?.isDensePadding ?? false,
+  const [density, setDensity] = useState(
+    initialState?.density ?? 'comfortable',
   );
   const [isFullScreen, setIsFullScreen] = useState(
     initialState?.isFullScreen ?? false,
@@ -288,7 +288,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         currentEditingRow,
         currentFilterFns,
         currentGlobalFilterFn,
-        isDensePadding,
+        density,
         isFullScreen,
         showFilters,
         showGlobalFilter,
@@ -302,7 +302,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     setCurrentFilterFns: props.onCurrentFilterFnsChange ?? setCurrentFilterFns,
     setCurrentGlobalFilterFn:
       props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
-    setIsDensePadding: props.onIsDensePaddingChange ?? setIsDensePadding,
+    setDensity: props.onDensityChange ?? setDensity,
     setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,