@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
102 lines (101 loc) • 8.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectionTestExample = SelectionTestExample;
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 generateSampleData = () => {
const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'];
const firstNames = ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana', 'Eva', 'Frank', 'Grace', 'Henry'];
const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
return Array.from({ length: 25 }, (_, index) => ({
id: index + 1,
name: `${firstNames[index % firstNames.length]} ${lastNames[index % lastNames.length]}`,
email: `user${index + 1}@example.com`,
department: departments[index % departments.length],
salary: 50000 + (index * 5000),
isActive: Math.random() > 0.3,
}));
};
const sampleData = generateSampleData();
const columns = [
{
accessorKey: 'name',
header: 'Name',
size: 150,
},
{
accessorKey: 'email',
header: 'Email',
size: 200,
},
{
accessorKey: 'department',
header: 'Department',
size: 120,
},
{
accessorKey: 'salary',
header: 'Salary',
size: 100,
cell: ({ getValue }) => `$${getValue().toLocaleString()}`,
},
{
accessorKey: 'isActive',
header: 'Status',
size: 100,
cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue() ? 'Active' : 'Inactive', color: getValue() ? 'success' : 'default', size: "small" })),
},
];
function SelectionTestExample() {
const [selectMode, setSelectMode] = (0, react_1.useState)('page');
const [selectionState, setSelectionState] = (0, react_1.useState)({
ids: [],
type: 'include',
});
const tableRef = (0, react_1.useRef)(null);
const handleSelectionChange = (0, react_1.useCallback)((newSelectionState) => {
setSelectionState(newSelectionState);
}, []);
const handleSelectAll = (0, react_1.useCallback)(() => {
var _a;
(_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.selectAll();
}, []);
const handleDeselectAll = (0, react_1.useCallback)(() => {
var _a;
(_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.deselectAll();
}, []);
const handleSelectFirst5 = (0, react_1.useCallback)(() => {
const firstFiveIds = sampleData.slice(0, 5).map(user => user.id.toString());
firstFiveIds.forEach(id => {
var _a;
(_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.selectRow(id);
});
}, []);
const handleToggleRow = (0, react_1.useCallback)(() => {
var _a;
(_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.toggleRowSelection('3');
}, []);
const isRowSelectable = (0, react_1.useCallback)(({ row }) => {
return row.salary <= 100000;
}, []);
const selectedCount = selectionState.ids.length;
const selectedType = selectionState.type;
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: "Selection Test Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 3 }, children: "Test the custom selection feature with different modes and operations. Users with salary > $100,000 are disabled for selection." }), (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: { p: 2, mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Selection Mode" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { value: selectMode, label: "Selection Mode", onChange: (e) => setSelectMode(e.target.value), children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "page", children: "Page Mode" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "all", children: "All Mode" })] })] }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleSelectAll, children: "Select All" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleDeselectAll, children: "Deselect All" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleSelectFirst5, children: "Select First 5" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleToggleRow, children: "Toggle User #3" })] }) }), (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 2, mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Current Selection State" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Mode:" }), " ", selectMode] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Type:" }), " ", selectedType] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Count:" }), " ", selectedCount] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", sx: { gridColumn: '1 / -1' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "IDs:" }), " ", selectionState.ids.join(', ') || 'None'] })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 2 } }), (0, jsx_runtime_1.jsx)(components_1.DataTable, { ref: tableRef, data: sampleData, totalRow: sampleData.length, columns: columns, enableRowSelection: true, enableMultiRowSelection: true, selectMode: selectMode, isRowSelectable: isRowSelectable, onSelectionChange: handleSelectionChange, enablePagination: true, initialState: {
pagination: {
pageIndex: 0,
pageSize: 10,
},
}, enableBulkActions: true, bulkActions: (selectionState) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
const count = selectionState.type === 'include'
? selectionState.ids.length
: sampleData.length - selectionState.ids.length;
alert(`Exporting ${count} selected users (${selectionState.type} mode)`);
}, children: "\uD83D\uDCE4 Export Selected" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", color: "error", onClick: () => {
const count = selectionState.type === 'include'
? selectionState.ids.length
: sampleData.length - selectionState.ids.length;
alert(`Would delete ${count} selected users (${selectionState.type} mode)`);
}, children: "\uD83D\uDDD1\uFE0F Delete Selected" })] })), enableSorting: true, enableGlobalFilter: true, fitToScreen: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2 }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "text.secondary", children: ["\uD83D\uDCA1 ", (0, jsx_runtime_1.jsx)("strong", { children: "Test Instructions:" }), (0, jsx_runtime_1.jsx)("br", {}), "1. Try selecting rows in \"Page\" mode, then switch pages - selections should be page-specific", (0, jsx_runtime_1.jsx)("br", {}), "2. Try \"All\" mode and select rows - this works across all pages", (0, jsx_runtime_1.jsx)("br", {}), "3. Note that users with salary > $100k are disabled (grayed out checkboxes)", (0, jsx_runtime_1.jsx)("br", {}), "4. Use the control buttons to test programmatic selection", (0, jsx_runtime_1.jsx)("br", {}), "5. Watch the \"Current Selection State\" panel to see how the selection data changes"] }) })] }));
}