@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
96 lines (95 loc) • 3.75 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.createExpandingColumn = exports.createSelectionColumn = void 0;
const icons_material_1 = require("@mui/icons-material");
const material_1 = require("@mui/material");
const react_1 = require("react");
const types_1 = require("../types");
/**
* Creates a default selection column using TanStack Table custom feature methods
*/
const createSelectionColumn = (config) => ({
id: types_1.DEFAULT_SELECTION_COLUMN_NAME,
maxSize: 60,
minSize: 60,
align: 'center',
filterable: false,
enableResizing: false,
enableSorting: false,
enableHiding: false,
enablePinning: false,
hideInExport: true,
header: ({ table }) => {
var _a, _b;
if (!config.multiSelect)
return null;
// Use TanStack Table custom feature methods (same pattern as TanStack documentation)
const allSelected = ((_a = table.getIsAllRowsSelected) === null || _a === void 0 ? void 0 : _a.call(table)) || false;
const someSelected = ((_b = table.getIsSomeRowsSelected) === null || _b === void 0 ? void 0 : _b.call(table)) || false;
return (0, react_1.createElement)(material_1.Checkbox, {
checked: allSelected,
indeterminate: someSelected && !allSelected,
disabled: false,
onChange: () => {
var _a;
(_a = table.toggleAllRowsSelected) === null || _a === void 0 ? void 0 : _a.call(table);
},
size: 'small',
sx: { p: 0 },
role: 'checkbox',
'aria-checked': allSelected ? 'true' : (someSelected ? 'mixed' : 'false'),
});
},
cell: ({ row, table }) => {
var _a, _b, _c;
const rowId = row.id;
// Use TanStack Table custom feature methods (same pattern as TanStack documentation)
const checked = ((_a = table.getIsRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, rowId)) || false;
const canSelect = (_c = (_b = table.canSelectRow) === null || _b === void 0 ? void 0 : _b.call(table, rowId)) !== null && _c !== void 0 ? _c : true;
return (0, react_1.createElement)(material_1.Checkbox, {
checked,
disabled: !canSelect,
onChange: () => {
var _a;
if (canSelect) {
(_a = table.toggleRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, rowId);
}
},
size: 'small',
sx: {
p: 0,
opacity: canSelect ? 1 : 0.5
},
role: 'checkbox',
'aria-checked': checked ? 'true' : 'false',
});
},
...config,
});
exports.createSelectionColumn = createSelectionColumn;
/**
* Creates a default expanding column
*/
const createExpandingColumn = (config) => ({
id: types_1.DEFAULT_EXPANDING_COLUMN_NAME,
maxSize: 60,
minSize: 60,
align: 'center',
filterable: false,
enableResizing: false,
enableSorting: false,
enableHiding: false,
enablePinning: false,
hideInExport: true,
header: '',
cell: ({ row }) => (0, react_1.createElement)(material_1.IconButton, {
onClick: row.getToggleExpandedHandler(),
size: 'small',
sx: { p: 0 },
role: 'button',
'aria-label': row.getIsExpanded() ? 'Collapse row' : 'Expand row',
'aria-expanded': row.getIsExpanded(),
}, row.getIsExpanded() ? (0, react_1.createElement)(icons_material_1.KeyboardArrowUpOutlined) : (0, react_1.createElement)(icons_material_1.KeyboardArrowDownOutlined)),
...config,
});
exports.createExpandingColumn = createExpandingColumn;