material-react-table 1.4.0-beta.0 → 1.4.0-beta.1

package/README.md

@@ -188,3 +188,5 @@ _Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-exa
 </a>
 
 PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!
+
+Read the [Contributing Guide](https://github.com/KevinVandy/material-react-table/blob/main/CONTRIBUTING.md) to learn how to run this project locally.

package/dist/cjs/index.js

@@ -329,7 +329,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
         ? tableCellProps.sx(theme)
         : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { flex: table.options.layoutMode === 'grid'
             ? `${column.getSize()} 0 auto`
-            : undefined, maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
+            : undefined, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
 };
 const MRT_DefaultColumn = {
     minSize: 40,
@@ -1779,7 +1779,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     var _a, _b, _c;
-    const { options: { icons: { FilterAltIcon }, localization, }, } = table;
+    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const isRangeFilter = columnDef.filterVariant === 'range' ||
@@ -1801,6 +1801,12 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         React__default["default"].createElement(Box__default["default"], { component: "span", sx: { flex: '0 0' } },
             React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip },
                 React__default["default"].createElement(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
+                        setShowFilters(true);
+                        queueMicrotask(() => {
+                            var _a, _b;
+                            (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus();
+                            (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
+                        });
                         event.stopPropagation();
                     }, size: "small", sx: {
                         height: '12px',
@@ -1965,11 +1971,11 @@ const MRT_TableHeadCell = ({ header, table }) => {
             table,
         })
         : (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) !== null && _b !== void 0 ? _b : columnDef.header;
-    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', component: layoutMode === 'grid' ? 'div' : 'td', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
-        }, role: "columnheader" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
+        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? columnDefType === 'display'
@@ -2041,7 +2047,7 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
     const tableRowProps = muiTableHeadRowProps instanceof Function
         ? muiTableHeadRowProps({ headerGroup, table })
         : muiTableHeadRowProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'tr', role: "row" }, tableRowProps, { sx: (theme) => (Object.assign({ boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', backgroundColor: styles.lighten(theme.palette.background.default, 0.04) }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
             ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
             : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), headerGroup.headers.map((header) => (React__default["default"].createElement(MRT_TableHeadCell, { header: header, key: header.id, table: table })))));
 };
@@ -2053,7 +2059,7 @@ const MRT_TableHead = ({ table }) => {
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
     const stickyHeader = enableStickyHeader || enableRowVirtualization || isFullScreen;
-    return (React__default["default"].createElement(TableHead__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'thead', role: "rowgroup" }, tableHeadProps, { sx: (theme) => (Object.assign({ opacity: 0.97, position: stickyHeader ? 'sticky' : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
+    return (React__default["default"].createElement(TableHead__default["default"], Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
             ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
             : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React__default["default"].createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
@@ -2266,7 +2272,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'td', role: "gridcell" }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
+    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -2309,7 +2315,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
 const Memo_MRT_TableBodyCell = React.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
 const MRT_TableDetailPanel = ({ row, table }) => {
-    const { getVisibleLeafColumns, getState, options: { muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
+    const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
         ? muiTableBodyRowProps({ row, table })
@@ -2317,7 +2323,9 @@ const MRT_TableDetailPanel = ({ row, table }) => {
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })
         : muiTableDetailPanelProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps),
+    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({ sx: {
+            display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        } }, tableRowProps),
         React__default["default"].createElement(TableCell__default["default"], Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
                 : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
@@ -2347,12 +2355,12 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
         }
         : undefined;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TableRow__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'tr', hover: true, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
+        React__default["default"].createElement(TableRow__default["default"], Object.assign({ hover: true, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
                 rowRef.current = node;
                 if (virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.measureRef) {
                     virtualRow.measureRef = node;
                 }
-            }, role: "row" }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 150ms ease-in-out', '&:hover td': {
+            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 150ms ease-in-out', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
                         ? theme.palette.mode === 'dark'
                             ? `${styles.lighten(theme.palette.background.default, 0.12)}`
@@ -2382,7 +2390,7 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
 const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row);
 
 const MRT_TableBody = ({ table }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualFiltering, manualSorting, memoMode, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
     const { columnFilters, globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
@@ -2449,14 +2457,14 @@ const MRT_TableBody = ({ table }) => {
     //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
     //     : 0;
     // }
-    return (React__default["default"].createElement(TableBody__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'tbody', role: "rowgroup" }, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
+    return (React__default["default"].createElement(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
             ? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
-            : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }), ((_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : !rows.length) ? (React__default["default"].createElement("tr", null,
-        React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length },
+            : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }), ((_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : !rows.length) ? (React__default["default"].createElement("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } },
+        React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length, style: { display: layoutMode === 'grid' ? 'grid' : 'table-cell' } },
             React__default["default"].createElement(Typography__default["default"], { sx: {
                     color: 'text.secondary',
                     fontStyle: 'italic',
-                    maxWidth: `min(100vw, ${(_b = tablePaperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth}px)`,
+                    maxWidth: `min(100vw, ${(_c = (_b = tablePaperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 360}px)`,
                     py: '2rem',
                     textAlign: 'center',
                     width: '100%',
@@ -2488,7 +2496,7 @@ const Memo_MRT_TableBody = React.memo(MRT_TableBody, (prev, next) => prev.table.
 
 const MRT_TableFooterCell = ({ footer, table }) => {
     var _a, _b, _c;
-    const { getState, options: { muiTableFooterCellProps }, } = table;
+    const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
@@ -2500,7 +2508,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
         ? columnDef.muiTableFooterCellProps({ column, table })
         : columnDef.muiTableFooterCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
-    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ fontWeight: 'bold', p: density === 'compact'
+    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
@@ -2518,7 +2526,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
 
 const MRT_TableFooterRow = ({ footerGroup, table }) => {
     var _a;
-    const { options: { muiTableFooterRowProps }, } = table;
+    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
     // if no content in row, skip row
     if (!((_a = footerGroup.headers) === null || _a === void 0 ? void 0 : _a.some((header) => (typeof header.column.columnDef.footer === 'string' &&
         !!header.column.columnDef.footer) ||
@@ -2527,17 +2535,19 @@ const MRT_TableFooterRow = ({ footerGroup, table }) => {
     const tableRowProps = muiTableFooterRowProps instanceof Function
         ? muiTableFooterRowProps({ footerGroup, table })
         : muiTableFooterRowProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps), footerGroup.headers.map((footer) => (React__default["default"].createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
+    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+            ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), footerGroup.headers.map((footer) => (React__default["default"].createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
 };
 
 const MRT_TableFooter = ({ table }) => {
-    const { getFooterGroups, getState, options: { enableStickyFooter, muiTableFooterProps }, } = table;
+    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, } = table;
     const { isFullScreen } = getState();
     const tableFooterProps = muiTableFooterProps instanceof Function
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (React__default["default"].createElement(TableFooter__default["default"], Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
+    return (React__default["default"].createElement(TableFooter__default["default"], Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
@@ -2552,7 +2562,7 @@ const MRT_Table = ({ table }) => {
     const tableProps = muiTableProps instanceof Function
         ? muiTableProps({ table })
         : muiTableProps;
-    return (React__default["default"].createElement(Table__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'table', role: "grid", stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
+    return (React__default["default"].createElement(Table__default["default"], Object.assign({ stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React__default["default"].createElement(MRT_TableHead, { table: table }),