material-react-table 0.12.1 → 0.13.1

package/README.md

@@ -29,7 +29,7 @@ Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the devel
 
 ### Features (All Features work and are MVP, but are still being polished)
 
-_All features can be enabled/disabled easily_
+_All features can easily be enabled/disabled_
 
 - [x] Click To Copy Cell Values
 - [x] Column Actions
@@ -41,10 +41,10 @@ _All features can be enabled/disabled easily_
 - [x] Customize Icons
 - [x] Customize Styling of internal Mui Components
 - [x] Data Editing (3 different editing modes)
-- [x] Dense Padding Toggle
+- [x] Density Toggle
 - [x] Detail Panels
 - [x] Filtering and multiple built-in filter modes
-- [x] Fullscreen mode
+- [x] Full Screen mode
 - [x] Global Filtering (Search across all columns, rank by best match)
 - [x] HeaderGroups & Footers
 - [x] Localization (i18n) support
@@ -52,6 +52,7 @@ _All features can be enabled/disabled easily_
 - [x] Pagination (supports client-side and server-side)
 - [x] Persistent State
 - [x] Row Actions
+- [x] Row Numbers
 - [x] Row Selection (checkboxes)
 - [x] SSR compatible
 - [x] Sorting

package/dist/MaterialReactTable.d.ts

@@ -47,7 +47,7 @@ export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit
         [key: string]: MRT_FilterFn;
     }>>;
     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>>;
@@ -57,7 +57,7 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = TableSt
     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;
@@ -143,15 +143,17 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
         cell: MRT_Cell<D>;
         instance: MRT_TableInstance<D>;
     }) => void;
-    onColumnFilterValueChanged?: ({ column, event, filterValue, }: {
+    onColumnFilterValueChanged?: ({ column, event, filterValue, instance, }: {
         column: MRT_Column<D>;
         event: ChangeEvent<HTMLInputElement>;
         filterValue: any;
+        instance: MRT_TableInstance<D>;
     }) => void;
-    onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, }: {
+    onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, instance, }: {
         column: MRT_Column<D>;
         event: ChangeEvent<HTMLInputElement>;
         filterValue: any;
+        instance: MRT_TableInstance<D>;
     }) => void;
 };
 export declare type MRT_Column<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns' | 'columnDef'> & {
@@ -184,7 +186,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnOrdering?: boolean;
-    enableDensePaddingToggle?: boolean;
+    enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
@@ -308,15 +310,17 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         cell: MRT_Cell<D>;
         instance: MRT_TableInstance<D>;
     }) => void;
-    onColumnFilterValueChanged?: ({ column, event, filterValue, }: {
+    onColumnFilterValueChanged?: ({ column, event, filterValue, instance, }: {
         column: MRT_Column<D>;
         event: ChangeEvent<HTMLInputElement>;
         filterValue: any;
+        instance: MRT_TableInstance<D>;
     }) => void;
-    onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, }: {
+    onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, instance, }: {
         column: MRT_Column<D>;
         event: ChangeEvent<HTMLInputElement>;
         filterValue: any;
+        instance: MRT_TableInstance<D>;
     }) => void;
     onColumnVisibilityChanged?: ({ column, columnVisibility, instance, }: {
         column: MRT_Column<D>;
@@ -351,10 +355,10 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         event: ChangeEvent<HTMLInputElement>;
         instance: MRT_TableInstance<D>;
     }) => void;
-    onIsDensePaddingChange?: OnChangeFn<boolean>;
-    onIsDensePaddingChanged?: ({ event, isDensePadding, instance, }: {
+    onDensityChange?: OnChangeFn<boolean>;
+    onDensityChanged?: ({ event, density, instance, }: {
         event: MouseEvent<HTMLButtonElement>;
-        isDensePadding: boolean;
+        density: 'comfortable' | 'compact' | 'spacious';
         instance: MRT_TableInstance<D>;
     }) => void;
     onIsFullScreenChange?: OnChangeFn<boolean>;
@@ -436,5 +440,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     tableId?: string;
     virtualizerProps?: VirtualizerOptions<HTMLDivElement>;
 };
-declare const _default: <D extends Record<string, any> = {}>({ 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, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends Record<string, any> = {}>({ 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, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

package/dist/icons.d.ts

@@ -4,6 +4,7 @@ export interface MRT_Icons {
     CheckBoxIcon: any;
     ClearAllIcon: any;
     CloseIcon: any;
+    DensityLargeIcon: any;
     DensityMediumIcon: any;
     DensitySmallIcon: any;
     KeyboardDoubleArrowDownIcon: any;

package/dist/localization.d.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;

package/dist/material-react-table.cjs.development.js

@@ -106,7 +106,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',
@@ -122,9 +122,9 @@ var MRT_Default_Icons = {
   CheckBoxIcon: iconsMaterial.CheckBox,
   ClearAllIcon: iconsMaterial.ClearAll,
   CloseIcon: iconsMaterial.Close,
+  DensityLargeIcon: iconsMaterial.DensityLarge,
   DensityMediumIcon: iconsMaterial.DensityMedium,
   DensitySmallIcon: iconsMaterial.DensitySmall,
-  KeyboardDoubleArrowDownIcon: iconsMaterial.KeyboardDoubleArrowDown,
   DragHandleIcon: iconsMaterial.DragHandle,
   DynamicFeedIcon: iconsMaterial.DynamicFeed,
   EditIcon: iconsMaterial.Edit,
@@ -136,6 +136,7 @@ var MRT_Default_Icons = {
   FilterListOffIcon: iconsMaterial.FilterListOff,
   FullscreenExitIcon: iconsMaterial.FullscreenExit,
   FullscreenIcon: iconsMaterial.Fullscreen,
+  KeyboardDoubleArrowDownIcon: iconsMaterial.KeyboardDoubleArrowDown,
   MoreHorizIcon: iconsMaterial.MoreHoriz,
   MoreVertIcon: iconsMaterial.MoreVert,
   PushPinIcon: iconsMaterial.PushPin,
@@ -161,7 +162,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   return React__default.createElement(material.Tooltip, {
     arrow: true,
@@ -175,8 +176,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       return 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'
     }
   }, React__default.createElement(KeyboardDoubleArrowDownIcon, {
     style: {
@@ -197,7 +198,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       renderDetailPanel = _instance$options.renderDetailPanel;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var handleToggleExpand = function handleToggleExpand(event) {
     row.toggleExpanded();
@@ -218,8 +219,8 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     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'
     }
   }, React__default.createElement(ExpandMoreIcon, {
     style: {
@@ -357,7 +358,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;
 
@@ -464,7 +465,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,
@@ -3536,7 +3537,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;
 
@@ -3570,7 +3571,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, React__default.createElement(material.Box, {
     sx: {
@@ -3654,7 +3655,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 = React.useState(null),
       filterMenuAnchorEl = _useState[0],
@@ -3740,7 +3741,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, enableSorting && column.getCanSort() && [React__default.createElement(material.MenuItem, {
     disabled: !column.getIsSorted(),
@@ -3892,7 +3893,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       renderRowActionMenuItems = _instance$options.renderRowActionMenuItems;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   return React__default.createElement(material.Menu, {
     anchorEl: anchorEl,
@@ -3901,7 +3902,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: isDensePadding
+      dense: density === 'compact'
     }
   }, enableEditing && React__default.createElement(material.MenuItem, {
     onClick: handleEdit,
@@ -4057,7 +4058,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       selectAllMode = _instance$options.selectAllMode;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      density = _getState.density;
 
   var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
@@ -4102,11 +4103,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)
   })));
 };
@@ -5155,31 +5156,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__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.toggleDensePadding
+    title: localization.toggleDensity
   }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.toggleDensePadding,
+    "aria-label": localization.toggleDensity,
     onClick: handleToggleDensePadding
-  }, rest), isDensePadding ? React__default.createElement(DensitySmallIcon, null) : React__default.createElement(DensityMediumIcon, null)));
+  }, rest), density === 'compact' ? React__default.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React__default.createElement(DensityMediumIcon, null) : React__default.createElement(DensityLargeIcon, null)));
 };
 
 var _excluded$3 = ["instance"];
@@ -5370,7 +5373,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,
@@ -5398,7 +5401,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     instance: instance
   }), enableHiding && React__default.createElement(MRT_ShowHideColumnsButton, {
     instance: instance
-  }), enableDensePaddingToggle && React__default.createElement(MRT_ToggleDensePaddingButton, {
+  }), enableDensityToggle && React__default.createElement(MRT_ToggleDensePaddingButton, {
     instance: instance
   }), enableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, {
     instance: instance
@@ -5744,12 +5747,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), []);
 
@@ -5759,12 +5764,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
     });
   };
 
@@ -6154,7 +6161,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,
@@ -6203,10 +6210,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',
@@ -7025,7 +7032,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;
 
@@ -7105,13 +7112,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' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.darken(theme.palette.background["default"], 0.07) + " !important" : undefined
@@ -7249,14 +7256,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)) : {};
@@ -7293,7 +7300,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,
@@ -7321,7 +7328,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'
@@ -7498,7 +7505,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 = React.useState(props.tableId),
       tableId = _useState[0],
@@ -7552,9 +7559,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentEditingRow = _useState3[0],
       setCurrentEditingRow = _useState3[1];
 
-  var _useState4 = React.useState((_initialState$isDense = initialState == null ? void 0 : initialState.isDensePadding) != null ? _initialState$isDense : false),
-      isDensePadding = _useState4[0],
-      setIsDensePadding = _useState4[1];
+  var _useState4 = React.useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
+      density = _useState4[0],
+      setDensity = _useState4[1];
 
   var _useState5 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
       isFullScreen = _useState5[0],
@@ -7602,10 +7609,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       })
     );
   }, []);
-  var displayColumns = React.useMemo(function () {
+
+  var _useMemo = React.useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [showActionColumn && createDisplayColumn(table, {
+    var leadingDisplayColumns = [showActionColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React__default.createElement(MRT_ToggleRowActionMenuButton, {
@@ -7671,11 +7679,23 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     })].filter(Boolean);
-  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
+    var trailingDisplayColumns = [];
+
+    if (props.enableRowActions && props.positionActionsColumn === 'last') {
+      trailingDisplayColumns.push.apply(trailingDisplayColumns, leadingDisplayColumns.splice(leadingDisplayColumns.findIndex(function (col) {
+        return col.id === 'mrt-row-actions';
+      }), 1));
+    }
+
+    return [leadingDisplayColumns, trailingDisplayColumns];
+  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn, table]),
+      leadingDisplayColumns = _useMemo[0],
+      trailingDisplayColumns = _useMemo[1];
+
   var columns = React.useMemo(function () {
-    return [].concat(displayColumns, props.columns.map(function (column) {
+    return [].concat(leadingDisplayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterFns) : createDataColumn(table, column, currentFilterFns);
-    }));
+    }), trailingDisplayColumns);
   }, [table, props.columns, currentFilterFns]);
   var data = React.useMemo(function () {
     var _props$state, _props$state2;
@@ -7700,7 +7720,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
       currentGlobalFilterFn: currentGlobalFilterFn,
-      isDensePadding: isDensePadding,
+      density: density,
       isFullScreen: isFullScreen,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
@@ -7710,7 +7730,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
@@ -7756,7 +7776,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,
@@ -7778,8 +7798,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,
@@ -7843,7 +7863,7 @@ var MaterialReactTable = (function (_ref) {
     enableColumnFilters: enableColumnFilters,
     enableColumnOrdering: enableColumnOrdering,
     enableColumnResizing: enableColumnResizing,
-    enableDensePaddingToggle: enableDensePaddingToggle,
+    enableDensityToggle: enableDensityToggle,
     enableExpandAll: enableExpandAll,
     enableFilters: enableFilters,
     enableFullScreenToggle: enableFullScreenToggle,