@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
98 lines (97 loc) • 6.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SimpleLocalExample = SimpleLocalExample;
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 products = [
{ id: 1, name: 'Laptop Pro', category: 'Electronics', price: 1299, inStock: true, rating: 4.5 },
{ id: 2, name: 'Wireless Mouse', category: 'Electronics', price: 29, inStock: true, rating: 4.2 },
{ id: 3, name: 'Coffee Mug', category: 'Kitchen', price: 12, inStock: false, rating: 4.8 },
{ id: 4, name: 'Desk Chair', category: 'Furniture', price: 189, inStock: true, rating: 4.0 },
{ id: 5, name: 'Notebook Set', category: 'Office', price: 15, inStock: true, rating: 4.3 },
{ id: 6, name: 'Water Bottle', category: 'Kitchen', price: 22, inStock: true, rating: 4.7 },
{ id: 7, name: 'Monitor Stand', category: 'Electronics', price: 45, inStock: false, rating: 4.1 },
{ id: 8, name: 'Pen Set', category: 'Office', price: 8, inStock: true, rating: 3.9 },
{ id: 9, name: 'Table Lamp', category: 'Furniture', price: 67, inStock: true, rating: 4.4 },
{ id: 10, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
{ id: 11, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
{ id: 12, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
{ id: 13, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
{ id: 14, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
{ id: 15, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
{ id: 16, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
{ id: 17, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
];
const columns = [
{
accessorKey: 'name',
header: 'Product Name',
size: 180,
},
{
accessorKey: 'category',
header: 'Category',
size: 120,
cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue(), size: "small", variant: "outlined", color: "primary" })),
},
{
accessorKey: 'price',
header: 'Price',
size: 100,
cell: ({ getValue }) => `$${getValue().toFixed(2)}`,
},
{
accessorKey: 'inStock',
header: 'In Stock',
size: 100,
cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue() ? 'Yes' : 'No', color: getValue() ? 'success' : 'error', size: "small" })),
},
{
accessorKey: 'rating',
header: 'Rating',
size: 100,
cell: ({ getValue }) => `⭐ ${getValue().toFixed(1)}`,
},
];
function SimpleLocalExample() {
const bulkActions = (0, react_1.useCallback)((selectionState) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 1 }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
const count = selectionState.type === 'include'
? selectionState.ids.length
: products.length - selectionState.ids.length;
alert(`Selected ${count} products (${selectionState.type} mode)`);
}, style: {
padding: '8px 16px',
borderRadius: '4px',
border: '1px solid #ccc',
background: '#f5f5f5',
cursor: 'pointer'
}, children: "\uD83D\uDCCA Show Count" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
let selectedProducts;
if (selectionState.type === 'include') {
selectedProducts = products.filter(p => selectionState.ids.includes(p.id.toString()));
}
else {
selectedProducts = products.filter(p => !selectionState.ids.includes(p.id.toString()));
}
const total = selectedProducts.reduce((sum, product) => sum + product.price, 0);
alert(`Total value: $${total.toFixed(2)}`);
}, style: {
padding: '8px 16px',
borderRadius: '4px',
border: '1px solid #ccc',
background: '#f5f5f5',
cursor: 'pointer'
}, children: "\uD83D\uDCB0 Calculate Total" })] })), []);
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: "Simple Local Data Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 3 }, children: "A basic example using static local data with no API calls. Demonstrates essential DataTable features with minimal setup." }), (0, jsx_runtime_1.jsx)(components_1.DataTable, { data: products, totalRow: products.length, columns: columns, enableSorting: true, enableGlobalFilter: true, enableColumnFilter: true, enableColumnResizing: true, enableRowSelection: true, enableBulkActions: true, bulkActions: bulkActions, fitToScreen: true, initialState: {
pagination: {
pageIndex: 0,
pageSize: 5,
},
}, slotProps: {
pagination: {
rowsPerPageOptions: [5, 10, 20, 30, 40, 50],
},
} }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2, p: 2, backgroundColor: 'grey.50', borderRadius: 1 }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "text.secondary", children: ["\uD83D\uDCA1 ", (0, jsx_runtime_1.jsx)("strong", { children: "This example demonstrates:" }), (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Basic table with static local data", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Simple column definitions with custom cell renderers", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Sorting, filtering, and pagination", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Row selection with bulk actions", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Minimal setup - perfect for getting started"] }) })] }));
}