material-react-table 0.12.2 → 0.13.0

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;
@@ -351,10 +351,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>;

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"];
@@ -6154,7 +6157,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 +6206,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 +7028,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 +7108,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 +7252,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 +7296,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 +7324,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 +7501,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 +7555,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],
@@ -7713,7 +7716,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
       currentGlobalFilterFn: currentGlobalFilterFn,
-      isDensePadding: isDensePadding,
+      density: density,
       isFullScreen: isFullScreen,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
@@ -7723,7 +7726,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