{"id":30694686,"url":"https://github.com/elslinee/jinx-table","last_synced_at":"2025-09-02T06:43:53.974Z","repository":{"id":310862772,"uuid":"1015357082","full_name":"elslinee/Jinx-table","owner":"elslinee","description":"A modern, customizable React table component library built with Vite, Tailwind CSS, and Radix UI. Jinx Table provides flexible table rendering, sorting, filtering, pagination, and selection, along with a set of reusable UI components.","archived":false,"fork":false,"pushed_at":"2025-08-30T21:07:19.000Z","size":306,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-30T22:22:24.856Z","etag":null,"topics":["npm-package","react","shadcn-ui","talwindcss","tanstack-table","vite"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/jinx-table","language":"JavaScript","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/elslinee.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-07-07T11:33:37.000Z","updated_at":"2025-08-30T21:07:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"69a0bda2-2976-41fb-b289-ee358c2269af","html_url":"https://github.com/elslinee/Jinx-table","commit_stats":null,"previous_names":["elslinee/jinx-table"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/elslinee/Jinx-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elslinee%2FJinx-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elslinee%2FJinx-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elslinee%2FJinx-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elslinee%2FJinx-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elslinee","download_url":"https://codeload.github.com/elslinee/Jinx-table/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elslinee%2FJinx-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273244303,"owners_count":25070959,"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-09-02T02:00:09.530Z","response_time":77,"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":["npm-package","react","shadcn-ui","talwindcss","tanstack-table","vite"],"created_at":"2025-09-02T06:43:52.010Z","updated_at":"2025-09-02T06:43:53.935Z","avatar_url":"https://github.com/elslinee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jinx Table\n\n[![npm version](https://img.shields.io/npm/v/jinx-table.svg)](https://www.npmjs.com/package/jinx-table) [![npm downloads](https://img.shields.io/npm/dm/jinx-table.svg)](https://www.npmjs.com/package/jinx-table)\n\nA modern, customizable React table component library built with Vite, Tailwind CSS, and Radix UI. Jinx Table provides flexible table rendering, sorting, filtering, pagination, and selection, along with a set of reusable UI components.\n\n![Jinx Table preview](public/jinxtable.jpg)\n\nGet it on npm: [jinx-table](https://www.npmjs.com/package/jinx-table)\n\n## Features\n\n- **Flexible Key System**: Support both simple string keys and object keys with custom headers and cell rendering.\n- **Dynamic Table Rendering**: Easily display data with customizable columns and cell rendering.\n- **Sorting, Filtering, Pagination**: Built-in support for common table operations.\n- **Row Selection**: Optional checkbox selection for rows with `checkboxColumn()` utility.\n- **Composable UI Components**: Includes Button, Input, Checkbox, Dialog, and Table primitives.\n- **Utility Functions**:\n  - `cn()` - Smart class name merging with Tailwind CSS conflict resolution\n  - `createColumn()` - Easy column creation with sorting and custom cell rendering\n  - `checkboxColumn()` - Pre-built checkbox selection column\n- **TypeScript-friendly (JSX/JS)**: Written in modern React with hooks and functional components.\n- **Zero Configuration**: Works out of the box with sensible defaults.\n\n## Project Structure\n\n```\nsrc/\n  components/\n    react-table/\n      JinxTable.jsx         # Main table component with advanced features\n    ui/\n      button.jsx            # Button component (variants, sizes)\n      checkbox.jsx          # Checkbox (Radix UI)\n      dialog.jsx            # Dialog/modal (Radix UI)\n      input.jsx             # Styled input field\n      table.jsx             # Table primitives (Table, TableRow, etc.)\n  lib/\n    utils.js                # Utility for merging class names\n  utils/\n    columnsUtils.jsx        # Helpers for column/checkbox column creation\n```\n\n## Usage\n\n### Installation\n\n#### As an npm package:\n\n```sh\nnpm install jinx-table\n# or\nyarn add jinx-table\n```\n\n#### From source:\n\n1. **Clone the repository:**\n   ```sh\n   git clone \u003cyour-repo-url\u003e\n   cd jinx-table\n   ```\n2. **Install dependencies:**\n   ```sh\n   npm install\n   # or\n   yarn install\n   ```\n3. **Start the development server:**\n   ```sh\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n### Basic Example\n\n#### When using as npm package:\n\n```jsx\nimport { JinxTable } from \"jinx-table\";\n\nconst data = [\n  { id: 1, name: \"Alice\", age: 25, status: \"active\" },\n  { id: 2, name: \"Bob\", age: 30, status: \"inactive\" },\n];\n\nexport default function App() {\n  return (\n    \u003cJinxTable\n      data={data}\n      keys={[\"name\", \"age\", \"status\"]}\n      filterFields={[\"name\"]}\n      isCheckbox={true}\n      isPagination={true}\n      total={data.length}\n      limit={10}\n      skip={0}\n      loading={false}\n    /\u003e\n  );\n}\n```\n\n````\n\n#### When using from source:\n\n```jsx\nimport JinxTable from \"./src/components/react-table/JinxTable\";\n\nconst data = [\n  { id: 1, name: \"Alice\", age: 25, status: \"active\" },\n  { id: 2, name: \"Bob\", age: 30, status: \"inactive\" },\n];\n\nexport default function App() {\n  return (\n    \u003cJinxTable\n      data={data}\n      keys={[\"name\", \"age\", \"status\"]}\n      filterFields={[\"name\"]}\n      isCheckbox={true}\n      isPagination={true}\n      total={data.length}\n      limit={10}\n      skip={0}\n      loading={false}\n    /\u003e\n  );\n}\n````\n\n### Complete Example with Mixed Key Types\n\n```jsx\nimport { JinxTable } from \"jinx-table\";\n\nconst data = [\n  {\n    id: 1,\n    name: \"Alice\",\n    email: \"alice@example.com\",\n    age: 25,\n    status: \"active\",\n  },\n  { id: 2, name: \"Bob\", email: \"bob@example.com\", age: 30, status: \"inactive\" },\n];\n\nexport default function App() {\n  const keys = [\n    \"name\", // Simple string key\n    {\n      header: \"Email Address\",\n      cell: (data) =\u003e (\n        \u003ca\n          href={`mailto:${data.email}`}\n          className=\"text-blue-600 hover:underline\"\n        \u003e\n          {data.email}\n        \u003c/a\u003e\n      ),\n    },\n    {\n      header: \"Age\",\n      cell: (data) =\u003e (\n        \u003cspan className=\"font-semibold\"\u003e{data.age} years old\u003c/span\u003e\n      ),\n    },\n    {\n      header: \"Status\",\n      cell: (data) =\u003e (\n        \u003cspan\n          className={`px-2 py-1 rounded-full text-xs font-medium ${\n            data.status === \"active\"\n              ? \"bg-green-100 text-green-800\"\n              : \"bg-red-100 text-red-800\"\n          }`}\n        \u003e\n          {data.status}\n        \u003c/span\u003e\n      ),\n    },\n  ];\n\n  return (\n    \u003cJinxTable\n      data={data}\n      keys={keys}\n      filterFields={[\"name\", \"email\"]}\n      isCheckbox={true}\n      isPagination={false}\n      loading={false}\n    /\u003e\n  );\n}\n```\n\n### Flexible Key System\n\nJinxTable supports two ways to define table columns:\n\n#### 1. Simple String Keys\n\n```jsx\n// Pass an array of field names\nconst keys = [\"name\", \"email\", \"age\", \"status\"];\n\n\u003cJinxTable\n  data={data}\n  keys={keys}\n  // ... other props\n/\u003e;\n```\n\n#### 2. Object Keys with Custom Configuration\n\n```jsx\n// Pass objects with header and optional cell rendering\nconst keys = [\n  \"name\", // Simple string key\n  {\n    header: \"Email Address\",\n    cell: (data) =\u003e \u003ca href={`mailto:${data.email}`}\u003e{data.email}\u003c/a\u003e,\n  },\n  {\n    header: \"Age\",\n    cell: (data) =\u003e \u003cspan className=\"font-bold\"\u003e{data.age} years\u003c/span\u003e,\n  },\n  {\n    header: \"Status\",\n    cell: (data) =\u003e (\n      \u003cspan\n        className={`px-2 py-1 rounded text-xs ${\n          data.status === \"active\"\n            ? \"bg-green-100 text-green-800\"\n            : \"bg-red-100 text-red-800\"\n        }`}\n      \u003e\n        {data.status}\n      \u003c/span\u003e\n    ),\n  },\n];\n\n\u003cJinxTable\n  data={data}\n  keys={keys}\n  // ... other props\n/\u003e;\n```\n\n### Custom Columns with Utilities\n\n```jsx\nimport { createColumn, checkboxColumn } from \"jinx-table\";\n\n// Define your columns\nconst columns = [\n  checkboxColumn(), // Add row selection\n  createColumn({\n    accessorKey: \"name\",\n    header: \"Name\",\n    cell: (data) =\u003e \u003cspan className=\"font-semibold\"\u003e{data.name}\u003c/span\u003e,\n  }),\n  createColumn({\n    accessorKey: \"email\",\n    header: \"Email\",\n  }),\n  createColumn({\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: (data) =\u003e (\n      \u003cspan\n        className={`px-2 py-1 rounded text-xs ${\n          data.status === \"active\"\n            ? \"bg-green-100 text-green-800\"\n            : \"bg-gray-100 text-gray-800\"\n        }`}\n      \u003e\n        {data.status}\n      \u003c/span\u003e\n    ),\n  }),\n];\n```\n\n### UI Components\n\n- **Button**: Variant, size, and icon support\n- **Input**: Styled input for search/filter\n- **Checkbox**: Accessible, Radix-based\n- **Dialog**: Modal dialog for forms or details\n- **Table**: Table primitives for custom layouts\n\n## Customization\n\n- **Styling**: Uses Tailwind CSS for easy customization\n- **Slots \u0026 Props**: All components accept `className` and other props for flexibility\n- **Extendable**: Add your own columns, dialogs, or actions as needed\n\n## Utilities\n\n### Core Utilities\n\n- `cn(...inputs)`: Merges class names and resolves Tailwind conflicts\n- `createColumn({ accessorKey, header, cell })`: Helper for defining table columns with sorting and custom cell rendering\n- `checkboxColumn()`: Adds a selection checkbox column for row selection\n\n### Usage Examples\n\n```jsx\nimport { cn, createColumn, checkboxColumn } from \"jinx-table\";\n\n// Using cn utility for class merging\nconst buttonClass = cn(\"px-4 py-2\", \"bg-blue-500\", \"hover:bg-blue-600\");\n\n// Creating a custom column\nconst nameColumn = createColumn({\n  accessorKey: \"name\",\n  header: \"Full Name\",\n  cell: (data) =\u003e \u003cspan className=\"font-bold\"\u003e{data.name}\u003c/span\u003e,\n});\n\n// Adding checkbox selection\nconst columns = [\n  checkboxColumn(),\n  nameColumn,\n  // ... other columns\n];\n```\n\n### Advanced Column Configuration\n\n```jsx\n// Column with custom header and cell rendering\nconst statusColumn = createColumn({\n  accessorKey: \"status\",\n  header: \"Status\",\n  cell: (data) =\u003e (\n    \u003cspan\n      className={`px-2 py-1 rounded ${\n        data.status === \"active\"\n          ? \"bg-green-100 text-green-800\"\n          : \"bg-red-100 text-red-800\"\n      }`}\n    \u003e\n      {data.status}\n    \u003c/span\u003e\n  ),\n});\n\n// Column with sorting enabled (default)\nconst ageColumn = createColumn({\n  accessorKey: \"age\",\n  header: \"Age\",\n});\n```\n\n## Dependencies\n\n- React\n- Vite\n- Tailwind CSS\n- Radix UI (Dialog, Checkbox)\n- @tanstack/react-table\n- lucide-react (icons)\n- class-variance-authority, clsx, tailwind-merge\n\n## Publishing\n\nTo publish this package to npm:\n\n1. **Build the package:**\n\n   ```sh\n   npm run build\n   ```\n\n2. **Login to npm:**\n\n   ```sh\n   npm login\n   ```\n\n3. **Publish:**\n   ```sh\n   npm publish\n   ```\n\nThe `prepublishOnly` script will automatically build the package before publishing.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felslinee%2Fjinx-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felslinee%2Fjinx-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felslinee%2Fjinx-table/lists"}