{"id":32354139,"url":"https://github.com/simonepriuli/shadcn-aizoon","last_synced_at":"2025-10-24T10:44:13.330Z","repository":{"id":314445159,"uuid":"1055452983","full_name":"simonepriuli/shadcn-aizoon","owner":"simonepriuli","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-12T12:44:32.000Z","size":105,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-12T14:57:13.336Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonepriuli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-12T09:36:12.000Z","updated_at":"2025-09-12T12:44:36.000Z","dependencies_parsed_at":"2025-09-12T14:57:27.169Z","dependency_job_id":"3fe8646e-fc1a-431d-830a-30a35658d1c1","html_url":"https://github.com/simonepriuli/shadcn-aizoon","commit_stats":null,"previous_names":["simonepriuli/shadcn-aizoon"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/simonepriuli/shadcn-aizoon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonepriuli%2Fshadcn-aizoon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonepriuli%2Fshadcn-aizoon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonepriuli%2Fshadcn-aizoon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonepriuli%2Fshadcn-aizoon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonepriuli","download_url":"https://codeload.github.com/simonepriuli/shadcn-aizoon/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonepriuli%2Fshadcn-aizoon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280783848,"owners_count":26390277,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-24T02:00:06.418Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-24T10:44:09.910Z","updated_at":"2025-10-24T10:44:13.325Z","avatar_url":"https://github.com/simonepriuli.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SuperTable - Advanced Data Table Component\n\nA powerful, type-safe data table component built with React, TypeScript, TanStack Table, and shadcn/ui. Features advanced filtering, sorting, pagination, and a flexible column builder API.\n\n## ✨ Features\n\n- 🔍 **Advanced Filtering** - Text, number, option, multi-option, and date filters\n- 📊 **Sorting** - Clickable column headers with visual indicators\n- 📄 **Pagination** - Built-in pagination with customizable page sizes\n- 🎨 **Type Safety** - Full TypeScript support with IntelliSense\n- 🏗️ **Column Builder** - Functional API for creating columns\n- 🎯 **Flexible** - Support for custom cells and filters\n- 🎨 **shadcn/ui** - Beautiful, accessible UI components\n\n## 🚀 Quick Start\n\n\n\n### Basic Usage\n\n```typescript\nimport { SuperTable, generateColumns } from './components/supertable';\nimport { Mail, DollarSign, CheckCircle } from 'lucide-react';\n\n// Define your data type\ntype Payment = {\n  id: string;\n  amount: number;\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\";\n  email: string;\n};\n\n// Create sample data\nconst data: Payment[] = [\n  { id: \"1\", amount: 100, status: \"pending\", email: \"user@example.com\" },\n  { id: \"2\", amount: 200, status: \"success\", email: \"admin@example.com\" },\n  // ... more data\n];\n\n// Define columns using the builder pattern\nconst columns = generateColumns\u003cPayment\u003e((b) =\u003e [\n  b.text(\"email\", {\n    header: \"Email\",\n    displayName: \"Email Address\",\n    icon: Mail,\n  }),\n  b.number(\"amount\", {\n    header: \"Amount\",\n    displayName: \"Amount\",\n    icon: DollarSign,\n    min: 0,\n    max: 1000,\n  }),\n  b.option(\"status\", {\n    header: \"Status\",\n    displayName: \"Status\",\n    icon: CheckCircle,\n    options: [\n      { label: \"Pending\", value: \"pending\", icon: Clock },\n      { label: \"Success\", value: \"success\", icon: CheckCircle },\n    ],\n  }),\n]);\n\n// Use the table\nfunction App() {\n  return (\n    \u003cdiv className=\"container mx-auto py-10\"\u003e\n      \u003cSuperTable\n        columns={columns}\n        data={data}\n        enablePagination={true}\n        enableSorting={true}\n        pageSize={10}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## 📚 API Reference\n\n### SuperTable Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `columns` | `{ tstColumns, filterColumns }` | Required | Generated columns from `generateColumns()` |\n| `data` | `TData[]` | Required | Array of data objects |\n| `enablePagination` | `boolean` | `false` | Enable pagination controls |\n| `enableSorting` | `boolean` | `false` | Enable column sorting |\n| `pageSize` | `number` | `10` | Number of rows per page |\n\n### Column Builder Methods\n\n#### `b.text(id, config)`\nCreates a text column with text-based filtering.\n\n```typescript\nb.text(\"email\", {\n  header: \"Email\",\n  displayName: \"Email Address\",\n  icon: Mail,\n  enableSorting: true, // Optional, defaults to true\n})\n```\n\n#### `b.number(id, config)`\nCreates a number column with range filtering.\n\n```typescript\nb.number(\"amount\", {\n  header: \"Amount\",\n  displayName: \"Amount\",\n  icon: DollarSign,\n  min: 0, // Optional minimum value\n  max: 1000, // Optional maximum value\n  enableSorting: true, // Optional, defaults to true\n})\n```\n\n#### `b.option(id, config)`\nCreates a single-select dropdown column.\n\n```typescript\nb.option(\"status\", {\n  header: \"Status\",\n  displayName: \"Status\",\n  icon: CheckCircle,\n  options: [\n    { label: \"Pending\", value: \"pending\", icon: Clock },\n    { label: \"Success\", value: \"success\", icon: CheckCircle },\n  ],\n  enableSorting: true, // Optional, defaults to true\n})\n```\n\n#### `b.multiOption(id, config)`\nCreates a multi-select checkbox column.\n\n```typescript\nb.multiOption(\"tags\", {\n  header: \"Tags\",\n  displayName: \"Tags\",\n  icon: Tag,\n  options: [\n    { label: \"Frontend\", value: \"frontend\", icon: Code },\n    { label: \"Backend\", value: \"backend\", icon: Server },\n  ],\n  enableSorting: true, // Optional, defaults to true\n})\n```\n\n#### `b.date(id, config)`\nCreates a date column with date filtering.\n\n```typescript\nb.date(\"createdAt\", {\n  header: \"Created At\",\n  displayName: \"Created Date\",\n  icon: Calendar,\n  enableSorting: true, // Optional, defaults to true\n})\n```\n\n#### `b.custom(id, config)`\nCreates a custom column with full control.\n\n```typescript\nb.custom(\"actions\", {\n  header: \"Actions\",\n  cell: ({ row }) =\u003e (\n    \u003cButton onClick={() =\u003e handleEdit(row.original)}\u003e\n      Edit\n    \u003c/Button\u003e\n  ),\n  enableSorting: false, // Usually disabled for action columns\n  // Optional: Add custom filtering\n  filterConfig: {\n    type: 'text',\n    displayName: 'Search Actions',\n    icon: Search,\n  },\n})\n```\n\n#### `b.display(id, config)`\nCreates a display-only column without filtering.\n\n```typescript\nb.display(\"id\", {\n  header: \"ID\",\n  cell: ({ row }) =\u003e (\n    \u003cspan className=\"font-mono text-sm\"\u003e\n      {row.getValue(\"id\")}\n    \u003c/span\u003e\n  ),\n  enableSorting: false, // Defaults to false\n})\n```\n\n## 🎨 Advanced Examples\n\n### Custom Filter with Complex Data\n\n```typescript\nconst columns = generateColumns\u003cUser\u003e((b) =\u003e [\n  b.text(\"name\", {\n    header: \"Name\",\n    displayName: \"Full Name\",\n    icon: User,\n  }),\n  \n  // Custom column with complex filtering\n  b.custom(\"department\", {\n    header: \"Department\",\n    displayName: \"Department\",\n    icon: Building,\n    enableSorting: true,\n    filterConfig: {\n      type: 'multiOption',\n      displayName: 'Departments',\n      icon: Building,\n      options: [\n        { label: \"Engineering\", value: \"engineering\", icon: Code },\n        { label: \"Design\", value: \"design\", icon: Palette },\n        { label: \"Marketing\", value: \"marketing\", icon: Megaphone },\n        { label: \"Sales\", value: \"sales\", icon: TrendingUp },\n      ],\n    },\n    cell: ({ row }) =\u003e (\n      \u003cBadge variant=\"outline\"\u003e\n        {row.original.department}\n      \u003c/Badge\u003e\n    ),\n  }),\n  \n  // Action column with custom cell\n  b.custom(\"actions\", {\n    header: \"Actions\",\n    cell: ({ row }) =\u003e (\n      \u003cDropdownMenu\u003e\n        \u003cDropdownMenuTrigger asChild\u003e\n          \u003cButton variant=\"ghost\" size=\"sm\"\u003e\n            ⋮\n          \u003c/Button\u003e\n        \u003c/DropdownMenuTrigger\u003e\n        \u003cDropdownMenuContent\u003e\n          \u003cDropdownMenuItem onClick={() =\u003e handleEdit(row.original)}\u003e\n            Edit\n          \u003c/DropdownMenuItem\u003e\n          \u003cDropdownMenuItem onClick={() =\u003e handleDelete(row.original)}\u003e\n            Delete\n          \u003c/DropdownMenuItem\u003e\n        \u003c/DropdownMenuContent\u003e\n      \u003c/DropdownMenu\u003e\n    ),\n    enableSorting: false,\n  }),\n]);\n```\n\n### Mixed Column Types\n\n```typescript\nconst columns = generateColumns\u003cProduct\u003e((b) =\u003e [\n  // Sortable and filterable columns\n  b.text(\"name\", {\n    header: \"Product Name\",\n    displayName: \"Product Name\",\n    icon: Package,\n  }),\n  \n  b.number(\"price\", {\n    header: \"Price\",\n    displayName: \"Price\",\n    icon: DollarSign,\n    min: 0,\n    max: 10000,\n  }),\n  \n  b.option(\"category\", {\n    header: \"Category\",\n    displayName: \"Category\",\n    icon: Tag,\n    options: categoryOptions,\n  }),\n  \n  // Display-only columns\n  b.display(\"id\", {\n    header: \"ID\",\n    cell: ({ row }) =\u003e (\n      \u003cspan className=\"font-mono text-xs text-gray-500\"\u003e\n        #{row.getValue(\"id\")}\n      \u003c/span\u003e\n    ),\n  }),\n  \n  b.display(\"image\", {\n    header: \"Image\",\n    cell: ({ row }) =\u003e (\n      \u003cimg \n        src={row.original.imageUrl} \n        alt={row.original.name}\n        className=\"w-12 h-12 rounded object-cover\"\n      /\u003e\n    ),\n  }),\n]);\n```\n\n## 🔧 Configuration Options\n\n### Filter Types\n\n| Type | Description | Use Case |\n|------|-------------|----------|\n| `text` | Text input search | Names, descriptions, emails |\n| `number` | Number range with min/max | Prices, quantities, scores |\n| `option` | Single select dropdown | Status, category, priority |\n| `multiOption` | Multi-select checkboxes | Tags, permissions, features |\n| `date` | Date picker | Created date, due date, timestamp |\n\n### Sorting Behavior\n\n- **Enabled by default** for: `text`, `number`, `option`, `multiOption`, `date`, `custom`\n- **Disabled by default** for: `display`\n- **Override** with `enableSorting: boolean` in any column config\n\n### Pagination\n\n```typescript\n\u003cSuperTable\n  columns={columns}\n  data={data}\n  enablePagination={true}\n  pageSize={25} // Show 25 rows per page\n/\u003e\n```\n\n## 🎯 Best Practices\n\n### 1. Use Appropriate Column Types\n```typescript\n// ✅ Good - Use specific column types\nb.text(\"email\", { /* ... */ })\nb.number(\"amount\", { /* ... */ })\nb.option(\"status\", { /* ... */ })\n\n// ❌ Avoid - Don't use custom for simple cases\nb.custom(\"email\", { /* ... */ })\n```\n\n### 2. Disable Sorting for Action Columns\n```typescript\n// ✅ Good - Actions shouldn't be sortable\nb.custom(\"actions\", {\n  /* ... */,\n  enableSorting: false,\n})\n\nb.display(\"id\", {\n  /* ... */,\n  // enableSorting defaults to false\n})\n```\n\n### 3. Use Display Columns for Simple Content\n```typescript\n// ✅ Good - Simple display content\nb.display(\"avatar\", {\n  header: \"Avatar\",\n  cell: ({ row }) =\u003e \u003cimg src={row.original.avatar} /\u003e,\n})\n\n// ❌ Avoid - Don't use custom for simple display\nb.custom(\"avatar\", { /* ... */ })\n```\n\n### 4. Provide Meaningful Icons\n```typescript\n// ✅ Good - Descriptive icons\nb.text(\"email\", { icon: Mail })\nb.number(\"amount\", { icon: DollarSign })\nb.option(\"status\", { icon: CheckCircle })\n\n// ❌ Avoid - Generic icons\nb.text(\"email\", { icon: Circle })\n```\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n**Q: Sorting not working?**\nA: Make sure `enableSorting={true}` is passed to the SuperTable component and the column has `enableSorting: true` (or omit it for default behavior).\n\n**Q: Filters not showing?**\nA: Ensure your column has a `filterConfig` property. Display columns don't have filtering by design.\n\n**Q: TypeScript errors?**\nA: Make sure your data type matches the generic parameter in `generateColumns\u003cYourDataType\u003e()`.\n\n**Q: Pagination not working?**\nA: Check that `enablePagination={true}` is set on the SuperTable component.\n\n## 📄 License\n\nMIT License - feel free to use in your projects!\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n---\n\nBuilt with ❤️ using React, TypeScript, TanStack Table, and shadcn/ui.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonepriuli%2Fshadcn-aizoon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonepriuli%2Fshadcn-aizoon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonepriuli%2Fshadcn-aizoon/lists"}