material-react-table 0.12.2 → 0.13.2

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

@@ -11,18 +11,20 @@ interface Props {
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
   const {
     getRowModel,
+    getPaginationRowModel,
     getSelectedRowModel,
     getState,
     options: {
       localization,
       muiSelectCheckboxProps,
+      muiSelectAllCheckboxProps,
       onRowSelectionChanged,
       onRowSelectAllChanged,
       selectAllMode,
     },
   } = instance;
 
-  const { isDensePadding } = getState();
+  const { density } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
@@ -33,7 +35,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
       }
       onRowSelectAllChanged?.({
         event,
-        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        selectedRows: event.target.checked
+          ? selectAllMode === 'all'
+            ? getRowModel().flatRows
+            : getPaginationRowModel().flatRows
+          : [],
         instance,
       });
     } else if (row) {
@@ -51,10 +57,13 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
     }
   };
 
-  const checkboxProps =
-    muiSelectCheckboxProps instanceof Function
-      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, instance })
-      : muiSelectCheckboxProps;
+  const checkboxProps = selectAll
+    ? muiSelectAllCheckboxProps instanceof Function
+      ? muiSelectAllCheckboxProps({ instance })
+      : muiSelectAllCheckboxProps
+    : muiSelectCheckboxProps instanceof Function
+    ? muiSelectCheckboxProps({ row: row as MRT_Row, instance })
+    : muiSelectCheckboxProps;
 
   return (
     <Tooltip
@@ -80,11 +89,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,

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -16,7 +16,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
   const {
     options: {
       enableColumnFilters,
-      enableDensePaddingToggle,
+      enableDensityToggle,
       enableFilters,
       enableFullScreenToggle,
       enableGlobalFilter,
@@ -53,7 +53,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
             <MRT_ToggleFiltersButton instance={instance} />
           )}
           {enableHiding && <MRT_ShowHideColumnsButton instance={instance} />}
-          {enableDensePaddingToggle && (
+          {enableDensityToggle && (
             <MRT_ToggleDensePaddingButton instance={instance} />
           )}
           {enableFullScreenToggle && (