@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
53 lines (52 loc) • 2.97 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");
const createSelectionColumn = (config) => (Object.assign({ id: types_1.DEFAULT_SELECTION_COLUMN_NAME, size: 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;
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 },
});
}, cell: ({ row, table }) => {
var _a, _b, _c;
const rowId = row.id;
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
},
});
} }, config));
exports.createSelectionColumn = createSelectionColumn;
const createExpandingColumn = (config) => (Object.assign({ id: types_1.DEFAULT_EXPANDING_COLUMN_NAME, size: 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 },
}, row.getIsExpanded() ? (0, react_1.createElement)(icons_material_1.KeyboardArrowUpOutlined) : (0, react_1.createElement)(icons_material_1.KeyboardArrowDownOutlined)) }, config));
exports.createExpandingColumn = createExpandingColumn;