material-react-table 0.37.0 → 0.37.1

package/README.md

@@ -4,13 +4,16 @@
   <img alt="" src="https://badgen.net/npm/v/material-react-table?color=blue" />
 </a>
 <a href="https://npmjs.com/package/material-react-table" target="_blank">
-  <img alt="" src="https://img.shields.io/npm/dm/material-react-table.svg?color=blue" />
+  <img alt="" src="https://badgen.net/npm/dt/material-react-table?label=installs&icon=npm&color=blue" />
 </a>
 <a href="https://bundlephobia.com/result?p=material-react-table" target="_blank">
   <img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest?color=blue" />
 </a>
 <a href="https://github.com/KevinVandy/material-react-table" target="_blank">
-  <img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
+  <img alt="" src="https://badgen.net/github/stars/KevinVandy/material-react-table?color=blue" />
+</a>
+<a href="https://github.com/KevinVandy/material-react-table/blob/main/LICENSE" target="_blank">
+  <img alt="" src="https://badgen.net/github/license/KevinVandy/material-react-table?color=blue" />
 </a>
 <a href="http://makeapullrequest.com" target="_blank">
   <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
@@ -29,7 +32,7 @@
 
 Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
 
-View the [Docs Site](https://www.material-react-table.com/)
+View the [Docs Website](https://www.material-react-table.com/)
 
 See all [Props and Options](https://www.material-react-table.com/docs/api)
 

package/dist/cjs/column.utils.d.ts

@@ -1,4 +1,4 @@
-import { ColumnOrderState } from '@tanstack/react-table';
+import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
@@ -81,6 +81,7 @@ export declare const prepareColumns: <TData extends Record<string, any> = {}>(co
     basic: import("@tanstack/table-core").SortingFn<any>;
 } & Record<string, import("@tanstack/table-core").SortingFn<any>>) => MRT_DefinedColumnDef<TData>[];
 export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
+export declare const showExpandColumn: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>, grouping?: GroupingState) => boolean;
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
 export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];

package/dist/cjs/index.js

@@ -529,6 +529,9 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
     columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
     return [...columnOrder];
 };
+const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
+    (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
+    props.renderDetailPanel);
 const getLeadingDisplayColumnIds = (props) => {
     var _a;
     return [
@@ -538,9 +541,7 @@ const getLeadingDisplayColumnIds = (props) => {
                 ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
             'mrt-row-actions',
         props.positionExpandColumn === 'first' &&
-            (props.enableExpanding ||
-                props.enableGrouping ||
-                props.renderDetailPanel) &&
+            showExpandColumn(props) &&
             'mrt-row-expand',
         props.enableRowSelection && 'mrt-row-select',
         props.enableRowNumbers && 'mrt-row-numbers',
@@ -554,9 +555,7 @@ const getTrailingDisplayColumnIds = (props) => {
                 ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
             'mrt-row-actions',
         props.positionExpandColumn === 'last' &&
-            (props.enableExpanding ||
-                props.enableGrouping ||
-                props.renderDetailPanel) &&
+            showExpandColumn(props) &&
             'mrt-row-expand',
     ];
 };
@@ -2271,7 +2270,7 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
 };
 
 const MRT_TableRoot = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
     const bottomToolbarRef = React.useRef(null);
     const editInputRefs = React.useRef({});
     const filterInputRefs = React.useRef({});
@@ -2304,23 +2303,26 @@ const MRT_TableRoot = (props) => {
     const [editingCell, setEditingCell] = React.useState((_e = initialState.editingCell) !== null && _e !== void 0 ? _e : null);
     const [editingRow, setEditingRow] = React.useState((_f = initialState.editingRow) !== null && _f !== void 0 ? _f : null);
     const [globalFilterFn, setGlobalFilterFn] = React.useState((_g = initialState.globalFilterFn) !== null && _g !== void 0 ? _g : 'fuzzy');
-    const [hoveredColumn, setHoveredColumn] = React.useState((_h = initialState.hoveredColumn) !== null && _h !== void 0 ? _h : null);
-    const [hoveredRow, setHoveredRow] = React.useState((_j = initialState.hoveredRow) !== null && _j !== void 0 ? _j : null);
-    const [isFullScreen, setIsFullScreen] = React.useState((_k = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _k !== void 0 ? _k : false);
-    const [showAlertBanner, setShowAlertBanner] = React.useState((_m = (_l = props.initialState) === null || _l === void 0 ? void 0 : _l.showAlertBanner) !== null && _m !== void 0 ? _m : false);
-    const [showColumnFilters, setShowFilters] = React.useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _o !== void 0 ? _o : false);
-    const [showGlobalFilter, setShowGlobalFilter] = React.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _p !== void 0 ? _p : false);
+    const [grouping, setGrouping] = React.useState((_h = initialState.grouping) !== null && _h !== void 0 ? _h : []);
+    const [hoveredColumn, setHoveredColumn] = React.useState((_j = initialState.hoveredColumn) !== null && _j !== void 0 ? _j : null);
+    const [hoveredRow, setHoveredRow] = React.useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
+    const [isFullScreen, setIsFullScreen] = React.useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
+    const [showAlertBanner, setShowAlertBanner] = React.useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
+    const [showColumnFilters, setShowFilters] = React.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
+    const [showGlobalFilter, setShowGlobalFilter] = React.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
     const displayColumns = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return [
             columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 }, defaultDisplayColumnDefOptions), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-drag']), { id: 'mrt-row-drag' }),
             columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ToggleRowActionMenuButton, { row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, defaultDisplayColumnDefOptions), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
-            columnOrder.includes('mrt-row-expand') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React__default["default"].createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, defaultDisplayColumnDefOptions), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            columnOrder.includes('mrt-row-expand') &&
+                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React__default["default"].createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, defaultDisplayColumnDefOptions), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
             columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React__default["default"].createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, defaultDisplayColumnDefOptions), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
             columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, defaultDisplayColumnDefOptions), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
     }, [
         columnOrder,
+        grouping,
         props.displayColumnDefOptions,
         props.editingMode,
         props.enableColumnDragging,
@@ -2337,6 +2339,7 @@ const MRT_TableRoot = (props) => {
         props.enableSelectAll,
         props.localization,
         props.positionActionsColumn,
+        props.renderDetailPanel,
     ]);
     const columnDefs = React.useMemo(() => prepareColumns([...displayColumns, ...props.columns], columnFilterFns, props.filterFns, props.sortingFns), [columnFilterFns, displayColumns, props.columns]);
     const data = React.useMemo(() => {
@@ -2354,11 +2357,11 @@ const MRT_TableRoot = (props) => {
                 });
             })))
             : props.data;
-    }, [props.data, (_q = props.state) === null || _q === void 0 ? void 0 : _q.isLoading, (_r = props.state) === null || _r === void 0 ? void 0 : _r.showSkeletons]);
+    }, [props.data, (_r = props.state) === null || _r === void 0 ? void 0 : _r.isLoading, (_s = props.state) === null || _s === void 0 ? void 0 : _s.showSkeletons]);
     //@ts-ignore
-    const table = Object.assign(Object.assign({}, reactTable.useReactTable(Object.assign(Object.assign({ getCoreRowModel: reactTable.getCoreRowModel(), getExpandedRowModel: reactTable.getExpandedRowModel(), getFacetedRowModel: reactTable.getFacetedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel(), getGroupedRowModel: reactTable.getGroupedRowModel(), getPaginationRowModel: reactTable.getPaginationRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), onColumnOrderChange: setColumnOrder, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
+    const table = Object.assign(Object.assign({}, reactTable.useReactTable(Object.assign(Object.assign({ getCoreRowModel: reactTable.getCoreRowModel(), getExpandedRowModel: reactTable.getExpandedRowModel(), getFacetedRowModel: reactTable.getFacetedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel(), getGroupedRowModel: reactTable.getGroupedRowModel(), getPaginationRowModel: reactTable.getPaginationRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_t = (_s = props.filterFns) === null || _s === void 0 ? void 0 : _s[globalFilterFn]) !== null && _t !== void 0 ? _t : (_u = props.filterFns) === null || _u === void 0 ? void 0 : _u.fuzzy, initialState, state: Object.assign({ columnFilterFns,
+        columns: columnDefs, data, globalFilterFn: (_u = (_t = props.filterFns) === null || _t === void 0 ? void 0 : _t[globalFilterFn]) !== null && _u !== void 0 ? _u : (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v.fuzzy, initialState, state: Object.assign({ columnFilterFns,
             columnOrder,
             density,
             draggingColumn,
@@ -2366,6 +2369,7 @@ const MRT_TableRoot = (props) => {
             editingCell,
             editingRow,
             globalFilterFn,
+            grouping,
             hoveredColumn,
             hoveredRow,
             isFullScreen,
@@ -2378,7 +2382,7 @@ const MRT_TableRoot = (props) => {
             searchInputRef,
             tableContainerRef,
             topToolbarRef,
-        }, setColumnFilterFns: (_v = props.onFilterFnsChange) !== null && _v !== void 0 ? _v : setColumnFilterFns, setDensity: (_w = props.onDensityChange) !== null && _w !== void 0 ? _w : setDensity, setDraggingColumn: (_x = props.onDraggingColumnChange) !== null && _x !== void 0 ? _x : setDraggingColumn, setDraggingRow: (_y = props.onDraggingRowChange) !== null && _y !== void 0 ? _y : setDraggingRow, setEditingCell: (_z = props.onEditingCellChange) !== null && _z !== void 0 ? _z : setEditingCell, setEditingRow: (_0 = props.onEditingRowChange) !== null && _0 !== void 0 ? _0 : setEditingRow, setGlobalFilterFn: (_1 = props.onGlobalFilterFnChange) !== null && _1 !== void 0 ? _1 : setGlobalFilterFn, setHoveredColumn: (_2 = props.onHoveredColumnChange) !== null && _2 !== void 0 ? _2 : setHoveredColumn, setHoveredRow: (_3 = props.onHoveredRowChange) !== null && _3 !== void 0 ? _3 : setHoveredRow, setIsFullScreen: (_4 = props.onIsFullScreenChange) !== null && _4 !== void 0 ? _4 : setIsFullScreen, setShowAlertBanner: (_5 = props.onShowAlertBannerChange) !== null && _5 !== void 0 ? _5 : setShowAlertBanner, setShowFilters: (_6 = props.onShowFiltersChange) !== null && _6 !== void 0 ? _6 : setShowFilters, setShowGlobalFilter: (_7 = props.onShowGlobalFilterChange) !== null && _7 !== void 0 ? _7 : setShowGlobalFilter });
+        }, setColumnFilterFns: (_w = props.onFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setDensity: (_x = props.onDensityChange) !== null && _x !== void 0 ? _x : setDensity, setDraggingColumn: (_y = props.onDraggingColumnChange) !== null && _y !== void 0 ? _y : setDraggingColumn, setDraggingRow: (_z = props.onDraggingRowChange) !== null && _z !== void 0 ? _z : setDraggingRow, setEditingCell: (_0 = props.onEditingCellChange) !== null && _0 !== void 0 ? _0 : setEditingCell, setEditingRow: (_1 = props.onEditingRowChange) !== null && _1 !== void 0 ? _1 : setEditingRow, setGlobalFilterFn: (_2 = props.onGlobalFilterFnChange) !== null && _2 !== void 0 ? _2 : setGlobalFilterFn, setHoveredColumn: (_3 = props.onHoveredColumnChange) !== null && _3 !== void 0 ? _3 : setHoveredColumn, setHoveredRow: (_4 = props.onHoveredRowChange) !== null && _4 !== void 0 ? _4 : setHoveredRow, setIsFullScreen: (_5 = props.onIsFullScreenChange) !== null && _5 !== void 0 ? _5 : setIsFullScreen, setShowAlertBanner: (_6 = props.onShowAlertBannerChange) !== null && _6 !== void 0 ? _6 : setShowAlertBanner, setShowFilters: (_7 = props.onShowFiltersChange) !== null && _7 !== void 0 ? _7 : setShowFilters, setShowGlobalFilter: (_8 = props.onShowGlobalFilterChange) !== null && _8 !== void 0 ? _8 : setShowGlobalFilter });
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Dialog, { PaperComponent: material.Box, TransitionComponent: material.Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
             React__default["default"].createElement(MRT_TablePaper, { table: table })),