material-react-table 2.2.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +8 -7
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +8 -7
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/body/MRT_TableBody.tsx +20 -8
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +4 -5
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +2 -1
- package/src/types.ts +1 -0
package/dist/index.d.ts
CHANGED
@@ -554,6 +554,7 @@ type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef
|
|
554
554
|
table: MRT_TableInstance<TData>;
|
555
555
|
}) => ReactNode[];
|
556
556
|
sortingFn?: MRT_SortingFn<TData>;
|
557
|
+
visibleInShowHideMenu?: boolean;
|
557
558
|
};
|
558
559
|
type MRT_DisplayColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<MRT_ColumnDef<TData, TValue>, 'accessorFn' | 'accessorKey'>;
|
559
560
|
type MRT_GroupColumnDef<TData extends MRT_RowData> = MRT_DisplayColumnDef<TData, any> & {
|
package/dist/index.esm.js
CHANGED
@@ -2293,14 +2293,15 @@ const MRT_TableBody = (_a) => {
|
|
2293
2293
|
virtualPaddingLeft,
|
2294
2294
|
virtualPaddingRight,
|
2295
2295
|
};
|
2296
|
+
const CreatingRow = creatingRow && createDisplayMode === 'row' && (jsx(MRT_TableBodyRow, Object.assign({}, commonRowProps, { row: creatingRow, rowIndex: -1 })));
|
2296
2297
|
return (jsxs(Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
|
2297
2298
|
getIsSomeRowsPinned('top') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, rowIndex) => {
|
2298
2299
|
const props = Object.assign(Object.assign({}, commonRowProps), { row,
|
2299
2300
|
rowIndex });
|
2300
2301
|
return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
|
2301
|
-
}) }))), jsxs(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
|
2302
|
+
}) }))), rowVirtualizer && CreatingRow && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: CreatingRow }))), jsxs(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
|
2302
2303
|
? `${rowVirtualizer.getTotalSize()}px`
|
2303
|
-
: undefined, minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [
|
2304
|
+
: undefined, minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [!rowVirtualizer && CreatingRow, (_d = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _d !== void 0 ? _d : (!rows.length && !CreatingRow ? (jsx("tr", { style: {
|
2304
2305
|
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
2305
2306
|
}, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
|
2306
2307
|
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
@@ -3336,7 +3337,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3336
3337
|
setHoveredColumn(column);
|
3337
3338
|
}
|
3338
3339
|
};
|
3339
|
-
if (!columnDef.header)
|
3340
|
+
if (!columnDef.header || columnDef.visibleInShowHideMenu === false)
|
3340
3341
|
return null;
|
3341
3342
|
return (jsxs(Fragment, { children: [jsx(MenuItem, Object.assign({ disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', justifyContent: 'flex-start', my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging
|
3342
3343
|
? `2px dashed ${theme.palette.grey[500]}`
|
@@ -3362,12 +3363,12 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3362
3363
|
|
3363
3364
|
const MRT_ShowHideColumnsMenu = (_a) => {
|
3364
3365
|
var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
|
3365
|
-
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, },
|
3366
|
+
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, } = table;
|
3366
3367
|
const { columnOrder, columnPinning, density } = getState();
|
3367
|
-
const
|
3368
|
+
const handleToggleAllColumns = (value) => {
|
3368
3369
|
getAllLeafColumns()
|
3369
3370
|
.filter((col) => col.columnDef.enableHiding !== false)
|
3370
|
-
.forEach((col) => col.toggleVisibility(
|
3371
|
+
.forEach((col) => col.toggleVisibility(value));
|
3371
3372
|
};
|
3372
3373
|
const allColumns = useMemo(() => {
|
3373
3374
|
const columns = getAllColumns();
|
@@ -3396,7 +3397,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
|
|
3396
3397
|
justifyContent: 'space-between',
|
3397
3398
|
p: '0.5rem',
|
3398
3399
|
pt: 0,
|
3399
|
-
}, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick:
|
3400
|
+
}, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
|
3400
3401
|
};
|
3401
3402
|
|
3402
3403
|
const MRT_ShowHideColumnsButton = (_a) => {
|