{"_id":"@aniruddha1806/data-table","_rev":"3-283c215d3d54473d621b34a809531a21","name":"@aniruddha1806/data-table","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@aniruddha1806/data-table","version":"1.0.0","keywords":["react","data-table","table","sorting","pagination","typescript"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/data-table@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"2e5f4c765ce9442be7d0ed9b38518a4c7e558d9c","tarball":"https://registry.npmjs.org/@aniruddha1806/data-table/-/data-table-1.0.0.tgz","fileCount":7,"integrity":"sha512-uOUElP1ZHqenAOrIH5X4FYqyInhSZ6/4VVybR8entJ1xCW4aCYkVuiBa5SgUlaVHDN0gdruZgd+hNYT2WMu3aA==","signatures":[{"sig":"MEYCIQC3xWNErQaOQhckD5553JOB7lJYNe82iQHC3OXKOMVADgIhANfEW9VGYm/ANfvtOa7GqiOyiiQamm+6ah1ZjSVQdnLl","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30450},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable React DataTable component with sorting, pagination, and scrolling functionality","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.4.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^28.1.1","rollup":"^2.75.6","ts-jest":"^28.0.4","typescript":"^4.7.3","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-typescript":"^8.3.2","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/data-table_1.0.0_1744012202399_0.8988235536684537","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/data-table","version":"1.0.1","keywords":["react","data-table","table","sorting","pagination","typescript"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/data-table@1.0.1","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"5b303689dc2768f2bb0b0706843f461fafb2299d","tarball":"https://registry.npmjs.org/@aniruddha1806/data-table/-/data-table-1.0.1.tgz","fileCount":7,"integrity":"sha512-E72xWyZP1wPtxXLtYLfZ0xpvsyRpbBDkYGuuJ3cq1J/E/X5NZEXLhfnS0dUthkN8k46h5dFqNXrKc3Kg4kyLJg==","signatures":[{"sig":"MEYCIQDwN1HVHrhEfxssx9oX71nAtVVhuB12drN7aS8p56MmxAIhAL3nxOeYsp9feE753GSEifncZjg3xwhuxwQ/fDOBGJJi","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30302},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable React DataTable component with sorting, pagination, and scrolling functionality","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.4.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^28.1.1","rollup":"^2.75.6","ts-jest":"^28.0.4","typescript":"^4.7.3","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-typescript":"^8.3.2","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/data-table_1.0.1_1744012561159_0.18283179712306485","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aniruddha1806/data-table","version":"1.0.2","description":"A lightweight, customizable React DataTable component with sorting, pagination, and scrolling functionality","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"jest","prepublishOnly":"npm run build"},"keywords":["react","data-table","table","sorting","pagination","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.3.2","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","jest":"^28.1.1","rollup":"^2.75.6","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","ts-jest":"^28.0.4","typescript":"^4.7.3"},"dependencies":{"tslib":"^2.4.0"},"_id":"@aniruddha1806/data-table@1.0.2","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-zjvq1Ksro+f3hv/kFcUudXHJ+Hfax+sZxluI7fHCI1jsRrlGYtEjKSfRFRRru5akzlaRxh8lDsV+6JGcyJczRw==","shasum":"29bd84dc91cd06eb2a7df0170124219a5b2598c2","tarball":"https://registry.npmjs.org/@aniruddha1806/data-table/-/data-table-1.0.2.tgz","fileCount":8,"unpackedSize":40626,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBuV9RHDXS7Lx72I8WJyUV/QwkGaz+j/ZwtntrMpfl1mAiEA76tGOKbHdZ99kKwurIsfOyMQ2QXPEmjMo4+EZODYO8Y="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/data-table_1.0.2_1749135055170_0.45594216633579787"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-07T07:50:02.294Z","modified":"2025-06-05T14:50:55.574Z","1.0.0":"2025-04-07T07:50:02.599Z","1.0.1":"2025-04-07T07:56:01.365Z","1.0.2":"2025-06-05T14:50:55.368Z"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","keywords":["react","data-table","table","sorting","pagination","typescript"],"description":"A lightweight, customizable React DataTable component with sorting, pagination, and scrolling functionality","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Data Table Component\r\n\r\nA powerful, customizable data table component for React applications with TypeScript support. Features sorting, pagination, scrolling, and extensive styling options with zero dependencies.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/data-table\r\n\r\n```\r\n\r\n## Features\r\n\r\n- 📊 Flexible data display with customizable columns\r\n- 🔄 Multi-column sorting with visual indicators\r\n- 📄 Built-in pagination with page navigation\r\n- 📱 Responsive design with horizontal scrolling\r\n- 🎨 Extensive styling customization (styles + classNames)\r\n- 📏 Fixed headers with vertical scrolling\r\n- 🔍 Custom cell rendering with render functions\r\n- 📝 Empty state handling\r\n- 🎯 TypeScript support with full type definitions\r\n- ♿ Accessibility features\r\n- 🪶 Zero external dependencies\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport { DataTable } from '@aniruddha1806/data-table';\r\n\r\nfunction App() {\r\n  const data = [\r\n    { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },\r\n    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 },\r\n    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 35 }\r\n  ];\r\n\r\n  const columns = [\r\n    { key: 'id', header: 'ID', sorting: true },\r\n    { key: 'name', header: 'Name', sorting: true },\r\n    { key: 'email', header: 'Email', sorting: true },\r\n    { key: 'age', header: 'Age', sorting: true }\r\n  ];\r\n\r\n  return (\r\n    <DataTable\r\n      data={data}\r\n      columns={columns}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n### DataTableProps\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `data` | `T[]` | `[]` | Array of data objects to display |\r\n| `columns` | `Column<T>[]` | `[]` | Column configuration array |\r\n| `className` | `string` | `\"\"` | CSS class for the wrapper container |\r\n| `tableClassName` | `string` | `\"\"` | CSS class for the table element |\r\n| `headerClassName` | `string` | `\"\"` | CSS class for header rows |\r\n| `rowClassName` | `string` | `\"\"` | CSS class for data rows |\r\n| `cellClassName` | `string` | `\"\"` | CSS class for table cells |\r\n| `emptyMessage` | `ReactNode` | `\"No data available\"` | Message shown when no data |\r\n| `pagination` | `PaginationProps` | `undefined` | Pagination configuration |\r\n| `scrollable` | `boolean` | `false` | Enable horizontal scrolling |\r\n| `maxHeight` | `string` | `undefined` | Maximum height with vertical scroll |\r\n\r\n### Column Configuration\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `key` | `string` | `required` | Data property key |\r\n| `header` | `ReactNode` | `required` | Column header content |\r\n| `render` | `(row: T) => ReactNode` | `undefined` | Custom cell render function |\r\n| `sorting` | `boolean` | `false` | Enable sorting for this column |\r\n| `width` | `string` | `undefined` | Fixed column width |\r\n\r\n### Pagination Configuration\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `currentPage` | `number` | `required` | Current active page |\r\n| `pageSize` | `number` | `required` | Number of items per page |\r\n| `totalItems` | `number` | `required` | Total number of items |\r\n| `onPageChange` | `(page: number) => void` | `required` | Page change callback |\r\n| `showPageNumbers` | `boolean` | `true` | Show page number buttons |\r\n| `maxPageButtons` | `number` | `5` | Maximum page buttons to show |\r\n\r\n## Examples\r\n\r\n### Basic Table\r\n\r\nSimple data table with sorting:\r\n\r\n```jsx\r\nimport { DataTable } from '@aniruddha1806/data-table';\r\n\r\nfunction BasicTable() {\r\n  const users = [\r\n    { id: 1, name: 'Alice Johnson', role: 'Admin', status: 'Active' },\r\n    { id: 2, name: 'Bob Smith', role: 'User', status: 'Inactive' },\r\n    { id: 3, name: 'Carol Davis', role: 'Editor', status: 'Active' }\r\n  ];\r\n\r\n  const columns = [\r\n    { key: 'id', header: 'ID', sorting: true, width: '80px' },\r\n    { key: 'name', header: 'Name', sorting: true },\r\n    { key: 'role', header: 'Role', sorting: true },\r\n    { key: 'status', header: 'Status', sorting: true }\r\n  ];\r\n\r\n  return (\r\n    <DataTable\r\n      data={users}\r\n      columns={columns}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### With Pagination\r\n\r\nAdd pagination for large datasets:\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport { DataTable } from '@aniruddha1806/data-table';\r\n\r\nfunction PaginatedTable() {\r\n  const [currentPage, setCurrentPage] = useState(1);\r\n  const pageSize = 10;\r\n\r\n  // Large dataset\r\n  const allData = Array.from({ length: 100 }, (_, i) => ({\r\n    id: i + 1,\r\n    name: `User ${i + 1}`,\r\n    email: `user${i + 1}@example.com`,\r\n    department: ['Engineering', 'Marketing', 'Sales', 'HR'][i % 4]\r\n  }));\r\n\r\n  const columns = [\r\n    { key: 'id', header: 'ID', sorting: true },\r\n    { key: 'name', header: 'Name', sorting: true },\r\n    { key: 'email', header: 'Email', sorting: true },\r\n    { key: 'department', header: 'Department', sorting: true }\r\n  ];\r\n\r\n  const paginationConfig = {\r\n    currentPage,\r\n    pageSize,\r\n    totalItems: allData.length,\r\n    onPageChange: setCurrentPage,\r\n    showPageNumbers: true,\r\n    maxPageButtons: 5\r\n  };\r\n\r\n  return (\r\n    <DataTable\r\n      data={allData}\r\n      columns={columns}\r\n      pagination={paginationConfig}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Custom Cell Rendering\r\n\r\nUse custom render functions for complex cell content:\r\n\r\n```jsx\r\nimport { DataTable } from '@aniruddha1806/data-table';\r\n\r\nfunction CustomRenderTable() {\r\n  const products = [\r\n    { \r\n      id: 1, \r\n      name: 'Laptop', \r\n      price: 999.99, \r\n      stock: 15, \r\n      category: 'Electronics',\r\n      image: '/laptop.jpg'\r\n    },\r\n    { \r\n      id: 2, \r\n      name: 'Phone', \r\n      price: 699.99, \r\n      stock: 0, \r\n      category: 'Electronics',\r\n      image: '/phone.jpg'\r\n    }\r\n  ];\r\n\r\n  const columns = [\r\n    {\r\n      key: 'image',\r\n      header: 'Image',\r\n      render: (row) => (\r\n        <img \r\n          src={row.image || \"/placeholder.svg\"} \r\n          alt={row.name}\r\n          style={{ width: '40px', height: '40px', borderRadius: '4px' }}\r\n        />\r\n      )\r\n    },\r\n    { key: 'name', header: 'Product', sorting: true },\r\n    {\r\n      key: 'price',\r\n      header: 'Price',\r\n      sorting: true,\r\n      render: (row) => (\r\n        <span style={{ fontWeight: 'bold', color: '#059669' }}>\r\n          ${row.price.toFixed(2)}\r\n        </span>\r\n      )\r\n    },\r\n    {\r\n      key: 'stock',\r\n      header: 'Stock',\r\n      sorting: true,\r\n      render: (row) => (\r\n        <span style={{\r\n          padding: '4px 8px',\r\n          borderRadius: '12px',\r\n          fontSize: '12px',\r\n          fontWeight: 'bold',\r\n          backgroundColor: row.stock > 0 ? '#dcfce7' : '#fee2e2',\r\n          color: row.stock > 0 ? '#166534' : '#991b1b'\r\n        }}>\r\n          {row.stock > 0 ? `${row.stock} in stock` : 'Out of stock'}\r\n        </span>\r\n      )\r\n    },\r\n    {\r\n      key: 'actions',\r\n      header: 'Actions',\r\n      render: (row) => (\r\n        <div style={{ display: 'flex', gap: '8px' }}>\r\n          <button style={{ \r\n            padding: '4px 8px', \r\n            fontSize: '12px',\r\n            backgroundColor: '#3b82f6',\r\n            color: 'white',\r\n            border: 'none',\r\n            borderRadius: '4px',\r\n            cursor: 'pointer'\r\n          }}>\r\n            Edit\r\n          </button>\r\n          <button style={{ \r\n            padding: '4px 8px', \r\n            fontSize: '12px',\r\n            backgroundColor: '#ef4444',\r\n            color: 'white',\r\n            border: 'none',\r\n            borderRadius: '4px',\r\n            cursor: 'pointer'\r\n          }}>\r\n            Delete\r\n          </button>\r\n        </div>\r\n      )\r\n    }\r\n  ];\r\n\r\n  return (\r\n    <DataTable\r\n      data={products}\r\n      columns={columns}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Scrollable Table\r\n\r\nEnable scrolling for large tables:\r\n\r\n```jsx\r\nimport { DataTable } from '@aniruddha1806/data-table';\r\n\r\nfunction ScrollableTable() {\r\n  const wideData = Array.from({ length: 50 }, (_, i) => ({\r\n    id: i + 1,\r\n    col1: `Data ${i + 1}-1`,\r\n    col2: `Data ${i + 1}-2`,\r\n    col3: `Data ${i + 1}-3`,\r\n    col4: `Data ${i + 1}-4`,\r\n    col5: `Data ${i + 1}-5`,\r\n    col6: `Data ${i + 1}-6`,\r\n    col7: `Data ${i + 1}-7`,\r\n    col8: `Data ${i + 1}-8`\r\n  }));\r\n\r\n  const columns = [\r\n    { key: 'id', header: 'ID', sorting: true, width: '80px' },\r\n    { key: 'col1', header: 'Column 1', sorting: true, width: '150px' },\r\n    { key: 'col2', header: 'Column 2', sorting: true, width: '150px' },\r\n    { key: 'col3', header: 'Column 3', sorting: true, width: '150px' },\r\n    { key: 'col4', header: 'Column 4', sorting: true, width: '150px' },\r\n    { key: 'col5', header: 'Column 5', sorting: true, width: '150px' },\r\n    { key: 'col6', header: 'Column 6', sorting: true, width: '150px' },\r\n    { key: 'col7', header: 'Column 7', sorting: true, width: '150px' },\r\n    { key: 'col8', header: 'Column 8', sorting: true, width: '150px' }\r\n  ];\r\n\r\n  return (\r\n    <DataTable\r\n      data={wideData}\r\n      columns={columns}\r\n      scrollable={true}\r\n      maxHeight=\"400px\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport { DataTable, Column, DataTableProps } from '@aniruddha1806/data-table';\r\n\r\ninterface User {\r\n  id: number;\r\n  name: string;\r\n  email: string;\r\n  role: 'admin' | 'user' | 'editor';\r\n  createdAt: Date;\r\n}\r\n\r\nconst UserTable: React.FC = () => {\r\n  const users: User[] = [\r\n    {\r\n      id: 1,\r\n      name: 'John Doe',\r\n      email: 'john@example.com',\r\n      role: 'admin',\r\n      createdAt: new Date('2023-01-15')\r\n    }\r\n  ];\r\n\r\n  const columns: Column<User>[] = [\r\n    { key: 'id', header: 'ID', sorting: true },\r\n    { key: 'name', header: 'Name', sorting: true },\r\n    { key: 'email', header: 'Email', sorting: true },\r\n    {\r\n      key: 'role',\r\n      header: 'Role',\r\n      sorting: true,\r\n      render: (user: User) => (\r\n        <span style={{ textTransform: 'capitalize' }}>\r\n          {user.role}\r\n        </span>\r\n      )\r\n    },\r\n    {\r\n      key: 'createdAt',\r\n      header: 'Created',\r\n      sorting: true,\r\n      render: (user: User) => user.createdAt.toLocaleDateString()\r\n    }\r\n  ];\r\n\r\n  const tableProps: DataTableProps<User> = {\r\n    data: users,\r\n    columns,\r\n    className: 'user-table'\r\n  };\r\n\r\n  return <DataTable {...tableProps} />;\r\n};\r\n```\r\n\r\n\r\n","readmeFilename":"README.md"}