@ackplus/react-tanstack-data-table 1.0.19-beta-0.6

package/lib/examples/basic-example.js

@@ -0,0 +1,323 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Chip, MenuItem, FormControl, InputLabel, Select, } from '@mui/material';
+import { useState } from 'react';
+import { DataTable } from '../components';
+// Cell renderers (moved outside to avoid recreation on each render)
+function StatusCell({ getValue }) {
+    return (_jsx(Chip, { label: getValue(), color: getValue() === 'active' ? 'success' : 'default', size: "small" }));
+}
+const DateCell = ({ getValue }) => (new Date(getValue()).toLocaleDateString());
+function BooleanCell({ getValue }) {
+    return (_jsx(Chip, { label: getValue() ? 'Yes' : 'No', color: getValue() ? 'success' : 'default', size: "small" }));
+}
+// Custom filter component example for priority
+function PriorityFilterComponent({ value, onChange }) {
+    return (_jsxs(FormControl, { size: "small", sx: { minWidth: 120 }, children: [_jsx(InputLabel, { children: "Priority" }), _jsxs(Select, { value: value, label: "Priority", onChange: (e) => onChange(e.target.value), children: [_jsx(MenuItem, { value: 1, children: "High (1)" }), _jsx(MenuItem, { value: 2, children: "Medium (2)" }), _jsx(MenuItem, { value: 3, children: "Low (3)" })] })] }));
+}
+// Example data
+const sampleData = [
+    {
+        id: 1,
+        name: 'John Doe',
+        email: 'john@example.com',
+        role: {
+            id: 1,
+            name: 'Admin',
+        },
+        status: 'active',
+        createdAt: '2024-01-15',
+        isActive: true,
+        priority: 1,
+    },
+    {
+        id: 2,
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        role: {
+            id: 2,
+            name: 'User',
+        },
+        status: 'active',
+        createdAt: '2024-01-20',
+        isActive: true,
+        priority: 2,
+    },
+    {
+        id: 3,
+        name: 'Bob Wilson',
+        email: 'bob@example.com',
+        role: {
+            id: 3,
+            name: 'Moderator',
+        },
+        status: 'inactive',
+        createdAt: '2024-02-01',
+        isActive: false,
+        priority: 3,
+    },
+    {
+        id: 4,
+        name: 'John Doe',
+        email: 'john@example.com',
+        role: {
+            id: 1,
+            name: 'Admin',
+        },
+        status: 'active',
+        createdAt: '2024-01-15',
+        isActive: true,
+        priority: 1,
+    },
+    {
+        id: 5,
+        name: 'John Doe',
+        email: 'john@example.com',
+        role: {
+            id: 1,
+            name: 'Admin',
+        },
+        status: 'active',
+        createdAt: '2024-01-15',
+        isActive: true,
+        priority: 1,
+    },
+    {
+        id: 6,
+        name: 'John Doe',
+        email: 'john@example.com',
+        role: {
+            id: 1,
+            name: 'Admin',
+        },
+        status: 'active',
+        createdAt: '2024-01-15',
+        isActive: true,
+        priority: 1,
+    },
+    {
+        id: 7,
+        name: 'John Doe',
+        email: 'john@example.com',
+        role: {
+            id: 1,
+            name: 'Admin',
+        },
+        status: 'active',
+        createdAt: '2024-01-15',
+        isActive: true,
+        priority: 1,
+    },
+];
+export function DataTableExample() {
+    const [selectedUsers, setSelectedUsers] = useState([]);
+    const [loading, setLoading] = useState(false);
+    /*
+    Enhanced Column Filtering Features:
+
+    1. Type-based Input Components:
+       - text: Regular text input
+       - number: Number input with validation
+       - date: Date picker
+       - boolean: Yes/No dropdown
+       - select: Dropdown with predefined options
+
+    2. Column Meta Configuration:
+       meta: {
+         type: 'text' | 'number' | 'date' | 'boolean' | 'select',
+         filterable: true/false,
+         options: [{ value: 'key', label: 'Display' }], // For select types
+         filterComponent: CustomComponent, // Custom filter component
+         enableColumnOrdering: false // Disable drag & drop for this column
+       }
+
+    3. Custom Filter Components:
+       - Receive props: { value, onChange, filter, column }
+       - Can implement API search, autocomplete, etc.
+
+    4. Filter Logic:
+       - Switch between AND/OR logic for multiple filters
+
+    5. Column Drag & Drop Control:
+       - Set enableColumnOrdering: false in column meta to disable dragging
+       - Columns without this setting (or set to true) can be dragged
+       - Drag handle (⋮⋮) only shows for draggable columns
+       - Visual indicators and smart UI
+    */
+    // Define columns with proper typing and filtering metadata
+    const columns = [
+        {
+            id: 'name',
+            accessorKey: 'name',
+            header: 'Name',
+            enableSorting: true,
+            enableHiding: false,
+            meta: {
+                type: 'text',
+                filterable: true,
+            },
+        },
+        {
+            id: 'email',
+            accessorKey: 'email',
+            header: 'Email',
+            enableSorting: true,
+            meta: {
+                type: 'text',
+                filterable: true,
+                enableColumnOrdering: false, // Disable dragging for this column
+            },
+        },
+        {
+            id: 'role',
+            accessorKey: 'role.name',
+            header: 'Role',
+            enableSorting: true,
+            minSize: 400,
+            meta: {
+                type: 'select',
+                filterable: true,
+                options: [
+                    {
+                        value: 'Admin',
+                        label: 'Administrator',
+                    },
+                    {
+                        value: 'User',
+                        label: 'Regular User',
+                    },
+                    {
+                        value: 'Moderator',
+                        label: 'Moderator',
+                    },
+                ],
+            },
+        },
+        {
+            id: 'status',
+            accessorKey: 'status',
+            header: 'Status',
+            cell: StatusCell,
+            enableSorting: true,
+            minSize: 400,
+            meta: {
+                type: 'select',
+                filterable: true,
+                options: [
+                    {
+                        value: 'active',
+                        label: 'Active',
+                    },
+                    {
+                        value: 'inactive',
+                        label: 'Inactive',
+                    },
+                ],
+                enableColumnOrdering: false, // Disable dragging for this column
+            },
+        },
+        {
+            id: 'role_id',
+            accessorKey: 'role.id',
+            header: 'Is Active',
+            cell: BooleanCell,
+            enableSorting: false, // Disable sorting for this column to show difference
+            minSize: 200,
+            meta: {
+                type: 'boolean',
+                filterable: true,
+            },
+        },
+        {
+            id: 'isActive',
+            accessorKey: 'isActive',
+            header: 'Is Active',
+            cell: BooleanCell,
+            minSize: 200,
+            enableSorting: false, // Disable sorting for this column to show difference
+            meta: {
+                type: 'boolean',
+                filterable: true,
+            },
+        },
+        {
+            id: 'priority',
+            accessorKey: 'priority',
+            header: 'Priority',
+            enableSorting: true,
+            minSize: 200,
+            meta: {
+                type: 'number',
+                filterable: true,
+                filterComponent: PriorityFilterComponent,
+            },
+        },
+        {
+            id: 'createdAt',
+            accessorKey: 'createdAt',
+            header: 'Created At',
+            cell: DateCell,
+            enableSorting: true,
+            minSize: 400,
+            meta: {
+                type: 'date',
+                filterable: true,
+            },
+        },
+    ];
+    const handleSelectionChange = (selected) => {
+        setSelectedUsers(selected);
+    };
+    const handleColumnFiltersChange = (filterState) => {
+        console.log('Column filters changed:', filterState);
+        // You can implement custom filtering logic here
+        // filterState.filters contains the active filters
+        // filterState.logic contains 'AND' or 'OR'
+    };
+    const handleSortingChange = (sorting) => {
+        console.log('Sorting changed:', sorting);
+        // You can implement server-side sorting here
+        // sorting is an array of { id: string, desc: boolean }
+        // For server-side: send sorting to your API
+        // For client-side: TanStack handles it automatically
+    };
+    const handleColumnOrderChange = (columnOrder) => {
+        console.log('Column order changed:', columnOrder);
+        // You can implement custom column ordering logic here
+        // columnOrder is an array of column ids in the new order
+    };
+    const handleColumnPinningChange = (pinning) => {
+        console.log('Column pinning changed:', pinning);
+        // You can implement custom column pinning logic here
+        // pinning contains { left: string[], right: string[] }
+    };
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "DataTable Example - Sticky Header & Footer" }), _jsx("p", { style: {
+                    marginBottom: '20px',
+                    color: '#666',
+                }, children: "This table has a fixed height with sticky header and footer. The table body scrolls independently while header and pagination remain visible." }), selectedUsers.length > 0 && (_jsxs("div", { style: { marginBottom: '16px' }, children: [_jsxs("h3", { children: ["Selected Users:", selectedUsers.length] }), selectedUsers.map(user => (_jsxs("div", { children: [user.name, ' ', "-", ' ', user.email] }, user.id)))] })), _jsx(DataTable, { data: sampleData, columns: columns, totalRow: sampleData.length, loading: loading, skeletonRows: 8, enableRowSelection: true, enableMultiRowSelection: true, onRowSelectionChange: handleSelectionChange, enableColumnResizing: true, columnResizeMode: "onChange", enablePagination: true, enableGlobalFilter: true, enableColumnFilters: true, enableSorting: true, onSortingChange: handleSortingChange, enableHover: true, enableStripes: true, enableColumnVisibility: true, enableExport: true, enableReset: true, selectMode: "page", onColumnFiltersChange: handleColumnFiltersChange, enableStickyHeaderOrFooter: true, draggable: true, enableColumnPinning: true, onColumnPinningChange: handleColumnPinningChange, onColumnDragEnd: handleColumnOrderChange, maxHeight: "300px", extraFilter: (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => setLoading(!loading), color: loading ? 'secondary' : 'primary', children: loading ? 'Stop Loading' : 'Show Loading' }), _jsx(Button, { variant: "outlined", size: "small", children: "Custom Filter" })] })), slotProps: {
+                    pagination: {
+                        rowsPerPageOptions: [5, 20, 50, 100],
+                    },
+                } })] }));
+}
+// Example with expandable rows
+export function DataTableExpandableExample() {
+    const expandableColumns = [
+        {
+            accessorKey: 'name',
+            header: 'Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+        },
+        {
+            accessorKey: 'role',
+            header: 'Role',
+        },
+    ];
+    const renderSubComponent = (row) => (_jsxs("div", { style: {
+            padding: '16px',
+            backgroundColor: '#f5f5f5',
+        }, children: [_jsx("h4", { children: "User Details" }), _jsxs("p", { children: [_jsx("strong", { children: "ID:" }), ' ', row.original.id] }), _jsxs("p", { children: [_jsx("strong", { children: "Status:" }), ' ', row.original.status] }), _jsxs("p", { children: [_jsx("strong", { children: "Created:" }), ' ', row.original.createdAt] })] }));
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "DataTable with Expandable Rows" }), _jsx(DataTable, { data: sampleData, enableRowSelection: true, columns: expandableColumns, totalRow: sampleData.length, enableExpanding: true, renderSubComponent: renderSubComponent, getRowCanExpand: () => true, enableColumnResizing: true, enableGlobalFilter: true })] }));
+}

package/lib/examples/bulk-actions-test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-actions-test.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/bulk-actions-test.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,eAAe,4CAyE9B"}

package/lib/examples/bulk-actions-test.js

@@ -0,0 +1,47 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Box, Typography, Button } from '@mui/material';
+import { DataTable } from '../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,
+    },
+];
+export function BulkActionsTest() {
+    const [selectionInfo, setSelectionInfo] = 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 = useCallback((selectionState) => {
+        const selectedCount = selectionState.type === 'include'
+            ? selectionState.ids.length
+            : testData.length - selectionState.ids.length;
+        return (_jsx(Box, { sx: { display: 'flex', gap: 1 }, children: _jsxs(Button, { variant: "outlined", size: "small", onClick: () => {
+                    alert(`Action on ${selectedCount} items. Selection state: ${JSON.stringify(selectionState, null, 2)}`);
+                }, children: ["Test Action (", selectedCount, ")"] }) }));
+    }, []);
+    return (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: "Bulk Actions Test" }), _jsx(Typography, { variant: "body1", color: "text.secondary", sx: { mb: 2 }, children: "This example tests that bulk actions work without infinite loops." }), _jsxs(Typography, { variant: "body2", sx: { mb: 3, p: 2, backgroundColor: 'grey.100', borderRadius: 1 }, children: [_jsx("strong", { children: "Current Selection:" }), " ", selectionInfo] }), _jsx(DataTable, { data: testData, totalRow: testData.length, columns: columns, 
+                // Enable selection and bulk actions
+                enableRowSelection: true, enableMultiRowSelection: true, enableBulkActions: true, bulkActions: bulkActions, onSelectionChange: handleSelectionChange, 
+                // Basic features
+                enablePagination: false, enableSorting: true, enableGlobalFilter: false, 
+                // Fit to screen
+                fitToScreen: true }), _jsx(Box, { sx: { mt: 2, p: 2, backgroundColor: 'success.light', borderRadius: 1 }, children: _jsx(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!" }) })] }));
+}

package/lib/examples/crud-api-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crud-api-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/crud-api-example.tsx"],"names":[],"mappings":"AA2IA,wBAAgB,cAAc,4CAie7B"}