@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
61 lines (60 loc) • 2.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomColumnFilterExample = CustomColumnFilterExample;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const data_table_1 = require("../components/table/data-table");
const sampleData = [
{ id: 1, name: 'John Doe', age: 30, department: 'Engineering', salary: 75000, isActive: true },
{ id: 2, name: 'Jane Smith', age: 25, department: 'Marketing', salary: 60000, isActive: true },
{ id: 3, name: 'Bob Johnson', age: 35, department: 'Engineering', salary: 85000, isActive: false },
{ id: 4, name: 'Alice Brown', age: 28, department: 'HR', salary: 55000, isActive: true },
{ id: 5, name: 'Charlie Wilson', age: 42, department: 'Sales', salary: 70000, isActive: true },
];
const columns = [
{
accessorKey: 'name',
header: 'Name',
type: 'text',
},
{
accessorKey: 'age',
header: 'Age',
type: 'number',
},
{
accessorKey: 'department',
header: 'Department',
type: 'select',
options: [
{ label: 'Engineering', value: 'Engineering' },
{ label: 'Marketing', value: 'Marketing' },
{ label: 'HR', value: 'HR' },
{ label: 'Sales', value: 'Sales' },
],
},
{
accessorKey: 'salary',
header: 'Salary',
type: 'number',
cell: ({ getValue }) => {
const value = getValue();
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(value);
},
},
{
accessorKey: 'isActive',
header: 'Active',
type: 'boolean',
},
];
function CustomColumnFilterExample() {
const [data] = (0, react_1.useState)(sampleData);
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: "Custom Column Filter Feature Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: { mb: 3 }, children: "Click the filter icon in the toolbar to test the custom column filter feature." }), (0, jsx_runtime_1.jsx)(data_table_1.DataTable, { data: data, columns: columns, enableColumnFilter: true, enableGlobalFilter: true, enablePagination: true, enableSorting: true, onColumnFiltersChange: (filterState) => {
console.log('Custom Column Filter State Changed:', filterState);
} })] }));
}