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

package/lib/examples/basic-example.js

@@ -1,323 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,47 +0,0 @@
-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

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