{"_id":"@aravinthan_j/smart-table-component","name":"@aravinthan_j/smart-table-component","dist-tags":{"beta":"0.1.0-beta.0","latest":"0.1.0-beta.0"},"versions":{"0.1.0-beta.0":{"name":"@aravinthan_j/smart-table-component","version":"0.1.0-beta.0","type":"module","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","lint":"biome lint ./src","format":"biome format --write ./src","check":"biome check ./src"},"keywords":["react","table","data table","tanstack","radix-ui","tailwindcss","component"],"author":{"name":"Aravinthan"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Aravinthan-J/react_table.git"},"peerDependencies":{"react":"^19","react-dom":"^19","@tanstack/react-table":"^8.17.3"},"dependencies":{"@dnd-kit/core":"^6.2.0","@dnd-kit/modifiers":"^7.0.0","@dnd-kit/sortable":"^8.0.0","@dnd-kit/utilities":"^3.2.2","@radix-ui/react-checkbox":"^1.0.4","@radix-ui/react-dialog":"^1.0.5","@radix-ui/react-icons":"^1.3.2","@radix-ui/react-popover":"^1.0.7","@radix-ui/react-radio-group":"^1.1.3","@radix-ui/react-select":"^2.0.0","@radix-ui/react-switch":"^1.0.3","@tailwindcss/vite":"^4.1.12","@tanstack/react-virtual":"^3.2.0","date-fns":"4.1.0","stylelint":"^16.23.1","stylelint-config-standard":"^39.0.0","tailwind-variants":"0.2.1","tailwindcss":"4.0.16"},"devDependencies":{"@biomejs/biome":"^2.2.0","@types/bun":"latest","@types/react":"^19","@types/react-dom":"^19","@vitejs/plugin-react":"^5.0.1","autoprefixer":"^10.4.21","postcss":"^8.5.6","vite":"^7.1.3"},"_id":"@aravinthan_j/smart-table-component@0.1.0-beta.0","gitHead":"6e3b6f6e8f70ffa88e5366700eff04da82410358","description":"A production-ready, highly customizable React table component built with [TanStack Table](https://tanstack.com/table), [Radix UI](https://www.radix-ui.com/), DnD Kit, and TypeScript. Feature-rich, accessible, performant, and designed for real business nee","bugs":{"url":"https://github.com/Aravinthan-J/react_table/issues"},"homepage":"https://github.com/Aravinthan-J/react_table#readme","_nodeVersion":"24.2.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-cqzndhryqquBvixzeUr8JUPWOcKwYB7Q09mgWacUBipbE6410fy27EqSFrKR7XD3/U0EXZ/SQWaxtevqjk+MFg==","shasum":"95585b2869b2f00abbf19ee9fe7501abe4cab11f","tarball":"https://registry.npmjs.org/@aravinthan_j/smart-table-component/-/smart-table-component-0.1.0-beta.0.tgz","fileCount":39,"unpackedSize":2428881,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDDi3rZaTQaYLlqxuZ9qJVjMm8Akm2RHSwbdFj+kXM8pgIgIDi6tis0vFAQB2uFixHZwkYZNJmD0Hv2tYw4uMhengQ="}]},"_npmUser":{"name":"aravinthan_j","email":"aravinthanjai@gmail.com"},"directories":{},"maintainers":[{"name":"aravinthan_j","email":"aravinthanjai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/smart-table-component_0.1.0-beta.0_1755635318402_0.4373119605384521"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-19T20:28:38.322Z","0.1.0-beta.0":"2025-08-19T20:28:38.668Z","modified":"2025-08-19T20:28:38.901Z"},"maintainers":[{"name":"aravinthan_j","email":"aravinthanjai@gmail.com"}],"description":"A production-ready, highly customizable React table component built with [TanStack Table](https://tanstack.com/table), [Radix UI](https://www.radix-ui.com/), DnD Kit, and TypeScript. Feature-rich, accessible, performant, and designed for real business nee","homepage":"https://github.com/Aravinthan-J/react_table#readme","keywords":["react","table","data table","tanstack","radix-ui","tailwindcss","component"],"repository":{"type":"git","url":"git+https://github.com/Aravinthan-J/react_table.git"},"author":{"name":"Aravinthan"},"bugs":{"url":"https://github.com/Aravinthan-J/react_table/issues"},"license":"MIT","readme":"# react-table-component\n\nA production-ready, highly customizable React table component built with [TanStack Table](https://tanstack.com/table), [Radix UI](https://www.radix-ui.com/), DnD Kit, and TypeScript. Feature-rich, accessible, performant, and designed for real business needs.\n\n---\n\n## 🚀 Features\n\n- **High Performance:** Virtualized rendering for massive datasets (10k+ rows)\n- **Editable Cells:** Radix UI-based editors (text, number, select, date, boolean, rating, textarea)\n- **Drag & Drop:** Column and row reordering with DnD Kit\n- **Nested Rows:** Expand/collapse hierarchical data\n- **Theming:** Easy theming with Tailwind CSS and Radix states\n- **Accessibility:** Full keyboard navigation and screen reader support\n- **TypeScript:** Complete type safety with rich interfaces\n- **Backward Compatible:** Drop-in replacement for existing column/data structures\n\n---\n\n## 📦 Installation\n\n```\nnpm install react-table-component\n# or\nyarn add react-table-component\n# or\nbun add react-table-component\n```\n\n> **Peer dependencies:**\n>\n> - `react` ^19\n> - `react-dom` ^19\n> - `@tanstack/react-table` ^8\n\n---\n\n## ⚡ Quick Start\n\n```\nimport React from \"react\";\nimport { TableComponent } from \"react-table-component\";\nimport type { ColumnProps } from \"react-table-component\";\n\nconst columns: ColumnProps[] = [\n  {\n    id: \"name\",\n    header: \"Name\",\n    type: \"text\",\n    width: 200,\n  },\n  {\n    id: \"email\",\n    header: \"Email\",\n    type: \"email\",\n    width: 250,\n  },\n  {\n    id: \"age\",\n    header: \"Age\",\n    type: \"number\",\n    width: 100,\n  },\n];\n\nconst data = [\n  { id: \"1\", name: \"John Doe\", email: \"john@example.com\", age: 30 },\n  { id: \"2\", name: \"Jane Smith\", email: \"jane@example.com\", age: 25 },\n];\n\nfunction MyTable() {\n  return (\n     {\n        console.log(\"Event:\", type, value);\n      }}\n      onEndReached={() => {}}\n    />\n  );\n}\n```\n\n---\n\n## 🔢 Supported Cell Types\n\nBuilt-in Radix UI-based cell editors:\n\n- **text**: Basic input with validation\n- **number**: Arrow stepper\n- **email**: Email input and mailto links\n- **textarea**: Multi-line editing\n- **select**: Dropdown menu with search\n- **date**: Calendar picker\n- **boolean**: Toggle switch\n- **rating**: Star rating\n- **readonly**: Display only\n\n---\n\n## 🛠️ Column Definition\n\n```\ninterface ColumnProps {\n  id: string; // Unique key\n  header: string | JSX.Element; // Header cell\n  type?: string; // text | number | select | etc.\n  width?: number;\n  minWidth?: number;\n  maxWidth?: number;\n  enableSorting?: boolean;\n  enableResizing?: boolean;\n  enableHiding?: boolean;\n  enablePinning?: boolean;\n  enableOrdering?: boolean;\n  render?: (props) => JSX.Element; // Custom cell renderer\n  headerRender?: () => JSX.Element; // Custom header\n  footerRender?: () => JSX.Element; // Custom footer\n  fixed?: \"left\" | \"right\";\n  meta?: Record;\n}\n```\n\n---\n\n## 🏗️ Advanced Usage\n\n### **Virtualization**\n\nEfficient rendering for huge datasets:\n\n```\n<TableComponent dataSource={largeData} columns={columns} isVirtual={true} rowHeight={50} />\n\n```\n\n### **Nested Rows/Tree Table**\n\n```\nconst nestedData = [\n  {\n    id: \"1\",\n    name: \"Parent Row\",\n    subRows: [\n      { id: \"1-1\", name: \"Child Row 1\" },\n      { id: \"1-2\", name: \"Child Row 2\" },\n    ],\n  },\n];\n\n\n```\n\n### **Custom Cell Components**\n\n```\nimport { MyCustomCell } from \"./MyCustomCell\";\n\n\n```\n\n### **Theming**\n\nUse your own or built-in Tailwind themes, Radix states, or external theme libraries.\n\n---\n\n## 📑 API Reference\n\n| Prop               | Type            | Description                    |\n| ------------------ | --------------- | ------------------------------ |\n| `dataSource`       | `Array`         | Table data                     |\n| `columns`          | `ColumnProps[]` | Column definitions             |\n| `rowKey`           | `string`        | Unique ID key for rows         |\n| `showSerialNumber` | `boolean`       | Show row numbers               |\n| `showRowSelection` | `boolean`       | Show checkboxes for selection  |\n| `isVirtual`        | `boolean`       | Enable virtualized rendering   |\n| `rowHeight`        | `number`        | Row height (px)                |\n| `expandable`       | `object`        | Tree/row expansion config      |\n| `options`          | `object`        | Feature toggles (sorting, etc) |\n| `onEventUpdate`    | `function`      | Event callback                 |\n| `onEndReached`     | `function`      | Infinite scroll callback       |\n\n## Exposed Table Ref Methods\n\n```\nconst tableRef = useRef(null);\n// Usage:\ntableRef.current?.addRow(newRow);\ntableRef.current?.removeRow(\"row-id\");\ntableRef.current?.updateRow(\"row-id\", { name: \"Changed\" });\ntableRef.current?.expandRow(\"row-id\");\ntableRef.current?.selectRow(\"row-id\", true);\ntableRef.current?.getSelectedRows();\n```\n\n---\n\n## 📣 Events\n\n```\nconst handleEventUpdate = ({ type, value }) => {\n  switch (type) {\n    case \"cell-edit\": /* ... */ break;\n    case \"row-select\": /* ... */ break;\n    case \"column-resize\": /* ... */ break;\n    // ...\n  }\n};\n```\n\n---\n\n## 💡 Performance Tips\n\n1. Use virtualization for datasets >1,000 rows\n2. Memoize event handlers\n3. Batch row updates\n4. Optimize custom renderers with `React.memo`\n5. Use stable `rowKey`\n\n---\n\n## 🧑‍💻 Development\n\n```\n# Install deps\nbun install\n# Start dev server\nbun run dev\n# Build the library\nbun run build\n# Run tests\nbun test\n# Lint/fix\nbun run lint\nbun run format\n# Typecheck\nbun run typecheck\n```\n\n---\n\n## 🤝 Contributing\n\n1. Fork the repo\n2. Create a feature branch (`git checkout -b feat/new-feature`)\n3. Commit changes (`git commit -m \"Add new feature\"`)\n4. Push to GitHub\n5. Open a Pull Request\n\n---\n\n## 📝 License\n\nMIT License – see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 📚 Links\n\n- [GitHub](https://github.com/Aravinthan-J/react_table)\n- [TanStack Table Docs](https://tanstack.com/table/v8)\n- [Radix UI Docs](https://www.radix-ui.com/)\n- [Tailwind CSS Docs](https://tailwindcss.com/)\n\n---\n\n&copy; 2025 Aravinthan\n","readmeFilename":"README.md","_rev":"1-a85640d84527333f1d64a144c3408e86"}