{"_id":"@elselab-io/react-laravel-datatable","_rev":"2-a58d64acf2f52e559a23998a00e4fe09","name":"@elselab-io/react-laravel-datatable","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@elselab-io/react-laravel-datatable","version":"1.0.0","keywords":["laravel","pagination","datatable","typescript","tailwind","react"],"author":{"name":"elselab-io"},"license":"MIT","_id":"@elselab-io/react-laravel-datatable@1.0.0","maintainers":[{"name":"elselab","email":"support@elselab.io"}],"homepage":"https://github.com/elselab-io/react-laravel-datatable#readme","bugs":{"url":"https://github.com/elselab-io/react-laravel-datatable/issues"},"dist":{"shasum":"de5f0c7252236d27004fce9ac3c2a5a4127d9ca7","tarball":"https://registry.npmjs.org/@elselab-io/react-laravel-datatable/-/react-laravel-datatable-1.0.0.tgz","fileCount":15,"integrity":"sha512-7C5aP8D8zJWQxExLa0t6W5REkNwrz+T04WF0kCHHUJFuGOIUib6VmNn1Th1yDLfBYcHrLGAuqfiiA9Jz8aOhkw==","signatures":[{"sig":"MEUCIQDfB1DCEB/KajvwIuTVXnGiIS02J/fNd5hOlOSuO27v2AIgNhJnGJ9vh2VGIskuwUh1/uL+PJSSy/Q8Mi5EoKnEdps=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":211941},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"4aa3f3ecab21c77b373808bce1517e4c39d8967f","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepack":"npm run build","type-check":"tsc --noEmit","prepublishOnly":"npm run build && npm run type-check"},"_npmUser":{"name":"elselab","email":"support@elselab.io"},"repository":{"url":"git+https://github.com/elselab-io/react-laravel-datatable.git","type":"git"},"_npmVersion":"10.9.2","description":"A TypeScript/JavaScript library for Laravel pagination with Tailwind CSS support","directories":{},"_nodeVersion":"23.11.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","tslib":"^2.6.2","eslint":"^8.57.0","rollup":"^4.17.2","typescript":"^5.4.5","@types/jest":"^29.5.12","@types/react":"^18.2.79","rollup-plugin-dts":"^6.1.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@typescript-eslint/parser":"^7.7.0","@rollup/plugin-node-resolve":"^15.2.3","@typescript-eslint/eslint-plugin":"^7.7.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-laravel-datatable_1.0.0_1748883699162_0.13166177976518756","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@elselab-io/react-laravel-datatable","version":"1.0.1","description":"A TypeScript/JavaScript library for Laravel pagination with Tailwind CSS support","type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"jest","lint":"eslint src --ext .ts,.tsx","type-check":"tsc --noEmit","prepublishOnly":"npm run build && npm run type-check","prepack":"npm run build"},"keywords":["laravel","pagination","datatable","typescript","tailwind","react"],"author":{"name":"elselab-io"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/elselab-io/react-laravel-datatable.git"},"homepage":"https://github.com/elselab-io/react-laravel-datatable#readme","bugs":{"url":"https://github.com/elselab-io/react-laravel-datatable/issues"},"publishConfig":{"access":"public"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@types/jest":"^29.5.12","@types/react":"^18.2.79","@typescript-eslint/eslint-plugin":"^7.7.0","@typescript-eslint/parser":"^7.7.0","eslint":"^8.57.0","jest":"^29.7.0","rollup":"^4.17.2","rollup-plugin-dts":"^6.1.0","tslib":"^2.6.2","typescript":"^5.4.5"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_id":"@elselab-io/react-laravel-datatable@1.0.1","gitHead":"4aa3f3ecab21c77b373808bce1517e4c39d8967f","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-V12BoL6UrnuEoCJhwDYutb6Uz2hgMILnjLdgXxPk54+FDpY+bbvq27gK8I8vE6LvkPX4U2SC90PFGos8TScIqA==","shasum":"ef4d342b4323145dbd5cbd35b67166dad1bd2ee9","tarball":"https://registry.npmjs.org/@elselab-io/react-laravel-datatable/-/react-laravel-datatable-1.0.1.tgz","fileCount":15,"unpackedSize":217864,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGv2puLU7oYl5OvstZ5kUXv6SeKeG25yuBm9cIX+CnUWAiAE4znZvYc3lbkXjZj9h2HKMnl71DdYQ5IdUOH9G/q/uw=="}]},"_npmUser":{"name":"elselab","email":"support@elselab.io"},"directories":{},"maintainers":[{"name":"elselab","email":"support@elselab.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-laravel-datatable_1.0.1_1748884263223_0.3658519859658158"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-02T17:01:39.063Z","modified":"2025-06-02T17:11:03.661Z","1.0.0":"2025-06-02T17:01:39.362Z","1.0.1":"2025-06-02T17:11:03.420Z"},"bugs":{"url":"https://github.com/elselab-io/react-laravel-datatable/issues"},"author":{"name":"elselab-io"},"license":"MIT","homepage":"https://github.com/elselab-io/react-laravel-datatable#readme","keywords":["laravel","pagination","datatable","typescript","tailwind","react"],"repository":{"type":"git","url":"git+https://github.com/elselab-io/react-laravel-datatable.git"},"description":"A TypeScript/JavaScript library for Laravel pagination with Tailwind CSS support","maintainers":[{"name":"elselab","email":"support@elselab.io"}],"readme":"[![npm version](https://badge.fury.io/js/%40elselab-io%2Freact-laravel-datatable.svg)](https://badge.fury.io/js/%40elselab-io%2Freact-laravel-datatable)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-brightgreen.svg)](https://www.typescriptlang.org/)\n\nA powerful, TypeScript-ready data table library for Laravel pagination with React support and beautiful Tailwind CSS styling.\n\n## ✨ Key Features\n\n- **🚀 Framework Agnostic** - Works with vanilla JavaScript, React, Vue, or any framework\n- **📊 Laravel Integration** - Seamless integration with Laravel's resource pagination API\n- **🎨 Tailwind CSS Styling** - Beautiful, responsive design with Tailwind CSS\n- **🔍 Search & Sort** - Built-in search and sorting functionality with server-side support\n- **📱 Mobile Responsive** - Mobile-friendly pagination and table design\n- **🔧 TypeScript Support** - Full type definitions and IntelliSense support\n- **⚡ Performance Optimized** - Lightweight with minimal dependencies\n- **🧹 Easy Integration** - Simple API for common use cases\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install @elselab-io/react-laravel-datatable\n```\n\n### Basic Usage\n\n```typescript\nimport { ReactDataTable, Column } from '@elselab-io/react-laravel-datatable';\n\n// Define your data interface\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n  created_at: string;\n}\n\n// Define columns\nconst columns: Column<User>[] = [\n  { key: 'id', label: 'ID', sortable: true },\n  { key: 'name', label: 'Name', sortable: true },\n  { key: 'email', label: 'Email', sortable: true },\n  { \n    key: 'created_at', \n    label: 'Created', \n    render: (value) => new Date(value).toLocaleDateString() \n  }\n];\n\nfunction UsersTable() {\n  return (\n    <ReactDataTable<User>\n      apiUrl=\"/api/users\"\n      columns={columns}\n      searchable={true}\n      onRowClick={(user) => console.log('Selected user:', user)}\n    />\n  );\n}\n```\n\nThat's it! Your Laravel-powered data table is ready with search, sorting, and pagination.\n\n## 📖 API Reference\n\n### `ReactDataTable<T>`\n\nThe main React component for rendering data tables with Laravel pagination.\n\n```typescript\n<ReactDataTable<T>\n  apiUrl=\"/api/users\"                    // Laravel API endpoint\n  columns={columns}                      // Column definitions\n  searchable={true}                      // Enable search functionality\n  perPage={10}                          // Items per page\n  onRowClick={(item) => {}}             // Row click handler\n  onDataLoad={(data) => {}}             // Data load callback\n  className=\"custom-table\"              // Custom CSS classes\n  loadingComponent={<CustomLoader />}   // Custom loading component\n/>\n```\n\n### `DataTable` (Vanilla JavaScript)\n\nFor non-React applications, use the vanilla JavaScript DataTable class.\n\n```typescript\nimport { DataTable } from '@elselab-io/react-laravel-datatable';\n\nconst dataTable = new DataTable('#table-container', columns, {\n  apiUrl: '/api/users',\n  perPage: 10,\n  searchable: true,\n  sortable: true\n});\n```\n\n### `useLaravelDataTable` Hook\n\nReact hook for custom data table implementations.\n\n```typescript\nimport { useLaravelDataTable } from '@elselab-io/react-laravel-datatable';\n\nconst {\n  data,\n  loading,\n  error,\n  search,\n  sort,\n  goToPage,\n  refresh\n} = useLaravelDataTable<User>({\n  apiUrl: '/api/users',\n  perPage: 10\n});\n```\n\n### Column Definition\n\n```typescript\ninterface Column<T> {\n  key: keyof T;                         // Data property key\n  label: string;                        // Column header text\n  sortable?: boolean;                   // Enable sorting\n  render?: (value: any, row: T) => any; // Custom render function\n  className?: string;                   // Custom CSS classes\n}\n```\n\n## 🎨 Examples\n\n### Advanced Column Rendering\n\n```typescript\nconst columns: Column<User>[] = [\n  { key: 'id', label: 'ID', sortable: true },\n  { key: 'name', label: 'Name', sortable: true },\n  { \n    key: 'status', \n    label: 'Status',\n    render: (value) => (\n      <span className={`px-2 py-1 rounded ${\n        value === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'\n      }`}>\n        {value}\n      </span>\n    )\n  },\n  {\n    key: 'actions',\n    label: 'Actions',\n    sortable: false,\n    render: (_, user) => (\n      <div className=\"space-x-2\">\n        <button \n          onClick={() => editUser(user.id)}\n          className=\"text-blue-600 hover:text-blue-800\"\n        >\n          Edit\n        </button>\n        <button \n          onClick={() => deleteUser(user.id)}\n          className=\"text-red-600 hover:text-red-800\"\n        >\n          Delete\n        </button>\n      </div>\n    )\n  }\n];\n```\n\n### Custom Loading and Error States\n\n```typescript\nfunction CustomDataTable() {\n  const LoadingSpinner = () => (\n    <div className=\"flex justify-center items-center py-8\">\n      <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600\"></div>\n    </div>\n  );\n\n  return (\n    <ReactDataTable<User>\n      apiUrl=\"/api/users\"\n      columns={columns}\n      loadingComponent={<LoadingSpinner />}\n      onDataLoad={(data) => {\n        console.log(`Loaded ${data.data.length} users`);\n      }}\n    />\n  );\n}\n```\n\n### Vanilla JavaScript Implementation\n\n```typescript\nimport { DataTable } from '@elselab-io/react-laravel-datatable';\n\n// Define columns\nconst columns = [\n  { key: 'id', label: 'ID', sortable: true },\n  { key: 'name', label: 'Name', sortable: true },\n  { key: 'email', label: 'Email', sortable: true },\n  { \n    key: 'created_at', \n    label: 'Created', \n    render: (value) => new Date(value).toLocaleDateString() \n  }\n];\n\n// Initialize DataTable\nconst dataTable = new DataTable('#users-table', columns, {\n  apiUrl: '/api/users',\n  perPage: 15,\n  searchable: true,\n  sortable: true,\n  className: 'custom-table-class'\n});\n\n// API methods\ndataTable.refresh();                    // Reload data\ndataTable.search('john');              // Search for 'john'\ndataTable.sort('name', 'desc');        // Sort by name descending\ndataTable.goToPage(2);                 // Navigate to page 2\n```\n\n### Using the Hook for Custom Implementation\n\n```typescript\nimport { useLaravelDataTable } from '@elselab-io/react-laravel-datatable';\n\nfunction CustomUsersTable() {\n  const {\n    data,\n    loading,\n    error,\n    search,\n    sort,\n    goToPage,\n    currentPage,\n    totalPages\n  } = useLaravelDataTable<User>({\n    apiUrl: '/api/users',\n    perPage: 10\n  });\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error}</div>;\n\n  return (\n    <div>\n      <input \n        type=\"text\" \n        placeholder=\"Search users...\"\n        onChange={(e) => search(e.target.value)}\n        className=\"mb-4 p-2 border rounded\"\n      />\n      \n      <table className=\"w-full border-collapse\">\n        <thead>\n          <tr>\n            <th onClick={() => sort('name')}>Name</th>\n            <th onClick={() => sort('email')}>Email</th>\n          </tr>\n        </thead>\n        <tbody>\n          {data?.data.map(user => (\n            <tr key={user.id}>\n              <td>{user.name}</td>\n              <td>{user.email}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      \n      <div className=\"mt-4\">\n        <button \n          onClick={() => goToPage(currentPage - 1)}\n          disabled={currentPage === 1}\n        >\n          Previous\n        </button>\n        <span className=\"mx-4\">\n          Page {currentPage} of {totalPages}\n        </span>\n        <button \n          onClick={() => goToPage(currentPage + 1)}\n          disabled={currentPage === totalPages}\n        >\n          Next\n        </button>\n      </div>\n    </div>\n  );\n}\n```\n\n## ⚡ Laravel Backend Setup\n\n### Controller Implementation\n\n```php\n<?php\n\nnamespace App\\Http\\Controllers\\Api;\n\nuse App\\Http\\Controllers\\Controller;\nuse App\\Models\\User;\nuse Illuminate\\Http\\Request;\n\nclass UserController extends Controller\n{\n    public function index(Request $request)\n    {\n        $query = User::query();\n\n        // Handle search\n        if ($request->has('search') && $request->search) {\n            $search = $request->search;\n            $query->where(function ($q) use ($search) {\n                $q->where('name', 'like', \"%{$search}%\")\n                  ->orWhere('email', 'like', \"%{$search}%\");\n            });\n        }\n\n        // Handle sorting\n        if ($request->has('sort_by') && $request->sort_by) {\n            $direction = $request->sort_direction ?? 'asc';\n            $query->orderBy($request->sort_by, $direction);\n        }\n\n        // Paginate results\n        $perPage = $request->per_page ?? 10;\n        $users = $query->paginate($perPage);\n\n        return response()->json($users);\n    }\n}\n```\n\n### Expected API Response Format\n\n```json\n{\n  \"current_page\": 1,\n  \"data\": [\n    {\n      \"id\": 1,\n      \"name\": \"John Doe\",\n      \"email\": \"john@example.com\",\n      \"created_at\": \"2023-01-01T00:00:00.000000Z\"\n    }\n  ],\n  \"first_page_url\": \"http://example.com/api/users?page=1\",\n  \"from\": 1,\n  \"last_page\": 5,\n  \"last_page_url\": \"http://example.com/api/users?page=5\",\n  \"links\": [...],\n  \"next_page_url\": \"http://example.com/api/users?page=2\",\n  \"path\": \"http://example.com/api/users\",\n  \"per_page\": 10,\n  \"prev_page_url\": null,\n  \"to\": 10,\n  \"total\": 50\n}\n```\n\n### Route Definition\n\n```php\n// routes/api.php\nRoute::get('/users', [UserController::class, 'index']);\n```\n\n## 🔧 Advanced Usage\n\n### Custom API Parameters\n\n```typescript\n// Add custom parameters to all API requests\nconst { data, loading } = useLaravelDataTable<User>({\n  apiUrl: '/api/users',\n  customParams: {\n    department: 'engineering',\n    status: 'active'\n  }\n});\n```\n\n### Dynamic Column Configuration\n\n```typescript\nconst [columns, setColumns] = useState<Column<User>[]>([\n  { key: 'id', label: 'ID', sortable: true },\n  { key: 'name', label: 'Name', sortable: true }\n]);\n\n// Add columns dynamically\nconst addEmailColumn = () => {\n  setColumns(prev => [...prev, { \n    key: 'email', \n    label: 'Email', \n    sortable: true \n  }]);\n};\n```\n\n### Custom Styling with Tailwind\n\n```typescript\n<ReactDataTable<User>\n  apiUrl=\"/api/users\"\n  columns={columns}\n  className=\"shadow-lg rounded-lg overflow-hidden\"\n  tableClassName=\"min-w-full divide-y divide-gray-200\"\n  headerClassName=\"bg-gray-50\"\n  bodyClassName=\"bg-white divide-y divide-gray-200\"\n  paginationClassName=\"bg-white px-4 py-3 border-t border-gray-200\"\n/>\n```\n\n## 🌐 Framework Support\n\n### React\n\n```typescript\nimport { ReactDataTable } from '@elselab-io/react-laravel-datatable';\n// Full React component with hooks support\n```\n\n### Vue.js\n\n```javascript\nimport { DataTable } from '@elselab-io/react-laravel-datatable';\n// Use the vanilla DataTable class in Vue components\n```\n\n### Angular\n\n```typescript\nimport { DataTable } from '@elselab-io/react-laravel-datatable';\n// Integrate with Angular components using the DataTable class\n```\n\n### Vanilla JavaScript\n\n```javascript\nimport { DataTable } from '@elselab-io/react-laravel-datatable';\n// Works with any JavaScript application\n```\n\n## 📦 Module Systems\n\nreact-laravel-datatable supports all module systems:\n\n### ES Modules\n\n```javascript\nimport { ReactDataTable, DataTable, useLaravelDataTable } from '@elselab-io/react-laravel-datatable';\n```\n\n### CommonJS\n\n```javascript\nconst { ReactDataTable, DataTable, useLaravelDataTable } = require('@elselab-io/react-laravel-datatable');\n```\n\n### TypeScript\n\n```typescript\nimport { \n  ReactDataTable, \n  DataTable, \n  useLaravelDataTable,\n  Column,\n  LaravelPaginationResponse \n} from '@elselab-io/react-laravel-datatable';\n```\n\n## 🧪 Testing\n\nRun the test suite:\n\n```bash\nnpm test\n```\n\nBuild the project:\n\n```bash\nnpm run build\n```\n\nRun examples:\n\n```bash\ncd examples/react-app\nnpm install\nnpm start\n```\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📊 Bundle Size\n\n- **Minified**: ~25KB\n- **Gzipped**: ~8KB\n- **Dependencies**: React (peer dependency)\n- **TypeScript definitions included**\n\n---\n\n<div align=\"center\">\n  <a href=\"https://elselab.io\">\n    <img src=\"https://elselab.io/wp-content/uploads/2024/04/Elselab-Logo.png\" alt=\"Else Lab\" width=\"200\">\n  </a>\n\n  **Made with ❤️ by [Else Lab](https://github.com/elselab-io)**\n\n  [Website](https://elselab.io) • [GitHub](https://github.com/elselab-io) • [Contact](mailto:contact@elselab.io)\n</div>\n","readmeFilename":"README.md"}