@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
45 lines (44 loc) • 3.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BulkActionsTest = BulkActionsTest;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const components_1 = require("../components");
const testData = [
{ id: 1, name: 'Item 1', value: 100 },
{ id: 2, name: 'Item 2', value: 200 },
{ id: 3, name: 'Item 3', value: 300 },
{ id: 4, name: 'Item 4', value: 400 },
{ id: 5, name: 'Item 5', value: 500 },
];
const columns = [
{
accessorKey: 'name',
header: 'Name',
size: 150,
},
{
accessorKey: 'value',
header: 'Value',
size: 100,
},
];
function BulkActionsTest() {
const [selectionInfo, setSelectionInfo] = (0, react_1.useState)('No selection');
const handleSelectionChange = (selection) => {
const count = selection.type === 'include'
? selection.ids.length
: testData.length - selection.ids.length;
setSelectionInfo(`Selected: ${count} items (${selection.type} mode) - IDs: [${selection.ids.join(', ')}]`);
};
const bulkActions = (0, react_1.useCallback)((selectionState) => {
const selectedCount = selectionState.type === 'include'
? selectionState.ids.length
: testData.length - selectionState.ids.length;
return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', gap: 1 }, children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
alert(`Action on ${selectedCount} items. Selection state: ${JSON.stringify(selectionState, null, 2)}`);
}, children: ["Test Action (", selectedCount, ")"] }) }));
}, []);
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", gutterBottom: true, children: "Bulk Actions Test" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 2 }, children: "This example tests that bulk actions work without infinite loops." }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", sx: { mb: 3, p: 2, backgroundColor: 'grey.100', borderRadius: 1 }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Current Selection:" }), " ", selectionInfo] }), (0, jsx_runtime_1.jsx)(components_1.DataTable, { data: testData, totalRow: testData.length, columns: columns, enableRowSelection: true, enableMultiRowSelection: true, enableBulkActions: true, bulkActions: bulkActions, onSelectionChange: handleSelectionChange, enablePagination: false, enableSorting: true, enableGlobalFilter: false, fitToScreen: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2, p: 2, backgroundColor: 'success.light', borderRadius: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "success.dark", children: "\u2705 If you can see this and select rows without the page freezing, the infinite loop issue is fixed!" }) })] }));
}