antd-crud-table 0.0.12 → 0.0.13

package/README.md

@@ -2,24 +2,86 @@
 
 # 🧩 `antd-crud-table` – A Dynamic React Table Generator with Forms 🚀
 
-`CrudTable` is a highly flexible and powerful React component built using `antd` and `@ant-design/pro-components`. It provides a declarative way to render editable, paginated tables with form support, data fetching, sorting, filtering, and custom rendering. Perfect for building admin dashboards and data management UIs with minimal boilerplate.
+`antd-crud-table` is a highly flexible and powerful React library built using `antd` and `@ant-design/pro-components`. It provides both a declarative component-based approach and a modern hook-based architecture for creating editable, paginated tables with form support, data fetching, sorting, filtering, and custom rendering. Perfect for building admin dashboards and data management UIs with minimal boilerplate.
+
+## 🆕 Enhanced 📋 API Reference
+
+### CrudTableExperimental Props (Enhanced)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `title` | `string` | Table header title |
+| `rowKey` | `keyof T` | Unique identifier for each row |
+| `columns` | `CrudColumn<T>[]` | Column definitions with enhanced features |
+| `hookConfig` | `UseCrudTableConfig<T>` | Hook configuration for data operations |
+| `defaultPageSize?` | `number` | Initial page size (default: 10) |
+| `enableBulkOperations?` | `boolean` | Enable bulk select/delete (default: false) |
+| `customActions?` | `(record, actions) => ReactNode[]` | Custom row actions |ased Architecture**
+
+The experimental version introduces a powerful hook-based architecture with multiple data source strategies:
+- **Static Data**: Perfect for prototypes and small datasets
+- **API Integration**: REST API support with automatic request handling
+- **Custom Operations**: Full control with GraphQL, IndexedDB, or custom logic
+- **Built-in State Management**: Loading states, error handling, optimistic updates
 
 ---
 
 ## 📦 Installation
 
-Install dependencies with:
-
 ```bash
 npm install antd-crud-table
 ```
 
+**Peer Dependencies:**
+```bash
+npm install react react-dom antd @ant-design/pro-components
+```
+
 ---
 
-## ⚙️ Usage Example
+## 🚀 Quick Start
+
+Choose your preferred approach:
+
+### Modern Approach (Experimental) - Hook-Based
 
 ```tsx
-import CrudTable, { CrudTableConfig } from 'antd-crud-table';
+import { CrudTableExperimental } from 'antd-crud-table';
+
+// Static data example
+const UserManagement = () => (
+  <CrudTableExperimental<User>
+    title="User Management"
+    rowKey="id"
+    hookConfig={{
+      staticData: users, // Your data array
+      optimisticUpdates: true,
+    }}
+    columns={[
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        fieldType: 'string',
+        formConfig: { required: true },
+      },
+      {
+        title: 'Status',
+        dataIndex: 'status',
+        fieldType: 'enum',
+        enumOptions: {
+          active: { text: 'Active', color: 'green' },
+          inactive: { text: 'Inactive', color: 'orange' },
+        },
+      },
+    ]}
+  />
+);
+```
+
+### Classic Approach (Original) - Service-Based
+
+```tsx
+import { CrudTable } from 'antd-crud-table';
 
 const userService = {
   getList: async () => ({ data: [], total: 0 }),
@@ -28,73 +90,523 @@ const userService = {
   delete: async (id) => {},
 };
 
-const config: CrudTableConfig<any> = {
-  title: 'User Management',
-  rowKey: 'id',
-  service: userService,
-  columns: [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      fieldType: 'string',
-      fieldEditable: true,
-      formConfig: { required: true },
+const UserTable = () => (
+  <CrudTable
+    title="User Management"
+    rowKey="id"
+    service={userService}
+    columns={[
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        fieldType: 'string',
+        fieldEditable: true,
+        formConfig: { required: true },
+      },
+    ]}
+  />
+);
+```
+
+---
+
+## 🎯 **Enhanced Features (Experimental)**
+
+### 1. **Multiple Data Source Strategies**
+
+#### Static Data (Perfect for Prototyping)
+```tsx
+<CrudTableExperimental
+  hookConfig={{
+    staticData: mockUsers,
+    optimisticUpdates: true,
+  }}
+  // ... other props
+/>
+```
+
+#### API Integration (Production Ready)
+```tsx
+<CrudTableExperimental
+  hookConfig={{
+    api: {
+      baseUrl: 'https://api.example.com',
+      endpoints: {
+        list: '/users',
+        create: '/users', 
+        update: '/users',
+        delete: '/users',
+      },
+      headers: {
+        'Authorization': 'Bearer your-token',
+      },
+      transform: {
+        response: (data) => ({
+          data: data.users,
+          total: data.totalCount,
+        }),
+        request: (data) => ({
+          ...data,
+          updatedAt: new Date().toISOString(),
+        }),
+      },
+    },
+    onSuccess: (operation, data) => {
+      console.log(`${operation} completed`, data);
+    },
+    onError: (operation, error) => {
+      console.error(`${operation} failed`, error);
+    },
+  }}
+  // ... other props
+/>
+```
+
+#### Custom Operations (Maximum Flexibility)
+```tsx
+<CrudTableExperimental
+  hookConfig={{
+    operations: {
+      getList: async (params) => {
+        const result = await myGraphQLQuery(params);
+        return {
+          data: result.users,
+          total: result.totalCount,
+          success: true,
+        };
+      },
+      create: async (data) => await myCreateMutation(data),
+      update: async (id, data) => await myUpdateMutation(id, data),
+      delete: async (id) => await myDeleteMutation(id),
+    },
+  }}
+  // ... other props
+/>
+```
+
+### 2. **Advanced Features**
+
+#### Bulk Operations
+```tsx
+<CrudTableExperimental
+  enableBulkOperations={true}
+  // Automatically adds bulk select and delete functionality
+/>
+```
+
+#### Custom Actions
+```tsx
+<CrudTableExperimental
+  customActions={(record, actions) => [
+    <Button
+      key="export"
+      onClick={() => exportUser(record)}
+    >
+      Export
+    </Button>,
+    <Button
+      key="clone"
+      onClick={() => actions.create({...record, id: undefined})}
+    >
+      Clone
+    </Button>
+  ]}
+/>
+```
+
+#### Enhanced Validation
+```tsx
+columns={[
+  {
+    dataIndex: 'email',
+    title: 'Email',
+    fieldType: 'string',
+    formConfig: {
+      required: true,
+      rules: [
+        { required: true, message: 'Email is required' },
+        { type: 'email', message: 'Invalid email format' },
+        { 
+          validator: async (_, value) => {
+            const exists = await checkEmailExists(value);
+            if (exists) throw new Error('Email already exists');
+          }
+        }
+      ],
+    },
+  },
+]}
+```
+
+### 3. **Custom Hooks**
+
+Create your own specialized hooks for different use cases:
+
+#### Example 1: useUserCrud - Specialized User Management
+```tsx
+import { useCrudTable, type UseCrudTableConfig } from 'antd-crud-table';
+
+#### Example 1: useUserCrud - Specialized User Management
+```tsx
+import { useCrudTable, type UseCrudTableConfig } from 'antd-crud-table';
+
+export const useUserCrud = (baseConfig?: Partial<UseCrudTableConfig<any>['api']>) => {
+  const config: UseCrudTableConfig<any> = {
+    api: {
+      baseUrl: '/api/users',
+      headers: {
+        'Authorization': `Bearer ${localStorage.getItem('token')}`,
+      },
+      transform: {
+        request: (data) => ({
+          ...data,
+          // Add default values or transformations
+          updatedAt: new Date().toISOString(),
+        }),
+        response: (data) => ({
+          data: data.users || data.data || [],
+          total: data.total || data.count || 0,
+          success: true,
+        }),
+      },
+      ...baseConfig,
     },
-    {
-      title: 'Status',
-      dataIndex: 'status',
-      fieldType: 'enum',
-      enumOptions: {
-        active: { text: 'Active' },
-        inactive: { text: 'Inactive' },
+    defaultPageSize: 10,
+    optimisticUpdates: true,
+    onSuccess: (operation, data) => {
+      console.log(`User ${operation} completed:`, data);
+    },
+    onError: (operation, error) => {
+      console.error(`User ${operation} failed:`, error);
+      // Could add toast notifications, error reporting, etc.
+    },
+  };
+
+  return useCrudTable('id', config);
+};
+```
+
+#### Example 2: useLocalStorageCrud - Local Storage Persistence
+```tsx
+export const useLocalStorageCrud = <T extends Record<string, any>>(
+  storageKey: string,
+  rowKey: keyof T,
+  initialData: T[] = []
+) => {
+  const getStoredData = (): T[] => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      return stored ? JSON.parse(stored) : initialData;
+    } catch {
+      return initialData;
+    }
+  };
+
+  const setStoredData = (data: T[]) => {
+    localStorage.setItem(storageKey, JSON.stringify(data));
+  };
+
+  return useCrudTable(rowKey, {
+    operations: {
+      getList: async (params) => {
+        const data = getStoredData();
+        const { current = 1, pageSize = 10, ...filters } = params;
+        
+        // Apply filters
+        let filteredData = data;
+        Object.entries(filters).forEach(([key, value]) => {
+          if (value !== undefined && value !== null && value !== '') {
+            filteredData = filteredData.filter(item =>
+              String(item[key]).toLowerCase().includes(String(value).toLowerCase())
+            );
+          }
+        });
+        
+        // Apply pagination
+        const start = (current - 1) * pageSize;
+        const paginatedData = filteredData.slice(start, start + pageSize);
+        
+        return {
+          data: paginatedData,
+          total: filteredData.length,
+          success: true,
+        };
+      },
+      
+      create: async (newItem) => {
+        const data = getStoredData();
+        const maxId = Math.max(...data.map(item => Number(item[rowKey]) || 0), 0);
+        const created = { 
+          [rowKey]: maxId + 1, 
+          ...newItem,
+          createdAt: new Date().toISOString(),
+        } as T;
+        
+        data.push(created);
+        setStoredData(data);
+        return created;
+      },
+      
+      update: async (id, updateData) => {
+        const data = getStoredData();
+        const index = data.findIndex(item => item[rowKey] === id);
+        if (index === -1) throw new Error('Item not found');
+        
+        data[index] = { 
+          ...data[index], 
+          ...updateData,
+          updatedAt: new Date().toISOString(),
+        };
+        setStoredData(data);
+        return data[index];
+      },
+      
+      delete: async (id) => {
+        const data = getStoredData();
+        const filtered = data.filter(item => item[rowKey] !== id);
+        setStoredData(filtered);
       },
-      formConfig: { required: true },
     },
-  ],
+    optimisticUpdates: true,
+  });
 };
+```
 
-export default function Admin() {
-  return <CrudTable {...config} />;
-}
+#### Example 3: useRealtimeCrud - WebSocket Integration
+```tsx
+#### Example 3: useRealtimeCrud - WebSocket Integration
+```tsx
+export const useRealtimeCrud = <T extends Record<string, any>>(
+  rowKey: keyof T,
+  websocketUrl: string,
+  apiConfig: UseCrudTableConfig<T>['api']
+) => {
+  const config: UseCrudTableConfig<T> = {
+    api: apiConfig,
+    optimisticUpdates: false, // Disable optimistic updates for realtime
+  };
+  
+  const crud = useCrudTable(rowKey, config);
+
+  // In a real implementation, you would set up WebSocket listeners here
+  // useEffect(() => {
+  //   const ws = new WebSocket(websocketUrl);
+  //   
+  //   ws.onmessage = (event) => {
+  //     const { type, data } = JSON.parse(event.data);
+  //     switch (type) {
+  //       case 'created':
+  //       case 'updated':
+  //       case 'deleted':
+  //         crud.refresh(); // Refresh data when changes occur
+  //         break;
+  //     }
+  //   };
+  //   
+  //   return () => ws.close();
+  // }, [websocketUrl]);
+
+  return crud;
+};
 ```
 
----
+#### Example 4: useInfiniteScrollCrud - Infinite Scrolling
+```tsx
+#### Example 4: useInfiniteScrollCrud - Infinite Scrolling
+```tsx
+export const useInfiniteScrollCrud = <T extends Record<string, any>>(
+  rowKey: keyof T,
+  baseConfig: UseCrudTableConfig<T>
+) => {
+  // This would extend the base hook with infinite scroll capabilities
+  // Implementation would handle cursor-based pagination, data accumulation, etc.
+  
+  const config: UseCrudTableConfig<T> = {
+    ...baseConfig,
+    // Add infinite scroll specific configuration
+  };
+  
+  return useCrudTable(rowKey, config);
+};
+```
 
-## 🏆 Features
+#### Example 5: useCachedCrud - Advanced Caching
+```tsx
+#### Example 5: useCachedCrud - Advanced Caching
+```tsx
+export const useCachedCrud = <T extends Record<string, any>>(
+  rowKey: keyof T,
+  cacheKey: string,
+  baseConfig: UseCrudTableConfig<T>
+) => {
+  const config: UseCrudTableConfig<T> = {
+    ...baseConfig,
+    enableCache: true,
+    // In a real implementation, you might integrate with:
+    // - React Query
+    // - SWR  
+    // - Redux Toolkit Query
+    // - Apollo Client
+    // etc.
+  };
+  
+  return useCrudTable(rowKey, config);
+};
+};
+```
 
-- 🎨 **Customizable Column Types** (`string`, `number`, `boolean`, `date`, `enum`, `custom`)
-- ✅ **Integrated Create/Edit Modal Form**  
-- 🚀 **ProTable-based Sorting, Pagination & Filtering**  
-- 🔁 **Refetching and Action Toolbar**  
-- 🧠 **Custom Transform & Render Logic per Field**  
-- 📆 **Built-in Date/Time Formatting with `date-fns` + `dayjs`**  
-- 🧰 **Typesafe Configuration with TypeScript Support**  
-- 🔐 **Editable Field Controls (per column)**  
-- 🧼 **Clean, Formatted Layout with Row Differentiation Support**
+#### Usage Examples
+```tsx
+// Using the specialized hooks
+const UserTable = () => {
+  const userCrud = useUserCrud();
+  
+  return (
+    <CrudTableExperimental
+      title="Users" 
+      rowKey="id"
+      hookConfig={userCrud}
+      columns={userColumns}
+    />
+  );
+};
+
+const OfflineTable = () => {
+  const offlineCrud = useLocalStorageCrud<User>('users-cache', 'id', mockUsers);
+  
+  return (
+    <CrudTableExperimental
+      title="Offline Users" 
+      rowKey="id"
+      hookConfig={offlineCrud}
+      columns={userColumns}
+    />
+  );
+};
+
+const RealtimeTable = () => {
+  const realtimeCrud = useRealtimeCrud<User>(
+    'id',
+    'wss://api.example.com/ws',
+    { baseUrl: '/api/users' }
+  );
+  
+  return (
+    <CrudTableExperimental
+      title="Realtime Users" 
+      rowKey="id"
+      hookConfig={realtimeCrud}
+      columns={userColumns}
+    />
+  );
+};
+```
+
+---
+
+## 🏆 Complete Feature Set
+
+### Core Features
+- 🎨 **Multiple Column Types**: `string`, `number`, `boolean`, `date`, `enum`, `custom`
+- ✅ **Integrated Create/Edit Modal Forms** with validation
+- 🚀 **ProTable Integration**: Sorting, pagination & filtering built-in
+- 🔁 **Real-time Data Operations** with loading states
+- 🧠 **Custom Transform & Render Logic** per field
+- 📆 **Smart Date/Time Handling** with `date-fns` + `dayjs`
+- 🧰 **Full TypeScript Support** with generics
+- 🔐 **Field-Level Edit Controls** 
+- 🧼 **Professional UI** with row differentiation
+
+### Enhanced Features (Experimental)
+- 🪝 **Hook-Based Architecture** with `useCrudTable`
+- 🔌 **Multiple Data Sources**: Static, API, or custom operations
+- ⚡ **Built-in State Management**: Loading, error states, optimistic updates
+- 🔧 **Extensible Design**: Create custom hooks for your domain
+- 📊 **Performance Optimized**: Caching, lazy loading, optimistic updates
+- 🎛️ **Bulk Operations**: Select and delete multiple rows
+- 🎯 **Custom Actions**: Add your own row-level actions
+- 🔍 **Advanced Search**: Configurable column-level search
+- ✨ **Enhanced Validation**: Complex form validation rules
 
 ---
 
-## 🛠️ Props
+## API Reference
+
+### CrudTableV2 Props (Enhanced)
 
-### `CrudTableConfig<T>`
 | Prop | Type | Description |
 |------|------|-------------|
-| `columns` | `CrudColumn<T>[]` | Column definitions including types and rendering logic |
-| `service` | `{ getList, create, update, delete }` | API service methods for data fetching and CRUD |
-| `rowKey` | `keyof T` | Unique key for each row |
 | `title` | `string` | Table header title |
-| `defaultPageSize?` | `number` | Optional default page size (default is 5) |
+| `rowKey` | `keyof T` | Unique identifier for each row |
+| `columns` | `CrudColumn<T>[]` | Column definitions with enhanced features |
+| `hookConfig` | `UseCrudTableConfig<T>` | Hook configuration for data operations |
+| `defaultPageSize?` | `number` | Initial page size (default: 10) |
+| `enableBulkOperations?` | `boolean` | Enable bulk select/delete (default: false) |
+| `customActions?` | `(record, actions) => ReactNode[]` | Custom row actions |
 
-### `CrudColumn<T>`
-Extends `ProColumns<T>` with:
+### CrudColumn<T> (Enhanced)
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `fieldType` | `"string" \| "number" \| "boolean" \| "date" \| "enum" \| "custom"` | Field type |
-| `enumOptions?` | `Record<string, { text: string }>` | Options for enum dropdown |
-| `formConfig?` | `{ required?: boolean, component?: ReactNode, transform?: fn }` | Form field behavior |
-| `fieldEditable?` | `boolean` | Whether the field is editable in form |
-| `customRender?` | `(value, record) => ReactNode` | Custom render function for custom fields |
+| `dataIndex` | `keyof T` | Field key in your data |
+| `title` | `string` | Column header text |
+| `fieldType` | `FieldType` | `"string" \| "number" \| "boolean" \| "date" \| "enum" \| "custom"` |
+| `fieldEditable?` | `boolean` | Whether field can be edited (default: true) |
+| `searchable?` | `boolean` | Whether field appears in search (default: true) |
+| `enumOptions?` | `Record<string, {text: string, color?: string}>` | Options for enum fields |
+| `customRender?` | `(value, record) => ReactNode` | Custom display renderer |
+| `formConfig?` | `FormConfig` | Form field configuration |
+
+### FormConfig
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `required?` | `boolean` | Whether field is required |
+| `rules?` | `FormRule[]` | Ant Design validation rules |
+| `component?` | `ReactNode` | Custom form component |
+| `transform?` | `(value) => any` | Transform value before saving |
+
+### UseCrudTableConfig<T>
+
+Choose one approach:
+
+```tsx
+// Static data approach
+{
+  staticData: T[];
+  optimisticUpdates?: boolean;
+}
+
+// API approach  
+{
+  api: {
+    baseUrl: string;
+    endpoints?: {...};
+    headers?: Record<string, string>;
+    transform?: {...};
+  };
+}
+
+// Custom operations approach
+{
+  operations: {
+    getList: (params) => Promise<{data: T[], total: number}>;
+    create: (data: Partial<T>) => Promise<T>;
+    update: (id, data: Partial<T>) => Promise<T>;
+    delete: (id) => Promise<void>;
+  };
+}
+```
+
+### Legacy CrudTable Props (Original)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `columns` | `CrudColumn<T>[]` | Column definitions |
+| `service` | `CrudService<T>` | Service object with CRUD methods |
+| `rowKey` | `keyof T` | Unique key for each row |
+| `title` | `string` | Table header title |
+| `defaultPageSize?` | `number` | Optional default page size (default: 5) |
 
 ---
 
@@ -118,6 +630,252 @@ Customize row striping using `.row-differentiator` in `CrudTable.css`:
 
 ---
 
+## 🔄 Migration Guide
+
+### Upgrading from Original to Experimental
+
+**Original (Service-Based):**
+```tsx
+<CrudTable
+  title="Users"
+  rowKey="id"
+  service={UserService}
+  columns={columns}
+/>
+```
+
+**Experimental (Hook-Based):**
+```tsx
+<CrudTableExperimental
+  title="Users" 
+  rowKey="id"
+  hookConfig={{
+    operations: UserService, // Reuse existing service
+    // Or choose new approaches:
+    // staticData: users,
+    // api: { baseUrl: '/api' },
+  }}
+  columns={columns}
+/>
+```
+
+### Breaking Changes in Experimental
+- ✅ **Fully backward compatible**: Original components still work
+- 🔄 **New import**: `CrudTableExperimental` for enhanced version
+- 🎛️ **Service → hookConfig**: More flexible configuration
+- 📊 **Enhanced props**: Additional optional features
+
+### Lazy Loading Options
+
+For better performance with code splitting:
+
+```tsx
+// Standard lazy loading
+import { CrudTableLazy } from 'antd-crud-table';
+
+// Experimental lazy loading  
+import { CrudTableExperimentalLazy } from 'antd-crud-table';
+
+<CrudTableExperimentalLazy
+  title="Users"
+  rowKey="id" 
+  hookConfig={hookConfig}
+  columns={columns}
+/>
+```
+
+---
+
+## 🎨 Column Type Examples
+
+### String Field
+```tsx
+{
+  dataIndex: 'name',
+  title: 'Full Name',
+  fieldType: 'string',
+  formConfig: {
+    required: true,
+    rules: [
+      { min: 2, message: 'Name must be at least 2 characters' }
+    ]
+  },
+}
+```
+
+### Number Field
+```tsx
+{
+  dataIndex: 'age',
+  title: 'Age',
+  fieldType: 'number',
+  formConfig: {
+    rules: [
+      { type: 'number', min: 0, max: 120, message: 'Invalid age' }
+    ]
+  },
+}
+```
+
+### Date Field
+```tsx
+{
+  dataIndex: 'createdAt',
+  title: 'Created Date',
+  fieldType: 'date',
+  searchable: false, // Exclude from search
+}
+```
+
+### Boolean Field  
+```tsx
+{
+  dataIndex: 'isActive',
+  title: 'Active Status',
+  fieldType: 'boolean',
+}
+```
+
+### Enum Field
+```tsx
+{
+  dataIndex: 'status',
+  title: 'Status',
+  fieldType: 'enum',
+  enumOptions: {
+    active: { text: 'Active', color: 'green' },
+    pending: { text: 'Pending', color: 'orange' },
+    inactive: { text: 'Inactive', color: 'red' },
+  },
+}
+```
+
+### Custom Field
+```tsx
+{
+  dataIndex: 'customField',
+  title: 'Custom Display',
+  fieldType: 'custom',
+  customRender: (value, record) => (
+    <div>
+      <Avatar src={record.avatar} />
+      <span>{record.name}</span>
+    </div>
+  ),
+  formConfig: {
+    component: <MyCustomInput />,
+  },
+}
+```
+
+---
+
+## 🧪 Testing
+
+The hook-based architecture enables easy testing:
+
+```tsx
+import { renderHook, act } from '@testing-library/react';
+import { useCrudTable } from 'antd-crud-table';
+
+test('should handle CRUD operations', async () => {
+  const mockData = [
+    { id: 1, name: 'John', age: 30 }
+  ];
+
+  const { result } = renderHook(() => 
+    useCrudTable('id', {
+      staticData: mockData,
+    })
+  );
+
+  await act(async () => {
+    const created = await result.current.create({ 
+      name: 'Jane', 
+      age: 25 
+    });
+    expect(created).toBeTruthy();
+  });
+
+  expect(result.current.state.data).toHaveLength(2);
+});
+```
+
+---
+
+## 🚀 Performance Tips
+
+### 1. **Use Static Data for Prototyping**
+```tsx
+// Perfect for demos and development
+hookConfig={{ staticData: mockData }}
+```
+
+### 2. **Enable Optimistic Updates**
+```tsx
+// For better UX with reliable backends
+hookConfig={{ 
+  api: {...},
+  optimisticUpdates: true 
+}}
+```
+
+### 3. **Implement Proper Caching**
+```tsx
+// Custom hook with caching
+const useUserCrud = () => {
+  return useCrudTable('id', {
+    enableCache: true,
+    // ... other config
+  });
+};
+```
+
+### 4. **Lazy Load Components**
+```tsx
+import { CrudTableLazy } from 'antd-crud-table';
+// Component will be loaded when needed
+```
+
+---
+
+## 🔮 Roadmap
+
+### Coming Soon
+- 🌐 **WebSocket Integration**: Real-time updates
+- 📊 **Virtual Scrolling**: Handle thousands of rows
+- 📤 **Export Functionality**: CSV/Excel export
+- 🎨 **Theme Support**: Multiple UI themes
+- 🔍 **Advanced Filters**: Complex filtering UI
+- 📱 **Mobile Optimization**: Better mobile experience
+
+### Community Requests
+- 🔧 **Plugin System**: Extensible architecture
+- 📈 **Analytics Integration**: Built-in tracking
+- 🌍 **i18n Support**: Multi-language support
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md).
+
+### Development Setup
+```bash
+git clone https://github.com/maifeeulasad/antd-crud-table
+cd antd-crud-table
+npm install
+npm run dev
+```
+
+---
+
+## 📄 License
+
+MIT License - feel free to use in personal and commercial projects.
+
+---
+
 🎉 Build elegant CRUD interfaces faster than ever with `antd-crud-table`!
 
 

package/dist/CrudTableExperimental.cjs

@@ -1 +1 @@
-"use strict";const o=require("./jsx-runtime-qcKc-DpB.cjs"),f=require("react"),n=require("./CrudTable-ck226KHr.cjs"),z=require("./useCrudTable.cjs"),T=require("./index-DygfPlBI.cjs"),_=w=>{const{columns:x,rowKey:d,title:I,defaultPageSize:y=10,hookConfig:k,enableBulkOperations:R=!1,customActions:h}=w,i=z.useCrudTable(d,{...k,defaultPageSize:y}),[v,j]=f.useState(!1),[m,S]=f.useState(null),[u,g]=f.useState([]),[p]=n.Form.useForm();f.useEffect(()=>{i.refresh()},[]);const E=x.map(e=>{const t={...e,dataIndex:e.dataIndex,title:e.title,search:e.searchable!==!1};switch(e.fieldType){case"date":return{...t,valueType:"dateTime",render:(r,s)=>{const a=s[e.dataIndex];if(!a)return"-";try{return o.jsxRuntimeExports.jsx("span",{children:n.format(n.parseISO(a),"yyyy-MM-dd HH:mm")})}catch{return o.jsxRuntimeExports.jsx("span",{children:a})}}};case"enum":return{...t,valueType:"select",valueEnum:e.enumOptions,render:(r,s)=>{var c;const a=s[e.dataIndex],l=(c=e.enumOptions)==null?void 0:c[a];return l?o.jsxRuntimeExports.jsx(n.Tag,{color:l.color,children:l.text}):a}};case"number":return{...t,valueType:"digit",render:(r,s)=>{const a=s[e.dataIndex];return typeof a=="number"?a.toLocaleString():a}};case"boolean":return{...t,valueType:"switch",render:(r,s)=>o.jsxRuntimeExports.jsx(n.Tag,{color:s[e.dataIndex]?"green":"red",children:s[e.dataIndex]?"Yes":"No"})};case"custom":return{...t,render:(r,s)=>{var a;return(a=e.customRender)==null?void 0:a.call(e,s[e.dataIndex],s)}};default:return t}});E.push({title:"Actions",valueType:"option",width:200,render:(e,t)=>{const r=[o.jsxRuntimeExports.jsx(n.Button,{type:"link",size:"small",onClick:()=>b(t),children:"Edit"},"edit"),o.jsxRuntimeExports.jsx(n.Button,{type:"link",size:"small",danger:!0,onClick:()=>q(t[d]),children:"Delete"},"delete")],s=(h==null?void 0:h(t,i))||[];return[...r,...s]}});const F=async(e,t,r)=>{try{const s={current:e.current,pageSize:e.pageSize,sortBy:Object.keys(t)[0],sortOrder:Object.values(t)[0],...r,...e},a=i.operations;if(a!=null&&a.getList){const l=await a.getList(s);return{data:l.data,success:!0,total:l.total}}return{data:i.state.data,success:!0,total:i.state.total}}catch{return T.staticMethods.error("Failed to fetch data"),{data:[],success:!1,total:0}}},b=e=>{if(S(e||null),e){const t={...e};x.forEach(r=>{const s=r.dataIndex;if(r.fieldType==="date"&&t[s])try{t[s]=n.dayjs(t[s])}catch{}}),p.setFieldsValue(t)}else p.resetFields();j(!0)},O=async()=>{var e;try{const t=await p.validateFields(),r={...t};x.forEach(s=>{var l;const a=s.dataIndex;if(s.fieldType==="date"&&t[a])try{r[a]=n.formatISO(t[a])}catch{}(l=s.formConfig)!=null&&l.transform&&(r[a]=s.formConfig.transform(t[a]))}),m&&m[d]?await i.update(m[d],r):await i.create(r),j(!1),(e=i.actionRef.current)==null||e.reload()}catch(t){console.error("Form validation failed:",t)}},q=async e=>{n.Modal.confirm({title:"Are you sure?",content:"This action cannot be undone.",okText:"Yes, Delete",okType:"danger",cancelText:"Cancel",onOk:async()=>{var r;await i.delete(e)&&((r=i.actionRef.current)==null||r.reload())}})},D=async()=>{if(u.length===0){T.staticMethods.warning("Please select items to delete");return}n.Modal.confirm({title:`Delete ${u.length} items?`,content:"This action cannot be undone.",okText:"Yes, Delete All",okType:"danger",cancelText:"Cancel",onOk:async()=>{var t;const e=u.map(r=>i.delete(r));await Promise.allSettled(e),g([]),(t=i.actionRef.current)==null||t.reload()}})},B=R?{selectedRowKeys:u,onChange:g}:void 0;return o.jsxRuntimeExports.jsxs(n.ProConfigProvider,{needDeps:!0,children:[o.jsxRuntimeExports.jsx(n.ProviderTableContainer,{headerTitle:I,rowKey:d,rowClassName:(e,t)=>t%2===0?"row-differentiator":"",actionRef:i.actionRef,columns:E,request:F,search:{labelWidth:"auto"},pagination:{pageSize:y,showSizeChanger:!0,showQuickJumper:!0},loading:i.state.loading,rowSelection:B,toolBarRender:()=>[o.jsxRuntimeExports.jsx(n.Button,{type:"primary",icon:o.jsxRuntimeExports.jsx(n.RefIcon,{}),onClick:()=>b(),children:"New"},"add"),...R&&u.length>0?[o.jsxRuntimeExports.jsxs(n.Button,{danger:!0,onClick:D,children:["Delete Selected (",u.length,")"]},"bulk-delete")]:[],o.jsxRuntimeExports.jsx(n.Dropdown,{menu:{items:[{key:"export",label:"Export",disabled:!0},{key:"refresh",label:"Refresh",onClick:()=>i.refresh()}]},children:o.jsxRuntimeExports.jsx(n.Button,{children:o.jsxRuntimeExports.jsx(n.RefIcon$1,{})})},"menu")],options:{setting:{listsHeight:400},reload:()=>i.refresh()},dateFormatter:"string"}),o.jsxRuntimeExports.jsx(n.Modal,{title:m?"Edit Item":"Create Item",open:v,onOk:O,onCancel:()=>j(!1),destroyOnClose:!0,width:600,children:o.jsxRuntimeExports.jsx(n.Form,{form:p,layout:"vertical",children:x.map(e=>{var l,c,C;if(!e.dataIndex)return null;const t=e.dataIndex,r=e.title,s=!(e.fieldEditable??!0),a=((l=e.formConfig)==null?void 0:l.rules)||((c=e.formConfig)!=null&&c.required?[{required:!0,message:`${r} is required`}]:[]);if((C=e.formConfig)!=null&&C.component)return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:e.formConfig.component},t);switch(e.fieldType){case"string":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:o.jsxRuntimeExports.jsx(n.Input,{disabled:s})},t);case"number":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:o.jsxRuntimeExports.jsx(n.TypedInputNumber,{style:{width:"100%"},disabled:s})},t);case"date":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:o.jsxRuntimeExports.jsx(n.DatePicker,{style:{width:"100%"},showTime:!0,disabled:s})},t);case"boolean":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,valuePropName:"checked",children:o.jsxRuntimeExports.jsx(n.Switch,{disabled:s})},t);case"enum":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:o.jsxRuntimeExports.jsx(n.Select,{disabled:s,placeholder:`Select ${r.toLowerCase()}`,options:Object.entries(e.enumOptions||{}).map(([M,P])=>({label:P.text,value:M}))})},t);default:return null}})})})]})};module.exports=_;
+"use strict";const o=require("./jsx-runtime-qcKc-DpB.cjs"),f=require("react"),n=require("./CrudTable-ck226KHr.cjs"),z=require("./useCrudTable.cjs"),T=require("./index-DygfPlBI.cjs"),_=w=>{const{columns:x,rowKey:d,title:I,defaultPageSize:y=10,hookConfig:k,enableBulkOperations:R=!1,customActions:h}=w,i=z.useCrudTable(d,{defaultPageSize:y,...k}),[v,j]=f.useState(!1),[m,S]=f.useState(null),[u,g]=f.useState([]),[p]=n.Form.useForm();f.useEffect(()=>{i.refresh()},[]);const E=x.map(e=>{const t={...e,dataIndex:e.dataIndex,title:e.title,search:e.searchable!==!1};switch(e.fieldType){case"date":return{...t,valueType:"dateTime",render:(r,s)=>{const a=s[e.dataIndex];if(!a)return"-";try{return o.jsxRuntimeExports.jsx("span",{children:n.format(n.parseISO(a),"yyyy-MM-dd HH:mm")})}catch{return o.jsxRuntimeExports.jsx("span",{children:a})}}};case"enum":return{...t,valueType:"select",valueEnum:e.enumOptions,render:(r,s)=>{var c;const a=s[e.dataIndex],l=(c=e.enumOptions)==null?void 0:c[a];return l?o.jsxRuntimeExports.jsx(n.Tag,{color:l.color,children:l.text}):a}};case"number":return{...t,valueType:"digit",render:(r,s)=>{const a=s[e.dataIndex];return typeof a=="number"?a.toLocaleString():a}};case"boolean":return{...t,valueType:"switch",render:(r,s)=>o.jsxRuntimeExports.jsx(n.Tag,{color:s[e.dataIndex]?"green":"red",children:s[e.dataIndex]?"Yes":"No"})};case"custom":return{...t,render:(r,s)=>{var a;return(a=e.customRender)==null?void 0:a.call(e,s[e.dataIndex],s)}};default:return t}});E.push({title:"Actions",valueType:"option",width:200,render:(e,t)=>{const r=[o.jsxRuntimeExports.jsx(n.Button,{type:"link",size:"small",onClick:()=>b(t),children:"Edit"},"edit"),o.jsxRuntimeExports.jsx(n.Button,{type:"link",size:"small",danger:!0,onClick:()=>q(t[d]),children:"Delete"},"delete")],s=(h==null?void 0:h(t,i))||[];return[...r,...s]}});const F=async(e,t,r)=>{try{const s={current:e.current,pageSize:e.pageSize,sortBy:Object.keys(t)[0],sortOrder:Object.values(t)[0],...r,...e},a=i.operations;if(a!=null&&a.getList){const l=await a.getList(s);return{data:l.data,success:!0,total:l.total}}return{data:i.state.data,success:!0,total:i.state.total}}catch{return T.staticMethods.error("Failed to fetch data"),{data:[],success:!1,total:0}}},b=e=>{if(S(e||null),e){const t={...e};x.forEach(r=>{const s=r.dataIndex;if(r.fieldType==="date"&&t[s])try{t[s]=n.dayjs(t[s])}catch{}}),p.setFieldsValue(t)}else p.resetFields();j(!0)},O=async()=>{var e;try{const t=await p.validateFields(),r={...t};x.forEach(s=>{var l;const a=s.dataIndex;if(s.fieldType==="date"&&t[a])try{r[a]=n.formatISO(t[a])}catch{}(l=s.formConfig)!=null&&l.transform&&(r[a]=s.formConfig.transform(t[a]))}),m&&m[d]?await i.update(m[d],r):await i.create(r),j(!1),(e=i.actionRef.current)==null||e.reload()}catch(t){console.error("Form validation failed:",t)}},q=async e=>{n.Modal.confirm({title:"Are you sure?",content:"This action cannot be undone.",okText:"Yes, Delete",okType:"danger",cancelText:"Cancel",onOk:async()=>{var r;await i.delete(e)&&((r=i.actionRef.current)==null||r.reload())}})},D=async()=>{if(u.length===0){T.staticMethods.warning("Please select items to delete");return}n.Modal.confirm({title:`Delete ${u.length} items?`,content:"This action cannot be undone.",okText:"Yes, Delete All",okType:"danger",cancelText:"Cancel",onOk:async()=>{var t;const e=u.map(r=>i.delete(r));await Promise.allSettled(e),g([]),(t=i.actionRef.current)==null||t.reload()}})},B=R?{selectedRowKeys:u,onChange:g}:void 0;return o.jsxRuntimeExports.jsxs(n.ProConfigProvider,{needDeps:!0,children:[o.jsxRuntimeExports.jsx(n.ProviderTableContainer,{headerTitle:I,rowKey:d,rowClassName:(e,t)=>t%2===0?"row-differentiator":"",actionRef:i.actionRef,columns:E,request:F,search:{labelWidth:"auto"},pagination:{pageSize:y,showSizeChanger:!0,showQuickJumper:!0},loading:i.state.loading,rowSelection:B,toolBarRender:()=>[o.jsxRuntimeExports.jsx(n.Button,{type:"primary",icon:o.jsxRuntimeExports.jsx(n.RefIcon,{}),onClick:()=>b(),children:"New"},"add"),...R&&u.length>0?[o.jsxRuntimeExports.jsxs(n.Button,{danger:!0,onClick:D,children:["Delete Selected (",u.length,")"]},"bulk-delete")]:[],o.jsxRuntimeExports.jsx(n.Dropdown,{menu:{items:[{key:"export",label:"Export",disabled:!0},{key:"refresh",label:"Refresh",onClick:()=>i.refresh()}]},children:o.jsxRuntimeExports.jsx(n.Button,{children:o.jsxRuntimeExports.jsx(n.RefIcon$1,{})})},"menu")],options:{setting:{listsHeight:400},reload:()=>i.refresh()},dateFormatter:"string"}),o.jsxRuntimeExports.jsx(n.Modal,{title:m?"Edit Item":"Create Item",open:v,onOk:O,onCancel:()=>j(!1),destroyOnClose:!0,width:600,children:o.jsxRuntimeExports.jsx(n.Form,{form:p,layout:"vertical",children:x.map(e=>{var l,c,C;if(!e.dataIndex)return null;const t=e.dataIndex,r=e.title,s=!(e.fieldEditable??!0),a=((l=e.formConfig)==null?void 0:l.rules)||((c=e.formConfig)!=null&&c.required?[{required:!0,message:`${r} is required`}]:[]);if((C=e.formConfig)!=null&&C.component)return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:e.formConfig.component},t);switch(e.fieldType){case"string":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:o.jsxRuntimeExports.jsx(n.Input,{disabled:s})},t);case"number":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:o.jsxRuntimeExports.jsx(n.TypedInputNumber,{style:{width:"100%"},disabled:s})},t);case"date":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:o.jsxRuntimeExports.jsx(n.DatePicker,{style:{width:"100%"},showTime:!0,disabled:s})},t);case"boolean":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,valuePropName:"checked",children:o.jsxRuntimeExports.jsx(n.Switch,{disabled:s})},t);case"enum":return o.jsxRuntimeExports.jsx(n.Form.Item,{name:t,label:r,rules:a,children:o.jsxRuntimeExports.jsx(n.Select,{disabled:s,placeholder:`Select ${r.toLowerCase()}`,options:Object.entries(e.enumOptions||{}).map(([M,P])=>({label:P.text,value:M}))})},t);default:return null}})})})]})};module.exports=_;

package/dist/CrudTableExperimental.js

@@ -5,8 +5,8 @@ import { useCrudTable as te } from "./useCrudTable.js";
 import { s as R } from "./index-DNXRWKhU.js";
 const oe = (S) => {
   const { columns: m, rowKey: c, title: O, defaultPageSize: j = 10, hookConfig: D, enableBulkOperations: C = !1, customActions: x } = S, i = te(c, {
-    ...D,
-    defaultPageSize: j
+    defaultPageSize: j,
+    ...D
   }), [E, y] = g(!1), [h, F] = g(null), [d, w] = g([]), [p] = l.useForm();
   A(() => {
     i.refresh();

package/dist/CrudTableExperimentalLazy.d.ts

@@ -0,0 +1,4 @@
+import { EnhancedCrudTableConfig, DataType } from './CrudTableExperimental';
+declare const CrudTableExperimentalLazy: <T extends DataType>(props: EnhancedCrudTableConfig<T>) => import("react/jsx-runtime").JSX.Element;
+export default CrudTableExperimentalLazy;
+export type { EnhancedCrudTableConfig, DataType };

package/dist/hooks/useCrudTable.d.ts

@@ -25,9 +25,18 @@ export type CrudState<T> = {
     current: number;
     pageSize: number;
 };
-export type UseCrudTableConfig<T> = {
-    staticData?: T[];
-    api?: {
+type UseCrudTableConfigBase = {
+    defaultPageSize?: number;
+    enableCache?: boolean;
+    optimisticUpdates?: boolean;
+    onSuccess?: (operation: 'create' | 'update' | 'delete' | 'fetch', data: any) => void;
+    onError?: (operation: 'create' | 'update' | 'delete' | 'fetch', error: any) => void;
+};
+interface UseCrudTableConfigStatic<T> extends UseCrudTableConfigBase {
+    staticData: T[];
+}
+interface UseCrudTableConfigApi<T> extends UseCrudTableConfigBase {
+    api: {
         baseUrl?: string;
         endpoints?: {
             list?: string;
@@ -41,13 +50,11 @@ export type UseCrudTableConfig<T> = {
             response?: (data: any) => CrudResponse<T>;
         };
     };
-    operations?: Partial<CrudOperation<T>>;
-    defaultPageSize?: number;
-    enableCache?: boolean;
-    optimisticUpdates?: boolean;
-    onSuccess?: (operation: 'create' | 'update' | 'delete', data: any) => void;
-    onError?: (operation: 'create' | 'update' | 'delete' | 'fetch', error: any) => void;
-};
+}
+interface UseCrudTableConfigCustom<T> extends UseCrudTableConfigBase {
+    operations: Partial<CrudOperation<T>>;
+}
+export type UseCrudTableConfig<T> = UseCrudTableConfigStatic<T> | UseCrudTableConfigApi<T> | UseCrudTableConfigCustom<T>;
 export type CrudTableActions<T> = {
     refresh: () => Promise<void>;
     create: (data: Partial<T>) => Promise<T | null>;
@@ -58,4 +65,5 @@ export type CrudTableActions<T> = {
     state: CrudState<T>;
     actionRef: React.RefObject<ActionType | null>;
 };
-export declare const useCrudTable: <T extends Record<string, any>>(rowKey: keyof T, config?: UseCrudTableConfig<T>) => CrudTableActions<T>;
+export declare const useCrudTable: <T extends Record<string, any>>(rowKey: keyof T, config: UseCrudTableConfig<T>) => CrudTableActions<T>;
+export {};

package/dist/useCrudTable.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),y=require("./index-DygfPlBI.cjs"),M=S=>{const{baseUrl:e="",endpoints:i={},headers:w={},transform:t}=S.api||{},r={list:"/list",create:"/create",update:"/update",delete:"/delete",...i},o=async(u,c={})=>{const h=await fetch(`${e}${u}`,{headers:{"Content-Type":"application/json",...w},...c});if(!h.ok)throw new Error(`HTTP error! status: ${h.status}`);return h.json()};return{getList:async u=>{const c=new URL(`${e}${r.list}`,window.location.origin);Object.entries(u).forEach(([b,E])=>{E!=null&&c.searchParams.append(b,String(E))});const h=await o(c.pathname+c.search);return t!=null&&t.response?t.response(h):h},create:async u=>{const c=t!=null&&t.request?t.request(u):u;return o(r.create,{method:"POST",body:JSON.stringify(c)})},update:async(u,c)=>{const h=t!=null&&t.request?t.request(c):c;return o(`${r.update}/${u}`,{method:"PUT",body:JSON.stringify(h)})},delete:async u=>{await o(`${r.delete}/${u}`,{method:"DELETE"})}}},D=(S,e)=>{let i=[...S],w=Math.max(...i.map(t=>Number(t[e])||0))+1;return{getList:async t=>{const{current:r=1,pageSize:o=10,sortBy:u,sortOrder:c,...h}=t;let b=[...i];Object.entries(h).forEach(([s,l])=>{l!=null&&l!==""&&(b=b.filter(a=>String(a[s]).toLowerCase().includes(String(l).toLowerCase())))}),u&&c&&b.sort((s,l)=>{const a=s[u],n=l[u],p=a>n?1:a<n?-1:0;return c==="ascend"?p:-p});const E=(r-1)*o;return{data:b.slice(E,E+o),total:b.length,success:!0}},create:async t=>{const r={[e]:w++,...t};return i.push(r),r},update:async(t,r)=>{const o=i.findIndex(u=>u[e]===t);if(o===-1)throw new Error("Item not found");return i[o]={...i[o],...r},i[o]},delete:async t=>{const r=i.findIndex(o=>o[e]===t);if(r===-1)throw new Error("Item not found");i.splice(r,1)}}},T=(S,e={})=>{const i=m.useRef(null),[w,t]=m.useState({loading:!1,error:null,data:[],total:0,current:1,pageSize:e.defaultPageSize||10}),r=(()=>{if(e.operations)return e.operations;if(e.staticData)return D(e.staticData,S);if(e.api)return M(e);throw new Error("useCrudTable: Must provide either staticData, api config, or custom operations")})(),o=m.useCallback(async()=>{var d;t(s=>({...s,loading:!0,error:null}));try{const s={current:w.current,pageSize:w.pageSize},l=await r.getList(s);t(a=>({...a,data:l.data,total:l.total,loading:!1}))}catch(s){const l=s instanceof Error?s.message:"Failed to fetch data";t(a=>({...a,loading:!1,error:l})),(d=e.onError)==null||d.call(e,"fetch",s),y.staticMethods.error(l)}},[w.current,w.pageSize,r,e]),u=m.useCallback(async d=>{var s,l;if(!r.create)return y.staticMethods.error("Create operation not supported"),null;try{t(n=>({...n,loading:!0}));const a=await r.create(d);return e.optimisticUpdates?t(n=>({...n,data:[...n.data,a],total:n.total+1,loading:!1})):await o(),(s=e.onSuccess)==null||s.call(e,"create",a),y.staticMethods.success("Created successfully"),a}catch(a){t(p=>({...p,loading:!1}));const n=a instanceof Error?a.message:"Create failed";return(l=e.onError)==null||l.call(e,"create",a),y.staticMethods.error(n),null}},[r,e,o]),c=m.useCallback(async(d,s)=>{var l,a;if(!r.update)return y.staticMethods.error("Update operation not supported"),null;try{t(p=>({...p,loading:!0}));const n=await r.update(d,s);return e.optimisticUpdates?t(p=>({...p,data:p.data.map(C=>C[S]===d?{...C,...n}:C),loading:!1})):await o(),(l=e.onSuccess)==null||l.call(e,"update",n),y.staticMethods.success("Updated successfully"),n}catch(n){t(C=>({...C,loading:!1}));const p=n instanceof Error?n.message:"Update failed";return(a=e.onError)==null||a.call(e,"update",n),y.staticMethods.error(p),null}},[r,e,S,o]),h=m.useCallback(async d=>{var s,l;if(!r.delete)return y.staticMethods.error("Delete operation not supported"),!1;try{return t(a=>({...a,loading:!0})),await r.delete(d),e.optimisticUpdates?t(a=>({...a,data:a.data.filter(n=>n[S]!==d),total:a.total-1,loading:!1})):await o(),(s=e.onSuccess)==null||s.call(e,"delete",d),y.staticMethods.success("Deleted successfully"),!0}catch(a){t(p=>({...p,loading:!1}));const n=a instanceof Error?a.message:"Delete failed";return(l=e.onError)==null||l.call(e,"delete",a),y.staticMethods.error(n),!1}},[r,e,S,o]),b=m.useCallback(d=>{t(s=>({...s,pageSize:d,current:1}))},[]),E=m.useCallback(d=>{t(s=>({...s,current:d}))},[]);return{refresh:o,create:u,update:c,delete:h,setPageSize:b,setCurrentPage:E,state:w,actionRef:i}};exports.useCrudTable=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),y=require("./index-DygfPlBI.cjs"),M=S=>{const{baseUrl:e="",endpoints:i={},headers:w={},transform:t}=S.api,r={list:"/list",create:"/create",update:"/update",delete:"/delete",...i},n=async(u,c={})=>{const h=await fetch(`${e}${u}`,{headers:{"Content-Type":"application/json",...w},...c});if(!h.ok)throw new Error(`HTTP error! status: ${h.status}`);return h.json()};return{getList:async u=>{const c=new URL(`${e}${r.list}`,window.location.origin);Object.entries(u).forEach(([b,E])=>{E!=null&&c.searchParams.append(b,String(E))});const h=await n(c.pathname+c.search);return t!=null&&t.response?t.response(h):h},create:async u=>{const c=t!=null&&t.request?t.request(u):u;return n(r.create,{method:"POST",body:JSON.stringify(c)})},update:async(u,c)=>{const h=t!=null&&t.request?t.request(c):c;return n(`${r.update}/${u}`,{method:"PUT",body:JSON.stringify(h)})},delete:async u=>{await n(`${r.delete}/${u}`,{method:"DELETE"})}}},D=(S,e)=>{let i=[...S],w=Math.max(...i.map(t=>Number(t[e])||0))+1;return{getList:async t=>{const{current:r=1,pageSize:n=10,sortBy:u,sortOrder:c,...h}=t;let b=[...i];Object.entries(h).forEach(([s,l])=>{l!=null&&l!==""&&(b=b.filter(a=>String(a[s]).toLowerCase().includes(String(l).toLowerCase())))}),u&&c&&b.sort((s,l)=>{const a=s[u],o=l[u],p=a>o?1:a<o?-1:0;return c==="ascend"?p:-p});const E=(r-1)*n;return{data:b.slice(E,E+n),total:b.length,success:!0}},create:async t=>{const r={[e]:w++,...t};return i.push(r),r},update:async(t,r)=>{const n=i.findIndex(u=>u[e]===t);if(n===-1)throw new Error("Item not found");return i[n]={...i[n],...r},i[n]},delete:async t=>{const r=i.findIndex(n=>n[e]===t);if(r===-1)throw new Error("Item not found");i.splice(r,1)}}},T=(S,e)=>{const i=m.useRef(null),[w,t]=m.useState({loading:!1,error:null,data:[],total:0,current:1,pageSize:e.defaultPageSize||10}),r=(()=>{if("operations"in e)return e.operations;if("staticData"in e)return D(e.staticData,S);if("api"in e)return M(e);throw new Error("useCrudTable: Must provide either staticData, api config, or custom operations")})(),n=m.useCallback(async()=>{var d;t(s=>({...s,loading:!0,error:null}));try{const s={current:w.current,pageSize:w.pageSize},l=await r.getList(s);t(a=>({...a,data:l.data,total:l.total,loading:!1}))}catch(s){const l=s instanceof Error?s.message:"Failed to fetch data";t(a=>({...a,loading:!1,error:l})),(d=e.onError)==null||d.call(e,"fetch",s),y.staticMethods.error(l)}},[w.current,w.pageSize,r,e]),u=m.useCallback(async d=>{var s,l;if(!r.create)return y.staticMethods.error("Create operation not supported"),null;try{t(o=>({...o,loading:!0}));const a=await r.create(d);return e.optimisticUpdates?t(o=>({...o,data:[...o.data,a],total:o.total+1,loading:!1})):await n(),(s=e.onSuccess)==null||s.call(e,"create",a),y.staticMethods.success("Created successfully"),a}catch(a){t(p=>({...p,loading:!1}));const o=a instanceof Error?a.message:"Create failed";return(l=e.onError)==null||l.call(e,"create",a),y.staticMethods.error(o),null}},[r,e,n]),c=m.useCallback(async(d,s)=>{var l,a;if(!r.update)return y.staticMethods.error("Update operation not supported"),null;try{t(p=>({...p,loading:!0}));const o=await r.update(d,s);return e.optimisticUpdates?t(p=>({...p,data:p.data.map(C=>C[S]===d?{...C,...o}:C),loading:!1})):await n(),(l=e.onSuccess)==null||l.call(e,"update",o),y.staticMethods.success("Updated successfully"),o}catch(o){t(C=>({...C,loading:!1}));const p=o instanceof Error?o.message:"Update failed";return(a=e.onError)==null||a.call(e,"update",o),y.staticMethods.error(p),null}},[r,e,S,n]),h=m.useCallback(async d=>{var s,l;if(!r.delete)return y.staticMethods.error("Delete operation not supported"),!1;try{return t(a=>({...a,loading:!0})),await r.delete(d),e.optimisticUpdates?t(a=>({...a,data:a.data.filter(o=>o[S]!==d),total:a.total-1,loading:!1})):await n(),(s=e.onSuccess)==null||s.call(e,"delete",d),y.staticMethods.success("Deleted successfully"),!0}catch(a){t(p=>({...p,loading:!1}));const o=a instanceof Error?a.message:"Delete failed";return(l=e.onError)==null||l.call(e,"delete",a),y.staticMethods.error(o),!1}},[r,e,S,n]),b=m.useCallback(d=>{t(s=>({...s,pageSize:d,current:1}))},[]),E=m.useCallback(d=>{t(s=>({...s,current:d}))},[]);return{refresh:n,create:u,update:c,delete:h,setPageSize:b,setCurrentPage:E,state:w,actionRef:i}};exports.useCrudTable=T;

package/dist/useCrudTable.js

@@ -1,7 +1,7 @@
 import { useRef as D, useState as U, useCallback as C } from "react";
 import { s as y } from "./index-DNXRWKhU.js";
 const $ = (m) => {
-  const { baseUrl: e = "", endpoints: i = {}, headers: S = {}, transform: t } = m.api || {}, a = {
+  const { baseUrl: e = "", endpoints: i = {}, headers: S = {}, transform: t } = m.api, a = {
     list: "/list",
     create: "/create",
     update: "/update",
@@ -87,7 +87,7 @@ const $ = (m) => {
       i.splice(a, 1);
     }
   };
-}, T = (m, e = {}) => {
+}, T = (m, e) => {
   const i = D(null), [S, t] = U({
     loading: !1,
     error: null,
@@ -96,11 +96,11 @@ const $ = (m) => {
     current: 1,
     pageSize: e.defaultPageSize || 10
   }), a = (() => {
-    if (e.operations)
+    if ("operations" in e)
       return e.operations;
-    if (e.staticData)
+    if ("staticData" in e)
       return f(e.staticData, m);
-    if (e.api)
+    if ("api" in e)
       return $(e);
     throw new Error("useCrudTable: Must provide either staticData, api config, or custom operations");
   })(), n = C(async () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "antd-crud-table",
   "private": false,
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "homepage": ".",
   "keywords": [