material-react-table 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/cjs/index.js

@@ -495,6 +495,17 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
     }
     return newIndexs;
 };
+function createMRTColumnHelper() {
+    return {
+        accessor: (accessor, column) => {
+            return typeof accessor === 'function'
+                ? Object.assign(Object.assign({}, column), { accessorFn: accessor })
+                : Object.assign(Object.assign({}, column), { accessorKey: accessor });
+        },
+        display: (column) => column,
+        group: (column) => column,
+    };
+}
 
 const MRT_GrabHandleButton = ({ iconButtonProps, location, onDragEnd, onDragStart, table, }) => {
     var _a;
@@ -620,7 +631,7 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, label: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
+        }, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? columnDef.header
             : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? columnDef.header
@@ -690,13 +701,15 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
         const isFirstColumn = getIsFirstColumn(column, table);
         const isLastColumn = getIsLastColumn(column, table);
         const isLastRow = numRows && rowIndex === numRows - 1;
-        const borderStyle = isDraggingColumn || isDraggingRow
-            ? `1px dashed ${theme.palette.text.secondary} !important`
-            : isHoveredColumn ||
-                isHoveredRow ||
-                columnSizingInfo.isResizingColumn === column.id
-                ? `2px dashed ${theme.palette.primary.main} !important`
-                : undefined;
+        const borderStyle = columnSizingInfo.isResizingColumn === column.id
+            ? `2px solid ${theme.palette.primary.main} !important`
+            : isDraggingColumn || isDraggingRow
+                ? `1px dashed ${theme.palette.text.secondary} !important`
+                : isHoveredColumn ||
+                    isHoveredRow ||
+                    columnSizingInfo.isResizingColumn === column.id
+                    ? `2px dashed ${theme.palette.primary.main} !important`
+                    : undefined;
         if (columnSizingInfo.isResizingColumn === column.id) {
             return { borderRight: borderStyle };
         }
@@ -1717,11 +1730,13 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
             ? undefined
             : filterPlaceholder, variant: 'standard' }, textFieldProps), { sx: (theme) => (Object.assign({ minWidth: isDateFilter
                 ? '160px'
-                : isRangeFilter
-                    ? '100px'
-                    : !filterChipLabel
-                        ? '120px'
-                        : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
+                : enableColumnFilterModes && rangeFilterIndex === 0
+                    ? '110px'
+                    : isRangeFilter
+                        ? '100px'
+                        : !filterChipLabel
+                            ? '120px'
+                            : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isDateFilter ? (jsxRuntime.jsx(DatePicker.DatePicker, Object.assign({ onChange: (newDate) => {
                     handleChange(newDate);
                 }, value: filterValue || null }, datePickerProps, { slotProps: {
@@ -2115,7 +2130,7 @@ const MRT_TableHeadCell = ({ header, table, }) => {
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: [header.isPlaceholder ? null : (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
+        })), draggingBorders)), children: [header.isPlaceholder || column.id === 'mrt-row-spacer' ? null : (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
@@ -2988,9 +3003,7 @@ const MRT_ExpandAllButton = ({ table, }) => {
         table,
     });
     const isAllRowsExpanded = getIsAllRowsExpanded();
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
-            ? localization.collapseAll
-            : localization.expandAll, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
+    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isAllRowsExpanded ? localization.collapseAll : localization.expandAll), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
                         transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -3012,9 +3025,7 @@ const MRT_ExpandButton = ({ row, table, }) => {
         row.toggleExpanded();
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
     };
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
-            ? localization.collapse
-            : localization.expand, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !renderDetailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
+    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isExpanded ? localization.collapse : localization.expand), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !renderDetailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
                         transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -3093,7 +3104,7 @@ const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOption
             ((_x = (_w = tableOptions.state) === null || _w === void 0 ? void 0 : _w.columnOrder) !== null && _x !== void 0 ? _x : columnOrder).includes('mrt-row-spacer') && {
                 columnDefType: 'display',
                 header: '',
-                id: 'spacer',
+                id: 'mrt-row-spacer',
                 muiTableBodyCellProps: blankColProps,
                 muiTableFooterCellProps: blankColProps,
                 muiTableHeadCellProps: blankColProps,
@@ -3747,6 +3758,7 @@ exports.Memo_MRT_TableBodyRow = Memo_MRT_TableBodyRow;
 exports.commonListItemStyles = commonListItemStyles;
 exports.commonMenuItemStyles = commonMenuItemStyles;
 exports.commonToolbarStyles = commonToolbarStyles;
+exports.createMRTColumnHelper = createMRTColumnHelper;
 exports.createRow = createRow;
 exports.extraIndexRangeExtractor = extraIndexRangeExtractor;
 exports.flexRender = flexRender;