material-react-table 0.12.2 → 0.13.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.12.2",
+  "version": "0.13.2",
   "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.",
@@ -48,11 +48,11 @@
   "size-limit": [
     {
       "path": "dist/material-react-table.cjs.production.min.js",
-      "limit": "50 KB"
+      "limit": "55 KB"
     },
     {
       "path": "dist/material-react-table.esm.js",
-      "limit": "50 KB"
+      "limit": "55 KB"
     }
   ],
   "devDependencies": {

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;
@@ -215,7 +215,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         cell,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
       }) => ButtonProps);
   muiTableBodyCellEditTextFieldProps?:
@@ -224,7 +224,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         cell,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
       }) => TextFieldProps);
   muiTableBodyCellProps?:
@@ -233,7 +233,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         cell,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
       }) => TableCellProps);
   muiTableFooterCellProps?:
@@ -242,7 +242,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => TableCellProps);
   muiTableHeadCellColumnActionsButtonProps?:
@@ -251,7 +251,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => IconButtonProps);
   muiTableHeadCellFilterTextFieldProps?:
@@ -260,7 +260,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => TextFieldProps);
   muiTableHeadCellProps?:
@@ -269,7 +269,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => TableCellProps);
   onCellEditBlur?: ({
@@ -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;
@@ -402,26 +406,38 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
     icons?: Partial<MRT_Icons>;
     localization?: Partial<MRT_Localization>;
+    muiExpandAllButtonProps?:
+      | IconButtonProps
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => IconButtonProps);
+    muiExpandButtonProps?:
+      | IconButtonProps
+      | (({
+          instance,
+        }: {
+          instance: MRT_TableInstance<D>;
+          row: MRT_Row<D>;
+        }) => IconButtonProps);
     muiLinearProgressProps?:
       | LinearProgressProps
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => LinearProgressProps);
     muiSearchTextFieldProps?:
       | TextFieldProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TextFieldProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TextFieldProps);
+    muiSelectAllCheckboxProps?:
+      | CheckboxProps
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => CheckboxProps);
     muiSelectCheckboxProps?:
       | CheckboxProps
       | (({
           instance,
-          isSelectAll,
           row,
         }: {
-          instance: MRT_TableInstance;
-          isSelectAll: boolean;
-          row?: MRT_Row<D>;
+          instance: MRT_TableInstance<D>;
+          row: MRT_Row<D>;
         }) => CheckboxProps);
     muiTableBodyCellCopyButtonProps?:
       | ButtonProps
@@ -429,7 +445,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?:
@@ -438,7 +454,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => TextFieldProps);
     muiTableBodyCellProps?:
@@ -447,7 +463,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => TableCellProps);
     muiTableBodyCellSkeletonProps?:
@@ -456,19 +472,19 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableBodyProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableBodyProps);
     muiTableBodyRowProps?:
       | TableRowProps
       | (({
           instance,
           row,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           row: MRT_Row<D>;
         }) => TableRowProps);
     muiTableContainerProps?:
@@ -476,7 +492,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
@@ -484,7 +500,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           row,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           row: MRT_Row<D>;
         }) => TableCellProps);
     muiTableFooterCellProps?:
@@ -493,19 +509,19 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableFooterProps?:
       | TableFooterProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableFooterProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableFooterProps);
     muiTableFooterRowProps?:
       | TableRowProps
       | (({
           instance,
           footerGroup,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           footerGroup: MRT_HeaderGroup<D>;
         }) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?:
@@ -514,7 +530,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
@@ -523,7 +539,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => TextFieldProps);
     muiTableHeadCellProps?:
@@ -532,19 +548,19 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableHeadProps?:
       | TableHeadProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableHeadProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableHeadProps);
     muiTableHeadRowProps?:
       | TableRowProps
       | (({
           instance,
           headerGroup,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           headerGroup: MRT_HeaderGroup<D>;
         }) => TableRowProps);
     muiTablePaginationProps?:
@@ -552,23 +568,23 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => Partial<TablePaginationProps>);
     muiTablePaperProps?:
       | PaperProps
-      | (({ instance }: { instance: MRT_TableInstance }) => PaperProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => PaperProps);
     muiTableProps?:
       | TableProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableProps);
     muiTableToolbarAlertBannerProps?:
       | AlertProps
-      | (({ instance }: { instance: MRT_TableInstance }) => AlertProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => AlertProps);
     muiTableToolbarBottomProps?:
       | ToolbarProps
-      | (({ instance }: { instance: MRT_TableInstance }) => ToolbarProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => ToolbarProps);
     muiTableToolbarTopProps?:
       | ToolbarProps
-      | (({ instance }: { instance: MRT_TableInstance }) => ToolbarProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => ToolbarProps);
     onCellClick?: ({
       cell,
       event,
@@ -600,19 +616,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 +685,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 +828,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 +867,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

@@ -15,12 +15,18 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
     options: {
       icons: { KeyboardDoubleArrowDownIcon },
       localization,
+      muiExpandAllButtonProps,
       renderDetailPanel,
     },
     toggleAllRowsExpanded,
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
+
+  const iconButtonProps =
+    muiExpandAllButtonProps instanceof Function
+      ? muiExpandAllButtonProps({ instance })
+      : muiExpandAllButtonProps;
 
   return (
     <Tooltip
@@ -33,9 +39,11 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
         aria-label={localization.expandAll}
         disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
         onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
+        {...iconButtonProps}
         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',
+          ...iconButtonProps?.sx,
         }}
       >
         <KeyboardDoubleArrowDownIcon

package/src/buttons/MRT_ExpandButton.tsx

@@ -13,12 +13,18 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
     options: {
       icons: { ExpandMoreIcon },
       localization,
+      muiExpandButtonProps,
       onExpandChanged,
       renderDetailPanel,
     },
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
+
+  const iconButtonProps =
+    muiExpandButtonProps instanceof Function
+      ? muiExpandButtonProps({ instance, row })
+      : muiExpandButtonProps;
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     row.toggleExpanded();
@@ -36,9 +42,11 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
         aria-label={localization.expand}
         disabled={!row.getCanExpand() && !renderDetailPanel}
         onClick={handleToggleExpand}
+        {...iconButtonProps}
         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',
+          ...iconButtonProps?.sx,
         }}
       >
         <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`,