material-react-table 2.2.0 → 2.3.0
Sign up to get free protection for your applications and to get access to all the features.
- 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) => {
|