update

Author: mr-pinzhang

apps/mantine-react-table-docs/components/prop-tables/stateOptions.ts

@@ -180,7 +180,7 @@ export const stateOptions: StateOption[] = [
     linkText: '',
     source: 'TanStack Table',
     stateOption: 'density',
-    type: 'MantineSize',
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
   },
   {
     defaultValue: 'false',

packages/mantine-react-table/src/components/body/MRT_TableBodyRow.tsx

@@ -17,6 +17,7 @@ import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import {
   type MRT_Cell,
   type MRT_ColumnVirtualizer,
+  type MRT_DensityState,
   type MRT_Row,
   type MRT_RowData,
   type MRT_RowVirtualizer,
@@ -120,10 +121,18 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   const tableFooterHeight =
     (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
 
+  const defaultRowHeightByDensity: Record<MRT_DensityState, number> = {
+    lg: 61,
+    md: 53,
+    sm: 45,
+    xl: 69,
+    xs: 37,
+  };
+
   const rowHeight =
     // @ts-ignore
     parseInt(tableRowProps?.style?.height, 10) ||
-    (density === 'xs' ? 37 : density === 'md' ? 53 : 69);
+    (defaultRowHeightByDensity[density] ?? defaultRowHeightByDensity['md']);
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableRowOrdering && draggingRow) {

packages/mantine-react-table/src/components/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -13,7 +13,9 @@ interface Props<TData extends MRT_RowData>
   table: MRT_TableInstance<TData>;
 }
 
-const next: Record<MRT_DensityState, MRT_DensityState> = {
+type TogglableDensityState = Exclude<MRT_DensityState, 'lg' | 'sm'>;
+
+const next: Record<TogglableDensityState, TogglableDensityState> = {
   md: 'xs',
   xl: 'md',
   xs: 'xl',
@@ -42,7 +44,9 @@ export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
       <ActionIcon
         aria-label={title ?? toggleDensity}
         color="gray"
-        onClick={() => setDensity((current) => next[current])}
+        onClick={() =>
+          setDensity((current) => next[current as TogglableDensityState])
+        }
         size="lg"
         variant="subtle"
         {...rest}

packages/mantine-react-table/src/hooks/useMRT_RowVirtualizer.ts

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { type Range, useVirtualizer } from '@tanstack/react-virtual';
 
 import {
+  type MRT_DensityState,
   type MRT_Row,
   type MRT_RowData,
   type MRT_RowVirtualizer,
@@ -40,8 +41,16 @@ export const useMRT_RowVirtualizer = <
 
   const rowCount = rows?.length ?? getRowModel().rows.length;
 
+  const defaultRowHeightByDensity: Record<MRT_DensityState, number> = {
+    lg: 62.7,
+    md: 54.7,
+    sm: 48.7,
+    xl: 70.7,
+    xs: 42.7,
+  };
+
   const normalRowHeight =
-    density === 'xs' ? 42.7 : density === 'md' ? 54.7 : 70.7;
+    defaultRowHeightByDensity[density] ?? defaultRowHeightByDensity['md'];
 
   const rowVirtualizer = useVirtualizer({
     count: renderDetailPanel ? rowCount * 2 : rowCount,

packages/mantine-react-table/src/types.ts

@@ -52,7 +52,6 @@ import {
   type CheckboxProps,
   type HighlightProps,
   type LoadingOverlayProps,
-  type MantineSize,
   type ModalProps,
   type MultiSelectProps,
   type PaginationProps,
@@ -106,7 +105,7 @@ export type MRT_PaginationProps = {
   showRowsPerPage?: boolean;
 } & Partial<PaginationProps>;
 
-export type MRT_DensityState = MantineSize;
+export type MRT_DensityState = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
 
 export type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;