material-react-table 0.12.2 → 0.13.2

package/dist/material-react-table.esm.js

@@ -1,5 +1,5 @@
 import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
-import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityMedium, DensitySmall, KeyboardDoubleArrowDown, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
+import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { createTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useTableInstance } from '@tanstack/react-table';
 import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
@@ -101,7 +101,7 @@ var MRT_DefaultLocalization_EN = {
   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',
@@ -117,9 +117,9 @@ var MRT_Default_Icons = {
   CheckBoxIcon: CheckBox,
   ClearAllIcon: ClearAll,
   CloseIcon: Close,
+  DensityLargeIcon: DensityLarge,
   DensityMediumIcon: DensityMedium,
   DensitySmallIcon: DensitySmall,
-  KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
   DragHandleIcon: DragHandle,
   DynamicFeedIcon: DynamicFeed,
   EditIcon: Edit,
@@ -131,6 +131,7 @@ var MRT_Default_Icons = {
   FilterListOffIcon: FilterListOff,
   FullscreenExitIcon: FullscreenExit,
   FullscreenIcon: Fullscreen,
+  KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
   MoreHorizIcon: MoreHoriz,
   MoreVertIcon: MoreVert,
   PushPinIcon: PushPin,
@@ -152,28 +153,33 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       _instance$options = instance.options,
       KeyboardDoubleArrowDownIcon = _instance$options.icons.KeyboardDoubleArrowDownIcon,
       localization = _instance$options.localization,
+      muiExpandAllButtonProps = _instance$options.muiExpandAllButtonProps,
       renderDetailPanel = _instance$options.renderDetailPanel,
       toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
+  var iconButtonProps = muiExpandAllButtonProps instanceof Function ? muiExpandAllButtonProps({
+    instance: instance
+  }) : muiExpandAllButtonProps;
   return React.createElement(Tooltip, {
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expandAll
-  }, React.createElement(IconButton, {
+  }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.expandAll,
     disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
     onClick: function onClick() {
       return toggleAllRowsExpanded(!getIsAllRowsExpanded());
-    },
-    sx: {
-      height: isDensePadding ? '1.75rem' : '2.25rem',
-      width: isDensePadding ? '1.75rem' : '2.25rem'
     }
-  }, React.createElement(KeyboardDoubleArrowDownIcon, {
+  }, iconButtonProps, {
+    sx: _extends({
+      height: density === 'compact' ? '1.75rem' : '2.25rem',
+      width: density === 'compact' ? '1.75rem' : '2.25rem'
+    }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
+  }), React.createElement(KeyboardDoubleArrowDownIcon, {
     style: {
       transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
       transition: 'transform 0.2s'
@@ -188,11 +194,17 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       _instance$options = instance.options,
       ExpandMoreIcon = _instance$options.icons.ExpandMoreIcon,
       localization = _instance$options.localization,
+      muiExpandButtonProps = _instance$options.muiExpandButtonProps,
       onExpandChanged = _instance$options.onExpandChanged,
       renderDetailPanel = _instance$options.renderDetailPanel;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
+
+  var iconButtonProps = muiExpandButtonProps instanceof Function ? muiExpandButtonProps({
+    instance: instance,
+    row: row
+  }) : muiExpandButtonProps;
 
   var handleToggleExpand = function handleToggleExpand(event) {
     row.toggleExpanded();
@@ -208,15 +220,16 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expand
-  }, React.createElement(IconButton, {
+  }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.expand,
     disabled: !row.getCanExpand() && !renderDetailPanel,
-    onClick: handleToggleExpand,
-    sx: {
-      height: isDensePadding ? '1.75rem' : '2.25rem',
-      width: isDensePadding ? '1.75rem' : '2.25rem'
-    }
-  }, React.createElement(ExpandMoreIcon, {
+    onClick: handleToggleExpand
+  }, iconButtonProps, {
+    sx: _extends({
+      height: density === 'compact' ? '1.75rem' : '2.25rem',
+      width: density === 'compact' ? '1.75rem' : '2.25rem'
+    }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
+  }), React.createElement(ExpandMoreIcon, {
     style: {
       transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
@@ -352,7 +365,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
       setCurrentGlobalFilterFn = instance.setCurrentGlobalFilterFn;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
+      density = _getState.density,
       currentFilterFns = _getState.currentFilterFns,
       currentGlobalFilterFn = _getState.currentGlobalFilterFn;
 
@@ -459,7 +472,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
     },
     open: !!anchorEl,
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, filterOptions.map(function (_ref4, index) {
     var option = _ref4.option,
@@ -755,7 +768,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       enableColumnOrdering = _instance$options.enableColumnOrdering;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
+      density = _getState.density,
       columnOrder = _getState.columnOrder,
       columnPinning = _getState.columnPinning;
 
@@ -789,7 +802,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, React.createElement(Box, {
     sx: {
@@ -873,7 +886,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var _getState = getState(),
       columnSizing = _getState.columnSizing,
       columnVisibility = _getState.columnVisibility,
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var _useState = useState(null),
       filterMenuAnchorEl = _useState[0],
@@ -959,7 +972,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, enableSorting && column.getCanSort() && [React.createElement(MenuItem, {
     disabled: !column.getIsSorted(),
@@ -1111,7 +1124,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       renderRowActionMenuItems = _instance$options.renderRowActionMenuItems;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   return React.createElement(Menu, {
     anchorEl: anchorEl,
@@ -1120,7 +1133,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, enableEditing && React.createElement(MenuItem, {
     onClick: handleEdit,
@@ -1266,17 +1279,19 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       selectAll = _ref.selectAll,
       instance = _ref.instance;
   var getRowModel = instance.getRowModel,
+      getPaginationRowModel = instance.getPaginationRowModel,
       getSelectedRowModel = instance.getSelectedRowModel,
       getState = instance.getState,
       _instance$options = instance.options,
       localization = _instance$options.localization,
       muiSelectCheckboxProps = _instance$options.muiSelectCheckboxProps,
+      muiSelectAllCheckboxProps = _instance$options.muiSelectAllCheckboxProps,
       onRowSelectionChanged = _instance$options.onRowSelectionChanged,
       onRowSelectAllChanged = _instance$options.onRowSelectAllChanged,
       selectAllMode = _instance$options.selectAllMode;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
@@ -1288,7 +1303,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
       onRowSelectAllChanged == null ? void 0 : onRowSelectAllChanged({
         event: event,
-        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        selectedRows: event.target.checked ? selectAllMode === 'all' ? getRowModel().flatRows : getPaginationRowModel().flatRows : [],
         instance: instance
       });
     } else if (row) {
@@ -1304,8 +1319,9 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     }
   };
 
-  var checkboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
-    isSelectAll: !!selectAll,
+  var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
+    instance: instance
+  }) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
     row: row,
     instance: instance
   }) : muiSelectCheckboxProps;
@@ -1321,11 +1337,11 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
     },
     onChange: handleSelectChange,
-    size: isDensePadding ? 'small' : 'medium'
+    size: density === 'compact' ? 'small' : 'medium'
   }, checkboxProps, {
     sx: _extends({
-      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 == null ? void 0 : checkboxProps.sx)
   })));
 };
@@ -1403,31 +1419,33 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
   var getState = instance.getState,
       _instance$options = instance.options,
       _instance$options$ico = _instance$options.icons,
+      DensityLargeIcon = _instance$options$ico.DensityLargeIcon,
       DensityMediumIcon = _instance$options$ico.DensityMediumIcon,
       DensitySmallIcon = _instance$options$ico.DensitySmallIcon,
       localization = _instance$options.localization,
-      onIsDensePaddingChanged = _instance$options.onIsDensePaddingChanged,
-      setIsDensePadding = instance.setIsDensePadding;
+      onDensityChanged = _instance$options.onDensityChanged,
+      setDensity = instance.setDensity;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var handleToggleDensePadding = function handleToggleDensePadding(event) {
-    onIsDensePaddingChanged == null ? void 0 : onIsDensePaddingChanged({
+    var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
+    onDensityChanged == null ? void 0 : onDensityChanged({
       event: event,
-      isDensePadding: !isDensePadding,
+      density: nextDensity,
       instance: instance
     });
-    setIsDensePadding(!isDensePadding);
+    setDensity(nextDensity);
   };
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: localization.toggleDensePadding
+    title: localization.toggleDensity
   }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.toggleDensePadding,
+    "aria-label": localization.toggleDensity,
     onClick: handleToggleDensePadding
-  }, rest), isDensePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
+  }, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
 };
 
 var _excluded$3 = ["instance"];
@@ -1618,7 +1636,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   var instance = _ref.instance;
   var _instance$options = instance.options,
       enableColumnFilters = _instance$options.enableColumnFilters,
-      enableDensePaddingToggle = _instance$options.enableDensePaddingToggle,
+      enableDensityToggle = _instance$options.enableDensityToggle,
       enableFilters = _instance$options.enableFilters,
       enableFullScreenToggle = _instance$options.enableFullScreenToggle,
       enableGlobalFilter = _instance$options.enableGlobalFilter,
@@ -1646,7 +1664,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     instance: instance
   }), enableHiding && React.createElement(MRT_ShowHideColumnsButton, {
     instance: instance
-  }), enableDensePaddingToggle && React.createElement(MRT_ToggleDensePaddingButton, {
+  }), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
     instance: instance
   }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
     instance: instance
@@ -1992,12 +2010,14 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     onColumnFilterValueChangedDebounced == null ? void 0 : onColumnFilterValueChangedDebounced({
       column: column,
       event: event,
-      filterValue: event.target.value
+      filterValue: event.target.value,
+      instance: instance
     });
     columnDef.onColumnFilterValueChangedDebounced == null ? void 0 : columnDef.onColumnFilterValueChangedDebounced({
       column: column,
       event: event,
-      filterValue: event.target.value
+      filterValue: event.target.value,
+      instance: instance
     });
   }, 200), []);
 
@@ -2007,12 +2027,14 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     onColumnFilterValueChanged == null ? void 0 : onColumnFilterValueChanged({
       column: column,
       event: event,
-      filterValue: event.target.value
+      filterValue: event.target.value,
+      instance: instance
     });
     columnDef.onColumnFilterValueChanged == null ? void 0 : columnDef.onColumnFilterValueChanged({
       column: column,
       event: event,
-      filterValue: event.target.value
+      filterValue: event.target.value,
+      instance: instance
     });
   };
 
@@ -2402,7 +2424,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       muiTableHeadCellProps = _instance$options.muiTableHeadCellProps;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var column = header.column;
   var columnDef = column.columnDef,
@@ -2451,10 +2473,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         height: '100%',
         left: column.getIsPinned() === 'left' ? 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",
         verticalAlign: 'text-top',
@@ -2781,7 +2803,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       columnOrder = _getState.columnOrder,
       currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
-      isDensePadding = _getState.isDensePadding,
+      density = _getState.density,
       isLoading = _getState.isLoading,
       showSkeletons = _getState.showSkeletons;
 
@@ -2861,13 +2883,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'hidden',
-        p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
-        pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
+        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 + (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: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? lighten(theme.palette.background["default"], 0.13) + " !important" : darken(theme.palette.background["default"], 0.07) + " !important" : undefined
@@ -3005,14 +3027,14 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       virtualizerProps = _instance$options.virtualizerProps;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
     instance: instance
   }) : muiTableBodyProps;
   var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
   var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
-    overscan: isDensePadding ? 15 : 5,
+    overscan: density === 'compact' ? 15 : 5,
     size: rows.length,
     parentRef: tableContainerRef
   }, virtualizerProps)) : {};
@@ -3049,7 +3071,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
       enableColumnResizing = _instance$options.enableColumnResizing;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var column = footer.column;
   var columnDef = column.columnDef,
@@ -3077,7 +3099,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         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'
@@ -3254,7 +3276,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onIsDensePaddi, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
+  var _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = useState(props.tableId),
       tableId = _useState[0],
@@ -3308,9 +3330,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentEditingRow = _useState3[0],
       setCurrentEditingRow = _useState3[1];
 
-  var _useState4 = useState((_initialState$isDense = initialState == null ? void 0 : initialState.isDensePadding) != null ? _initialState$isDense : false),
-      isDensePadding = _useState4[0],
-      setIsDensePadding = _useState4[1];
+  var _useState4 = useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
+      density = _useState4[0],
+      setDensity = _useState4[1];
 
   var _useState5 = useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
       isFullScreen = _useState5[0],
@@ -3469,7 +3491,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
       currentGlobalFilterFn: currentGlobalFilterFn,
-      isDensePadding: isDensePadding,
+      density: density,
       isFullScreen: isFullScreen,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
@@ -3479,7 +3501,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
     setCurrentFilterFns: (_props$onCurrentFilte = props.onCurrentFilterFnsChange) != null ? _props$onCurrentFilte : setCurrentFilterFns,
     setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
-    setIsDensePadding: (_props$onIsDensePaddi = props.onIsDensePaddingChange) != null ? _props$onIsDensePaddi : setIsDensePadding,
+    setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
     setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
     setShowFilters: (_props$onShowFiltersC = props.onShowFiltersChange) != null ? _props$onShowFiltersC : setShowFilters,
     setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
@@ -3525,7 +3547,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3547,8 +3569,8 @@ var MaterialReactTable = (function (_ref) {
       enableColumnOrdering = _ref$enableColumnOrde === void 0 ? false : _ref$enableColumnOrde,
       _ref$enableColumnResi = _ref.enableColumnResizing,
       enableColumnResizing = _ref$enableColumnResi === void 0 ? false : _ref$enableColumnResi,
-      _ref$enableDensePaddi = _ref.enableDensePaddingToggle,
-      enableDensePaddingToggle = _ref$enableDensePaddi === void 0 ? true : _ref$enableDensePaddi,
+      _ref$enableDensityTog = _ref.enableDensityToggle,
+      enableDensityToggle = _ref$enableDensityTog === void 0 ? true : _ref$enableDensityTog,
       _ref$enableExpandAll = _ref.enableExpandAll,
       enableExpandAll = _ref$enableExpandAll === void 0 ? true : _ref$enableExpandAll,
       _ref$enableFilters = _ref.enableFilters,
@@ -3612,7 +3634,7 @@ var MaterialReactTable = (function (_ref) {
     enableColumnFilters: enableColumnFilters,
     enableColumnOrdering: enableColumnOrdering,
     enableColumnResizing: enableColumnResizing,
-    enableDensePaddingToggle: enableDensePaddingToggle,
+    enableDensityToggle: enableDensityToggle,
     enableExpandAll: enableExpandAll,
     enableFilters: enableFilters,
     enableFullScreenToggle: enableFullScreenToggle,