{"_id":"@aravindh-arumugam/zentable","name":"@aravindh-arumugam/zentable","dist-tags":{"beta":"0.1.0-beta.1","latest":"0.1.0-beta.1"},"versions":{"0.1.0-beta.1":{"name":"@aravindh-arumugam/zentable","version":"0.1.0-beta.1","private":false,"description":"Minimalist, premium, and high-performance React data table library built with TanStack Table, Zod, and Framer Motion.","type":"module","sideEffects":["./dist/style.css"],"publishConfig":{"access":"public"},"main":"./dist/zentable.umd.cjs","module":"./dist/zentable.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/zentable.js","require":"./dist/zentable.umd.cjs"},"./style.css":"./dist/style.css"},"engines":{"node":">=18.0.0"},"scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview"},"keywords":["react","table","datatable","tanstack-table","framer-motion","zod","premium-ui","zentable"],"author":{"name":"Aravindh Arumugam"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aravindh-mb/tanstack-products.git"},"bugs":{"url":"https://github.com/aravindh-mb/tanstack-products/issues"},"homepage":"https://github.com/aravindh-mb/tanstack-products#readme","peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"@tanstack/react-table":"^8.20.5","framer-motion":"^12.29.2","zod":"^3.23.8"},"devDependencies":{"@types/node":"^24.10.13","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@typescript-eslint/eslint-plugin":"^7.13.1","@typescript-eslint/parser":"^7.13.1","@vitejs/plugin-react":"^4.3.1","autoprefixer":"^10.4.20","eslint":"^8.57.0","eslint-plugin-react-hooks":"^4.6.2","eslint-plugin-react-refresh":"^0.4.7","postcss":"^8.4.47","react":"^18.3.1","react-dom":"^18.3.1","tailwindcss":"^3.4.13","typescript":"^5.5.3","vite":"^5.4.2","vite-plugin-dts":"^4.5.4"},"gitHead":"6e11408d5e28f43dd970b913797f4db6edc3480b","_id":"@aravindh-arumugam/zentable@0.1.0-beta.1","_nodeVersion":"24.11.1","_npmVersion":"11.10.0","dist":{"integrity":"sha512-s7Sd+nSE7cE6Bd9r/l49n3JwrZMzz7Q+I3vbwcYC6tXTHG95IoqvRXhQM+Kx77NbF/++VH/+RxVjrREpJkXrWA==","shasum":"8dadab8d69a159e50e6d59ce587a36dbc2315188","tarball":"https://registry.npmjs.org/@aravindh-arumugam/zentable/-/zentable-0.1.0-beta.1.tgz","fileCount":19,"unpackedSize":97925,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBHge3wHIeP+m8PLgdTMzur4C3HBhQIsRtFMR6LMn1lfAiEA8ZB/EPv2xiUVacgxA6CeQhac4b8ZkqN0u7v6srVvs1k="}]},"_npmUser":{"name":"aravindh-arumugam","email":"aaravindh23cse@gmail.com"},"directories":{},"maintainers":[{"name":"aravindh-arumugam","email":"aaravindh23cse@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/zentable_0.1.0-beta.1_1771785290863_0.18776582594227587"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-22T18:34:50.744Z","0.1.0-beta.1":"2026-02-22T18:34:51.016Z","modified":"2026-02-22T18:34:51.254Z"},"maintainers":[{"name":"aravindh-arumugam","email":"aaravindh23cse@gmail.com"}],"description":"Minimalist, premium, and high-performance React data table library built with TanStack Table, Zod, and Framer Motion.","homepage":"https://github.com/aravindh-mb/tanstack-products#readme","keywords":["react","table","datatable","tanstack-table","framer-motion","zod","premium-ui","zentable"],"repository":{"type":"git","url":"git+https://github.com/aravindh-mb/tanstack-products.git"},"author":{"name":"Aravindh Arumugam"},"bugs":{"url":"https://github.com/aravindh-mb/tanstack-products/issues"},"license":"MIT","readme":"# 🎋 ZenTable\r\n\r\n> **Minimalist. Premium. High-Performance.**  \r\n> A stylised, headless-first React data table library built with **TanStack Table**, **Zod**, and **Framer Motion**.\r\n\r\n---\r\n\r\n## ✨ Overview\r\n\r\nZenTable is a premium data table suite designed for developers who need both performance and aesthetics out of the box. It provides a \"Zen\" developer experience by handling the complex styling and interaction logic of data grids—like pinning, selection, and shadows—while remaining 100% compatible with the TanStack Table ecosystem.\r\n\r\n### 🚀 Key Features\r\n\r\n- 📌 **Native Pinning Support**: Flawless column and row pinning with consistent offset calculations.\r\n- 🌓 **Rich Aesthetics**: Built-in glassmorphism, sleek shadows, and smooth motion transitions.\r\n- 📐 **Declarative API**: Use our `ZenColumn` helper to define tables like an architect.\r\n- ✅ **Selection & Summary**: Built-in row selection with actionable summary callbacks.\r\n- 🧪 **Type-Safe & Validated**: Deeply integrated with TypeScript and Zod for runtime data integrity.\r\n- ⚡ **Optimised Shadows**: Advanced CSS gradients for clear visual separation of frozen panes.\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install zentable\r\n# or\r\npnpm add zentable\r\n```\r\n\r\n**Peer Dependencies:** Ensure you have `react`, `react-dom`, `@tanstack/react-table`, `zod`, and `framer-motion` installed.\r\n\r\n---\r\n\r\n## 🎬 Quick Start\r\n\r\n```tsx\r\nimport { ZenTable, createTableColumns, ZenColumn } from 'zentable'\r\nimport 'zentable/style.css'\r\n\r\nconst MyTable = () => {\r\n  const data = [\r\n    { id: '1', name: 'Zen 1', status: 'Active' },\r\n    { id: '2', name: 'Zen 2', status: 'Pending' },\r\n  ]\r\n\r\n  const columnConfigs: ZenColumn<any>[] = [\r\n    { key: 'select', type: 'select-row', width: 60 },\r\n    { key: 'name', dataIndex: 'name', title: 'Name', sticky: 'left', width: 200 },\r\n    { key: 'status', dataIndex: 'status', title: 'Status', width: 140 },\r\n  ]\r\n\r\n  const columns = createTableColumns(columnConfigs)\r\n\r\n  return (\r\n    <ZenTable \r\n      data={data} \r\n      columns={columns} \r\n      customHeight=\"500px\"\r\n      onRowSelectionChange={(selected) => console.log(selected)}\r\n    />\r\n  )\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🛠️ API Reference\r\n\r\n### `<ZenTable />`\r\n\r\nThe primary wrapper that provides the premium styling, scroll management, and layout container.\r\n\r\n| Prop | Type | Default | Description |\r\n|---|---|---|---|\r\n| `data` | `TData[]` | **Required** | The array of objects to display. |\r\n| `columns` | `ColumnDef[]` | **Required** | TanStack column definitions. |\r\n| `theme` | `ZenTableTheme` | `defaultTheme` | Customise colors, radius, and effects. |\r\n| `customHeight` | `string` | `'400px'` | Height of the scroll container. |\r\n| `scrollable` | `boolean` | `true` | Enables/Disables internal scrolling mechanism. |\r\n| `onRowSelectionChange` | `(rows: TData[]) => void` | — | Callback fired whenever selection changes. |\r\n| `showFooter` | `boolean` | `false` | Renders a polished summary footer row. |\r\n\r\n---\r\n\r\n## 🎨 Theme Customisation\r\n\r\nCustomise the \"Zen\" vibe with the `theme` prop:\r\n\r\n```ts\r\ninterface ZenTableTheme {\r\n  primaryColor?: string;     // Base color for interactive elements\r\n  borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none';\r\n  glassmorphism?: boolean;   // Enable backdrop blur and semi-transparent panels\r\n  rowHoverEffect?: 'highlight' | 'glow' | 'none';\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🏗️ Technical Stack\r\n\r\nZenTable stands on the shoulders of:\r\n- **Engine**: [@tanstack/react-table](https://tanstack.com/table)\r\n- **Validation**: [Zod](https://zod.dev)\r\n- **Animation**: [Framer Motion](https://www.framer.com/motion/)\r\n\r\n---\r\n\r\n## 📄 License\r\n\r\nMIT © 2025 ZenTable (Beta v0.1.0-beta.1)\r\n","readmeFilename":"README.md","_rev":"1-24a830141cf2bae9c2aff6d04ddec57f"}