{"_id":"@allejkomal/react-table-editor","_rev":"4-877593ce0bd7d3c404055b32c51d819d","name":"@allejkomal/react-table-editor","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@allejkomal/react-table-editor","version":"1.0.0","keywords":["react","table","editor","vite","typescript","npm","package"],"author":{"name":"Allej Komal","email":"allejkomal@gmail.com"},"license":"ISC","_id":"@allejkomal/react-table-editor@1.0.0","maintainers":[{"name":"allejkomal","email":"allejkomal@gmail.com"}],"homepage":"https://github.com/allejkomal/react-table-editor","bugs":{"url":"https://github.com/allejkomal/react-table-editor/issues"},"dist":{"shasum":"1438f86c0ff25da8a181395f9f5153e4372172d6","tarball":"https://registry.npmjs.org/@allejkomal/react-table-editor/-/react-table-editor-1.0.0.tgz","fileCount":10,"integrity":"sha512-44fppqe/9icdOmR6+JZzejhV9Aw6Xju9xG5ZJ0I44Z4Vi1FsyghWJk7tcM+ZAkZVbS5e3z1VMsFvZ7Fq99GDKA==","signatures":[{"sig":"MEUCIQD1KlFcS4ndcetHuo3zkJE1eOMFcgons5krhyk1Hgq3EwIgUUXx9wcemEpcMZkf0cfrOQRWSsjnNnh4c5qJW/a1FE4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5065478},"main":"./dist/index.cjs","type":"module","_from":"file:allejkomal-react-table-editor-1.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"scripts":{"build":"vite build"},"_npmUser":{"name":"allejkomal","email":"allejkomal@gmail.com"},"_resolved":"C:\\Users\\KOMALK~1\\AppData\\Local\\Temp\\f53ba6dce8be631d168272159b63c60f\\allejkomal-react-table-editor-1.0.0.tgz","_integrity":"sha512-44fppqe/9icdOmR6+JZzejhV9Aw6Xju9xG5ZJ0I44Z4Vi1FsyghWJk7tcM+ZAkZVbS5e3z1VMsFvZ7Fq99GDKA==","repository":{"url":"git+https://github.com/allejkomal/react-table-editor.git","type":"git"},"_npmVersion":"10.9.3","description":"Vite TypeScript library npm package template","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^7.1.9","react":"^19.2.0","tslib":"^2.8.1","date-fns":"^4.1.0","react-dom":"^19.2.0","typescript":"^5.9.3","@types/node":"^24.7.0","@types/react":"^19.2.1","lucide-react":"^0.544.0","@dnd-kit/core":"^6.3.1","tailwind-merge":"^3.3.1","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.0","react-day-picker":"^9.10.0","@dnd-kit/sortable":"^10.0.0","@dnd-kit/modifiers":"^9.0.0","@dnd-kit/utilities":"^3.2.2","@radix-ui/react-slot":"^1.2.3","@vitejs/plugin-react":"^5.0.4","@tanstack/react-table":"^8.21.3","@radix-ui/react-select":"^2.2.6","@radix-ui/react-checkbox":"^1.3.3","class-variance-authority":"^0.7.1","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-scroll-area":"^1.2.10","@radix-ui/react-dropdown-menu":"^2.1.16"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-table-editor_1.0.0_1760122152385_0.9090729864995453","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@allejkomal/react-table-editor","version":"1.0.1","keywords":["react","table","data-table","tanstack-table","typescript","drag-drop","filtering","sorting","pagination","column-pinning","row-selection","react-table","data-grid"],"author":{"name":"Allej Komal","email":"allejkomal@gmail.com"},"license":"MIT","_id":"@allejkomal/react-table-editor@1.0.1","maintainers":[{"name":"allejkomal","email":"allejkomal@gmail.com"}],"homepage":"https://github.com/allejkomal/react-table-editor","bugs":{"url":"https://github.com/allejkomal/react-table-editor/issues"},"dist":{"shasum":"8cfbd3c24223f600c2d8ac474c5404bb1398214a","tarball":"https://registry.npmjs.org/@allejkomal/react-table-editor/-/react-table-editor-1.0.1.tgz","fileCount":10,"integrity":"sha512-QJHnslAQrYwCIYe9fZCgulPRR/VHMu/E6xjYZek2arTOW4r/gwEmx2/6hQtvH6ZoqqJFI5M5HzvDt9uo3xG07Q==","signatures":[{"sig":"MEUCIBc3LSrr5tTbSUCvpnahJ4H9H47aM5z2L0XeboiWbgHuAiEA8yhRpnbdu+M0SFUg3rumJsEbyMO/ztYBuPP5Zky+qi4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6634131},"main":"./dist/index.cjs","type":"module","_from":"file:allejkomal-react-table-editor-1.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"scripts":{"build":"vite build"},"_npmUser":{"name":"allejkomal","email":"allejkomal@gmail.com"},"_resolved":"C:\\Users\\KOMALK~1\\AppData\\Local\\Temp\\b1dc4e08625010a8d7cb1d1b9695c6d1\\allejkomal-react-table-editor-1.0.1.tgz","_integrity":"sha512-QJHnslAQrYwCIYe9fZCgulPRR/VHMu/E6xjYZek2arTOW4r/gwEmx2/6hQtvH6ZoqqJFI5M5HzvDt9uo3xG07Q==","repository":{"url":"git+https://github.com/allejkomal/react-table-editor.git","type":"git"},"_npmVersion":"10.9.3","description":"A powerful, feature-rich React table component with drag & drop, filtering, sorting, pagination, column pinning, and row selection","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^7.1.9","react":"^19.2.0","tslib":"^2.8.1","date-fns":"^4.1.0","react-dom":"^19.2.0","typescript":"^5.9.3","@types/node":"^24.7.0","@types/react":"^19.2.1","lucide-react":"^0.544.0","@dnd-kit/core":"^6.3.1","tailwind-merge":"^3.3.1","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.0","react-day-picker":"^9.10.0","@dnd-kit/sortable":"^10.0.0","@dnd-kit/modifiers":"^9.0.0","@dnd-kit/utilities":"^3.2.2","@radix-ui/react-slot":"^1.2.3","@vitejs/plugin-react":"^5.0.4","@tanstack/react-table":"^8.21.3","@radix-ui/react-select":"^2.2.6","@radix-ui/react-checkbox":"^1.3.3","class-variance-authority":"^0.7.1","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-scroll-area":"^1.2.10","@radix-ui/react-dropdown-menu":"^2.1.16"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-table-editor_1.0.1_1760123393527_0.25807915390751335","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@allejkomal/react-table-editor","version":"1.0.2","keywords":["react","table","data-table","tanstack-table","typescript","drag-drop","filtering","sorting","pagination","column-pinning","row-selection","react-table","data-grid"],"author":{"name":"Allej Komal","email":"allejkomal@gmail.com"},"license":"MIT","_id":"@allejkomal/react-table-editor@1.0.2","maintainers":[{"name":"allejkomal","email":"allejkomal@gmail.com"}],"homepage":"https://github.com/allejkomal/react-table-editor","bugs":{"url":"https://github.com/allejkomal/react-table-editor/issues"},"dist":{"shasum":"5c7429fe86d23c7187756bebad37c928449f12b4","tarball":"https://registry.npmjs.org/@allejkomal/react-table-editor/-/react-table-editor-1.0.2.tgz","fileCount":11,"integrity":"sha512-uL/ySe0lj909nhTt3sGGG9ZXtO1t80i+xn+sI71lCEFZo98dw/KRWiPosqyDpFCPwFBZ+lidX+eWppEoyrf7Eg==","signatures":[{"sig":"MEQCIEgeg3C8/jsZ33BHPIINU6AevsoT3iVrapLZXHjNpodYAiBJjxLcZILHcYZW00Ho3KjEgQxKOauvhtrvbjQOS3Kz2A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6636267},"main":"./dist/index.cjs","type":"module","_from":"file:allejkomal-react-table-editor-1.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles":"./dist/react-table-editor.css"},"scripts":{"build":"vite build"},"_npmUser":{"name":"allejkomal","email":"allejkomal@gmail.com"},"_resolved":"C:\\Users\\KOMALK~1\\AppData\\Local\\Temp\\7a42891aaf848adca417b3110be631a6\\allejkomal-react-table-editor-1.0.2.tgz","_integrity":"sha512-uL/ySe0lj909nhTt3sGGG9ZXtO1t80i+xn+sI71lCEFZo98dw/KRWiPosqyDpFCPwFBZ+lidX+eWppEoyrf7Eg==","repository":{"url":"git+https://github.com/allejkomal/react-table-editor.git","type":"git"},"_npmVersion":"10.9.3","description":"A powerful, feature-rich React table component with drag & drop, filtering, sorting, pagination, column pinning, and row selection","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^7.1.9","react":"^19.2.0","tslib":"^2.8.1","date-fns":"^4.1.0","react-dom":"^19.2.0","typescript":"^5.9.3","@types/node":"^24.7.0","@types/react":"^19.2.1","lucide-react":"^0.544.0","@dnd-kit/core":"^6.3.1","tailwind-merge":"^3.3.1","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.0","react-day-picker":"^9.10.0","@dnd-kit/sortable":"^10.0.0","@dnd-kit/modifiers":"^9.0.0","@dnd-kit/utilities":"^3.2.2","@radix-ui/react-slot":"^1.2.3","@vitejs/plugin-react":"^5.0.4","@tanstack/react-table":"^8.21.3","@radix-ui/react-select":"^2.2.6","@radix-ui/react-checkbox":"^1.3.3","class-variance-authority":"^0.7.1","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-scroll-area":"^1.2.10","@radix-ui/react-dropdown-menu":"^2.1.16"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-table-editor_1.0.2_1760123939465_0.7081858898435869","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@allejkomal/react-table-editor","version":"1.0.3","description":"A powerful, feature-rich React table component with drag & drop, filtering, sorting, pagination, column pinning, and row selection","author":{"name":"Allej Komal","email":"allejkomal@gmail.com"},"homepage":"https://github.com/allejkomal/react-table-editor","repository":{"type":"git","url":"git+https://github.com/allejkomal/react-table-editor.git"},"license":"MIT","keywords":["react","table","data-table","tanstack-table","typescript","drag-drop","filtering","sorting","pagination","column-pinning","row-selection","react-table","data-grid"],"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles":"./dist/react-table-editor.css"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"devDependencies":{"react":"^19.2.0","react-dom":"^19.2.0","@types/node":"^24.7.0","@types/react":"^19.2.1","@types/react-dom":"^19.2.0","@vitejs/plugin-react":"^5.0.4","@dnd-kit/core":"^6.3.1","@dnd-kit/modifiers":"^9.0.0","@dnd-kit/sortable":"^10.0.0","@dnd-kit/utilities":"^3.2.2","@tanstack/react-table":"^8.21.3","clsx":"^2.1.1","tailwind-merge":"^3.3.1","tslib":"^2.8.1","react-day-picker":"^9.10.0","date-fns":"^4.1.0","typescript":"^5.9.3","lucide-react":"^0.544.0","@radix-ui/react-slot":"^1.2.3","@radix-ui/react-scroll-area":"^1.2.10","@radix-ui/react-dropdown-menu":"^2.1.16","@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-select":"^2.2.6","class-variance-authority":"^0.7.1","vite":"^7.1.9","vite-plugin-dts":"^4.5.4"},"scripts":{"build":"vite build"},"_id":"@allejkomal/react-table-editor@1.0.3","bugs":{"url":"https://github.com/allejkomal/react-table-editor/issues"},"_integrity":"sha512-q9Q9ujgGf0h+7Wt0h8HWyUymaQKDzjHX9MTJWhB8V+eEWqOGskG8W6Fw7aszlUcKGWkyIbcOppSqaXLgNXCd2w==","_resolved":"C:\\Users\\KOMALK~1\\AppData\\Local\\Temp\\bd262adc99c1d695c7b70c081a4d6640\\allejkomal-react-table-editor-1.0.3.tgz","_from":"file:allejkomal-react-table-editor-1.0.3.tgz","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-q9Q9ujgGf0h+7Wt0h8HWyUymaQKDzjHX9MTJWhB8V+eEWqOGskG8W6Fw7aszlUcKGWkyIbcOppSqaXLgNXCd2w==","shasum":"9da9257c371db5761da0fc555e517c756ab674d5","tarball":"https://registry.npmjs.org/@allejkomal/react-table-editor/-/react-table-editor-1.0.3.tgz","fileCount":11,"unpackedSize":6639530,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCLuSjfSCglcNyWmgQ1+vAgpenj2A99CKnb4vzcWn9btQIhANtUyrfEtTSFkBCQi+EhERmJFxHCdZNEDhzi4MGvQiRx"}]},"_npmUser":{"name":"allejkomal","email":"allejkomal@gmail.com"},"directories":{},"maintainers":[{"name":"allejkomal","email":"allejkomal@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-table-editor_1.0.3_1760124331377_0.9533931548948127"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-10T18:49:12.312Z","modified":"2025-10-10T19:25:31.784Z","1.0.0":"2025-10-10T18:49:12.620Z","1.0.1":"2025-10-10T19:09:53.790Z","1.0.2":"2025-10-10T19:18:59.786Z","1.0.3":"2025-10-10T19:25:31.584Z"},"bugs":{"url":"https://github.com/allejkomal/react-table-editor/issues"},"author":{"name":"Allej Komal","email":"allejkomal@gmail.com"},"license":"MIT","homepage":"https://github.com/allejkomal/react-table-editor","keywords":["react","table","data-table","tanstack-table","typescript","drag-drop","filtering","sorting","pagination","column-pinning","row-selection","react-table","data-grid"],"repository":{"type":"git","url":"git+https://github.com/allejkomal/react-table-editor.git"},"description":"A powerful, feature-rich React table component with drag & drop, filtering, sorting, pagination, column pinning, and row selection","maintainers":[{"name":"allejkomal","email":"allejkomal@gmail.com"}],"readme":"# React Table Editor\n\nA powerful, feature-rich React table component built with TanStack Table, featuring drag & drop column reordering, advanced filtering, sorting, pagination, column pinning, and row selection capabilities.\n\n## ✨ Features\n\n- **🔄 Drag & Drop**: Reorder columns with intuitive drag and drop\n- **📌 Column Pinning**: Pin columns to left or right for better data visibility\n- **🔍 Advanced Filtering**: Multiple filter types (contains, equals, starts with, etc.)\n- **📊 Sorting**: Multi-column sorting with visual indicators\n- **📄 Pagination**: Built-in pagination with customizable page sizes\n- **✅ Row Selection**: Single and multi-row selection with checkboxes/radio buttons\n- **👁️ Column Visibility**: Show/hide columns dynamically\n- **📏 Column Resizing**: Resize columns with smooth interactions\n- **🔎 Global Search**: Search across all columns simultaneously\n- **🎨 Customizable**: Extensive configuration options and styling\n- **♿ Accessible**: Built with accessibility in mind using Radix UI primitives\n- **📱 Responsive**: Works great on desktop and mobile devices\n\n## 🚀 Installation\n\n```bash\nnpm install @allejkomal/react-table-editor\n# or\nyarn add @allejkomal/react-table-editor\n# or\npnpm add @allejkomal/react-table-editor\n```\n\n## 📦 Peer Dependencies\n\nThis package requires the following peer dependencies:\n\n```bash\nnpm install react react-dom tailwindcss\n```\n\n## 🎨 Required CSS Import\n\n**Important**: You must import the component styles in your application. The component uses Tailwind CSS classes, so you need Tailwind CSS configured in your project.\n\n### Option 1: With Tailwind CSS (Recommended)\n\nIf you're using Tailwind CSS in your project:\n\n```tsx\n// Import the component styles\nimport \"@allejkomal/react-table-editor/styles\";\n\n// Your other imports\nimport { TableEditor, ExtendedColumnDef } from \"@allejkomal/react-table-editor\";\n```\n\nMake sure you have Tailwind CSS configured in your project:\n\n```bash\nnpm install tailwindcss\n```\n\nAnd include Tailwind in your CSS:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n### Option 2: Without Tailwind CSS\n\nIf you're not using Tailwind CSS, you can still use the component, but you'll need to add the Tailwind classes manually or use a CDN:\n\n```html\n<!-- Add Tailwind CSS from CDN -->\n<script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\nOr install Tailwind CSS just for this component:\n\n```bash\nnpm install tailwindcss\nnpx tailwindcss init\n```\n\nThen add to your CSS:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n## 🎯 Quick Start\n\n```tsx\nimport React from \"react\";\nimport \"@allejkomal/react-table-editor/styles\";\nimport { TableEditor, ExtendedColumnDef } from \"@allejkomal/react-table-editor\";\n\n// Define your data type\ninterface User {\n  id: string;\n  name: string;\n  email: string;\n  role: string;\n  status: \"active\" | \"inactive\";\n}\n\n// Sample data\nconst users: User[] = [\n  {\n    id: \"1\",\n    name: \"John Doe\",\n    email: \"john@example.com\",\n    role: \"Admin\",\n    status: \"active\",\n  },\n  {\n    id: \"2\",\n    name: \"Jane Smith\",\n    email: \"jane@example.com\",\n    role: \"User\",\n    status: \"active\",\n  },\n  {\n    id: \"3\",\n    name: \"Bob Johnson\",\n    email: \"bob@example.com\",\n    role: \"User\",\n    status: \"inactive\",\n  },\n];\n\n// Define columns\nconst columns: ExtendedColumnDef<User>[] = [\n  {\n    id: \"name\",\n    header: \"Name\",\n    accessorKey: \"name\",\n    enableSorting: true,\n    enableColumnFilter: true,\n  },\n  {\n    id: \"email\",\n    header: \"Email\",\n    accessorKey: \"email\",\n    enableSorting: true,\n    enableColumnFilter: true,\n  },\n  {\n    id: \"role\",\n    header: \"Role\",\n    accessorKey: \"role\",\n    enableSorting: true,\n    enableColumnFilter: true,\n  },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessorKey: \"status\",\n    enableSorting: true,\n    enableColumnFilter: true,\n  },\n];\n\nfunction App() {\n  return (\n    <div className=\"p-6\">\n      <h1 className=\"text-2xl font-bold mb-4\">User Management</h1>\n      <TableEditor\n        data={users}\n        columns={columns}\n        config={{\n          enablePagination: true,\n          enableSorting: true,\n          enableColumnFilter: true,\n          enableColumnPinning: true,\n          enableColumnOrder: true,\n          enableMultiRowSelection: true,\n          enableGlobalFilter: true,\n        }}\n      />\n    </div>\n  );\n}\n\nexport default App;\n```\n\n## ⚙️ Configuration Options\n\nThe `TableEditorConfig` interface provides extensive customization options:\n\n### Pagination\n\n```tsx\nconfig={{\n  enablePagination: true,\n  pageSize: 10,\n  pageIndex: 0,\n  onPageSizeChange: (pageSize) => console.log('Page size changed:', pageSize),\n  onPageIndexChange: (pageIndex) => console.log('Page index changed:', pageIndex),\n}}\n```\n\n### Row Selection\n\n```tsx\nconfig={{\n  // Single row selection\n  enableSingleRowSelection: true,\n  rowSelection: { '1': true },\n  onRowSelectionChange: (selection) => console.log('Selection changed:', selection),\n\n  // Multi row selection\n  enableMultiRowSelection: true,\n  renderMultiSelection: (row) => <CustomCheckbox row={row} />,\n}}\n```\n\n### Column Management\n\n```tsx\nconfig={{\n  // Column pinning\n  enableColumnPinning: true,\n  columnPinning: { left: ['name'], right: ['actions'] },\n  onColumnPinningChange: (pinning) => console.log('Pinning changed:', pinning),\n\n  // Column ordering\n  enableColumnOrder: true,\n  columnOrder: ['name', 'email', 'role'],\n  onColumnOrderChange: (order) => console.log('Order changed:', order),\n\n  // Column visibility\n  enableColumnVisibility: true,\n  initialColumnVisibility: { 'role': false },\n  onColumnVisibilityChange: (visibility) => console.log('Visibility changed:', visibility),\n\n  // Column resizing\n  enableColumnResizing: true,\n  columnResizeMode: 'onChange', // or 'onEnd'\n  columnResizeDirection: 'ltr', // or 'rtl'\n  onColumnSizingChange: (sizing) => console.log('Sizing changed:', sizing),\n}}\n```\n\n### Filtering & Sorting\n\n```tsx\nconfig={{\n  // Global search\n  enableGlobalFilter: true,\n  globalFilter: 'search term',\n  globalFilterFn: 'includesString', // or custom function\n  onGlobalFilterChange: (filter) => console.log('Global filter:', filter),\n\n  // Column filtering\n  enableColumnFilter: true,\n  columnFilters: [{ id: 'name', value: { type: 'contains', value: 'John' } }],\n  onColumnFiltersChange: (filters) => console.log('Column filters:', filters),\n\n  // Sorting\n  enableSorting: true,\n  sorting: [{ id: 'name', desc: false }],\n  onSortingChange: (sorting) => console.log('Sorting changed:', sorting),\n}}\n```\n\n## 🎨 Column Definition\n\nThe `ExtendedColumnDef` interface extends TanStack Table's `ColumnDef` with additional properties:\n\n```tsx\ninterface ExtendedColumnDef<TData, TValue = unknown>\n  extends ColumnDef<TData, TValue> {\n  headerAlign?: \"left\" | \"center\" | \"right\";\n  cellAlign?: \"left\" | \"center\" | \"right\";\n  enablePinning?: boolean;\n  enableSorting?: boolean;\n  enableResizing?: boolean;\n  enableHiding?: boolean;\n  enableColumnFilter?: boolean;\n}\n```\n\n### Example Column Definitions\n\n```tsx\nconst columns: ExtendedColumnDef<User>[] = [\n  {\n    id: \"name\",\n    header: \"Full Name\",\n    accessorKey: \"name\",\n    headerAlign: \"left\",\n    cellAlign: \"left\",\n    enableSorting: true,\n    enableColumnFilter: true,\n    enablePinning: true,\n    enableResizing: true,\n    enableHiding: true,\n  },\n  {\n    id: \"email\",\n    header: \"Email Address\",\n    accessorKey: \"email\",\n    headerAlign: \"center\",\n    cellAlign: \"center\",\n    enableSorting: true,\n    enableColumnFilter: true,\n    cell: ({ getValue }) => (\n      <a\n        href={`mailto:${getValue()}`}\n        className=\"text-blue-600 hover:underline\"\n      >\n        {getValue()}\n      </a>\n    ),\n  },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessorKey: \"status\",\n    headerAlign: \"center\",\n    cellAlign: \"center\",\n    enableSorting: true,\n    enableColumnFilter: true,\n    cell: ({ getValue }) => {\n      const status = getValue() as string;\n      return (\n        <span\n          className={`px-2 py-1 rounded-full text-xs ${\n            status === \"active\"\n              ? \"bg-green-100 text-green-800\"\n              : \"bg-red-100 text-red-800\"\n          }`}\n        >\n          {status}\n        </span>\n      );\n    },\n  },\n];\n```\n\n## 🔍 Filter Types\n\nThe table supports various filter types:\n\n- `contains` - Contains the search term\n- `equals` - Exact match\n- `startsWith` - Starts with the search term\n- `endsWith` - Ends with the search term\n- `notEquals` - Does not equal\n- `notContains` - Does not contain\n- `isEmpty` - Is empty or null\n- `isNotEmpty` - Is not empty\n\n## 🎨 Styling\n\nThe component uses Tailwind CSS for styling. You need Tailwind CSS configured in your project for the component to display correctly.\n\n### Customization Options\n\nYou can customize the appearance by:\n\n1. **CSS Variables**: Override CSS custom properties for theming\n2. **Tailwind Config**: Extend your Tailwind configuration to match your design system\n3. **Custom Classes**: Apply additional classes to override default styles\n\n### CSS Variables\n\nThe component includes CSS custom properties that you can override:\n\n```css\n:root {\n  --rt-background: 0 0% 100%;\n  --rt-foreground: 222.2 84% 4.9%;\n  --rt-primary: 222.2 47.4% 11.2%;\n  --rt-primary-foreground: 210 40% 98%;\n  --rt-secondary: 210 40% 96%;\n  --rt-secondary-foreground: 222.2 84% 4.9%;\n  --rt-border: 214.3 31.8% 91.4%;\n  --rt-radius: 0.5rem;\n}\n\n.dark {\n  --rt-background: 222.2 84% 4.9%;\n  --rt-foreground: 210 40% 98%;\n  --rt-primary: 210 40% 98%;\n  --rt-primary-foreground: 222.2 47.4% 11.2%;\n  --rt-secondary: 217.2 32.6% 17.5%;\n  --rt-secondary-foreground: 210 40% 98%;\n  --rt-border: 217.2 32.6% 17.5%;\n}\n```\n\n### Tailwind Configuration\n\nIf you want to customize the component's appearance, you can extend your Tailwind config:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        background: 'hsl(var(--rt-background))',\n        foreground: 'hsl(var(--rt-foreground))',\n        primary: {\n          DEFAULT: 'hsl(var(--rt-primary))',\n          foreground: 'hsl(var(--rt-primary-foreground))',\n        },\n        // ... other colors\n      },\n    },\n  },\n}\n```\n\n## 📱 Responsive Design\n\nThe table is responsive and works well on different screen sizes:\n\n- **Desktop**: Full feature set with all interactions\n- **Tablet**: Touch-friendly interactions with optimized spacing\n- **Mobile**: Horizontal scrolling with essential features\n\n## ♿ Accessibility\n\nBuilt with accessibility in mind:\n\n- **Keyboard Navigation**: Full keyboard support for all interactions\n- **Screen Readers**: Proper ARIA labels and descriptions\n- **Focus Management**: Clear focus indicators and logical tab order\n- **Color Contrast**: Meets WCAG guidelines for color contrast\n\n## 🧪 TypeScript Support\n\nFull TypeScript support with comprehensive type definitions:\n\n```tsx\nimport type {\n  TableEditorConfig,\n  ExtendedColumnDef,\n} from \"@allejkomal/react-table-editor\";\n```\n\n## 📚 Documentation\n\n- **[API Documentation](docs/API.md)** - Complete API reference with all interfaces and types\n- **[Examples](#-quick-start)** - Usage examples and code snippets\n- **[Configuration Options](#️-configuration-options)** - Detailed configuration guide\n- **[Basic Usage Example](examples/basic-usage.tsx)** - Complete working example\n\n## 🔧 Development\n\n### Prerequisites\n\n- Node.js 18+\n- npm/yarn/pnpm\n\n### Setup\n\n```bash\ngit clone https://github.com/allejkomal/react-table-editor.git\ncd react-table-editor\nnpm install\n```\n\n### Development Commands\n\n```bash\n# Start development server\nnpm run dev\n\n# Build the package\nnpm run build\n\n# Start local development with HMR\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## 📞 Support\n\nIf you have any questions or need help, please:\n\n1. Check the [Issues](https://github.com/allejkomal/react-table-editor/issues) page\n2. Create a new issue if your question isn't answered\n3. Contact the maintainer\n\n## 🙏 Acknowledgments\n\n- [TanStack Table](https://tanstack.com/table) for the excellent table foundation\n- [Radix UI](https://www.radix-ui.com/) for accessible UI primitives\n- [DnD Kit](https://dndkit.com/) for drag and drop functionality\n- [Lucide React](https://lucide.dev/) for beautiful icons\n\n---\n\nMade with ❤️ by [Allej Komal](https://github.com/allejkomal)\n","readmeFilename":"README.md"}