{"id":34710835,"url":"https://github.com/maxeq/datatable","last_synced_at":"2026-05-27T10:01:52.875Z","repository":{"id":269700194,"uuid":"908185879","full_name":"maxeq/datatable","owner":"maxeq","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-14T15:20:12.000Z","size":6903,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-30T23:36:48.221Z","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/maxeq.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2024-12-25T11:34:09.000Z","updated_at":"2025-01-14T15:20:16.000Z","dependencies_parsed_at":"2024-12-25T13:18:51.671Z","dependency_job_id":"28a2a69d-a4d6-4661-8c5f-e5a9f39bb124","html_url":"https://github.com/maxeq/datatable","commit_stats":null,"previous_names":["maxeq/datatable"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maxeq/datatable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeq%2Fdatatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeq%2Fdatatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeq%2Fdatatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeq%2Fdatatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxeq","download_url":"https://codeload.github.com/maxeq/datatable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeq%2Fdatatable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33560727,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-27T02:00:06.184Z","response_time":53,"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-12-24T23:56:49.122Z","updated_at":"2026-05-27T10:01:52.869Z","avatar_url":"https://github.com/maxeq.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# @maxeq-ui/datatable\n\n\u003e A highly customizable and reusable data table component for React, supporting sorting, selection, custom rendering, and row styling.\n\n---\n\n## ✨ Features\n\n- **Customizable Columns**: Define labels, keys, custom render logic, and formatting for each column.\n- **Sorting**: Enable sorting on specific columns with ascending and descending orders.\n- **Row Selection**: Allow single or multiple row selection with callbacks.\n- **Dynamic Row Styling**: Apply conditional or static styles to rows.\n- **Fallback Rendering**: Automatically display placeholders like `'-'` for missing or `null` values.\n- **Data Formatting**: Built-in support for date, currency, percentage, and text formatting.\n- **Hover Feedback**: Interactive column headers for improved user experience.\n- **TypeScript Support**: Fully typed for strong type safety.\n\n---\n\n## 📦 Installation\n\nInstall the package via NPM:\n\n```bash\nnpm install @maxeq-ui/datatable\n```\n\nOr with Yarn:\n\n```bash\nyarn add @maxeq-ui/datatable\n```\n\nYou will also need the following peer dependencies:\n\n```bash\nnpm install react react-dom lucide-react\n```\n\n---\n\n## 🚀 Usage\n\nHere’s an example of how to use the updated `DataTable` component:\n\n```tsx\n'use client';\n\nimport React from 'react';\nimport { Column, DataTable } from '@maxeq-ui/datatable';\n\n// Define the data type\ninterface Data {\n  id: number;\n  name: string;\n  age: number;\n  city: string;\n  balance: number;\n  birthDate: string;\n  discountRate: number;\n  status: boolean;\n}\n\n// Explicitly type the columns\nconst columns: Column\u003cData\u003e[] = [\n  { key: 'name', label: 'Name', sortable: true, formatType: 'text' },\n  { key: 'age', label: 'Age', sortable: true, formatType: 'text' },\n  { key: 'city', label: 'City', formatType: 'text' },\n  { key: 'balance', label: 'Balance', sortable: true, formatType: 'currency' },\n  { key: 'birthDate', label: 'Birth Date', sortable: true, formatType: 'date' },\n  { key: 'discountRate', label: 'Discount Rate', formatType: 'percentage' },\n  { key: 'status', label: 'Status', render: (value) =\u003e (value ? 'Active' : 'Inactive') },\n];\n\nconst data: Data[] = [\n  {\n    id: 1,\n    name: 'John Doe',\n    age: 30,\n    city: 'New York',\n    balance: 12345.67,\n    birthDate: '1993-04-15',\n    discountRate: 0.15,\n    status: true,\n  },\n  {\n    id: 2,\n    name: 'Jane Smith',\n    age: 25,\n    city: 'Los Angeles',\n    balance: 9876.54,\n    birthDate: '1998-08-25',\n    discountRate: 0.1,\n    status: false,\n  },\n  {\n    id: 3,\n    name: 'Mike Johnson',\n    age: 35,\n    city: 'Chicago',\n    balance: 5432.1,\n    birthDate: '1988-01-12',\n    discountRate: 0.2,\n    status: true,\n  },\n  {\n    id: 4,\n    name: 'Sarah Miller',\n    age: 28,\n    city: 'Miami',\n    balance: 23456.78,\n    birthDate: '1994-02-20',\n    discountRate: 0.25,\n    status: false,\n  },\n  {\n    id: 5,\n    name: 'David Lee',\n    age: 40,\n    city: 'San Francisco',\n    balance: 8765.43,\n    birthDate: '1981-05-10',\n    discountRate: 0.3,\n    status: true,\n  },\n  {\n    id: 6,\n    name: 'Emily Davis',\n    age: 32,\n    city: 'Dallas',\n    balance: 4567.89,\n    birthDate: '1989-09-01',\n    discountRate: 0.18,\n    status: false,\n  },\n  {\n    id: 7,\n    name: 'Daniel Clark',\n    age: 45,\n    city: 'Seattle',\n    balance: 11234.56,\n    birthDate: '1976-11-30',\n    discountRate: 0.12,\n    status: true,\n  },\n  {\n    id: 8,\n    name: 'Linda Rodriguez',\n    age: 27,\n    city: 'Houston',\n    balance: 7890.12,\n    birthDate: '1995-06-18',\n    discountRate: 0.22,\n    status: false,\n  },\n  {\n    id: 9,\n    name: 'James Anderson',\n    age: 38,\n    city: 'Denver',\n    balance: 6543.21,\n    birthDate: '1983-04-02',\n    discountRate: 0.28,\n    status: true,\n  },\n  {\n    id: 10,\n    name: 'Olivia Wilson',\n    age: 29,\n    city: 'Boston',\n    balance: 3210.54,\n    birthDate: '1993-07-10',\n    discountRate: 0.14,\n    status: false,\n  },\n  {\n    id: 11,\n    name: 'Liam Brown',\n    age: 33,\n    city: 'Austin',\n    balance: 1478.93,\n    birthDate: '1988-10-15',\n    discountRate: 0.23,\n    status: true,\n  },\n  {\n    id: 12,\n    name: 'Sophia Moore',\n    age: 22,\n    city: 'Phoenix',\n    balance: 8923.45,\n    birthDate: '1999-03-25',\n    discountRate: 0.21,\n    status: false,\n  },\n  {\n    id: 13,\n    name: 'Lucas Taylor',\n    age: 31,\n    city: 'Las Vegas',\n    balance: 4512.67,\n    birthDate: '1990-12-05',\n    discountRate: 0.27,\n    status: true,\n  },\n  {\n    id: 14,\n    name: 'Charlotte Hall',\n    age: 37,\n    city: 'San Diego',\n    balance: 6345.89,\n    birthDate: '1984-08-16',\n    discountRate: 0.19,\n    status: false,\n  },\n  {\n    id: 15,\n    name: 'Benjamin Scott',\n    age: 43,\n    city: 'Portland',\n    balance: 1287.54,\n    birthDate: '1978-11-22',\n    discountRate: 0.16,\n    status: true,\n  },\n  {\n    id: 16,\n    name: 'Amelia Walker',\n    age: 26,\n    city: 'Philadelphia',\n    balance: 9634.21,\n    birthDate: '1994-09-07',\n    discountRate: 0.29,\n    status: false,\n  },\n  {\n    id: 17,\n    name: 'Mason Harris',\n    age: 34,\n    city: 'Detroit',\n    balance: 1478.23,\n    birthDate: '1987-05-01',\n    discountRate: 0.11,\n    status: true,\n  },\n  {\n    id: 18,\n    name: 'Isabella Young',\n    age: 24,\n    city: 'Charlotte',\n    balance: 2315.34,\n    birthDate: '1997-01-14',\n    discountRate: 0.2,\n    status: false,\n  },\n  {\n    id: 19,\n    name: 'Alexander King',\n    age: 41,\n    city: 'Salt Lake City',\n    balance: 7893.45,\n    birthDate: '1980-04-30',\n    discountRate: 0.26,\n    status: true,\n  },\n  {\n    id: 20,\n    name: 'Mia Green',\n    age: 29,\n    city: 'Orlando',\n    balance: 5678.12,\n    birthDate: '1992-10-22',\n    discountRate: 0.13,\n    status: false,\n  },\n];\n\nconst App = () =\u003e (\n  \u003cDataTable\n    columns={columns}\n    data={data}\n    selectable={true}\n    primaryKey=\"id\"\n    rowClassName={(row, index) =\u003e (index % 2 ? 'bg-stone-800' : '')}\n    onSelectionChange={(selectedRows) =\u003e console.log('Selected Rows:', selectedRows)}\n  /\u003e\n);\n\nexport default App;\n\n```\n---\n\n## 📖 Props\n\n### `DataTableProps\u003cT\u003e`\n\n| **Prop Name**         | **Type**                                                             | **Default**    | **Description**                                                                                  |\n|-----------------------|----------------------------------------------------------------------|----------------|--------------------------------------------------------------------------------------------------|\n| `columns`             | `Column\u003cT\u003e[]`                                                       | **Required**   | Defines the structure of the table columns, including labels, keys, formatting, and renderers.  |\n| `data`                | `T[]`                                                               | **Required**   | Array of data objects to render in the table.                                                   |\n| `primaryKey`          | `keyof T`                                                           | **Required**   | Unique identifier for each row (used for selection).                                            |\n| `selectable`          | `boolean`                                                           | `false`        | Enables row selection.                                                                          |\n| `onSelectionChange`   | `(selectedRows: T[]) =\u003e void`                                       | `undefined`    | Callback triggered when selected rows change.                                                   |\n| `initialSelectedRows` | `T[]`                                                               | `[]`           | Rows preselected when the table renders.                                                        |\n| `rowClassName`        | `string \\| (row: T, index: number) =\u003e string`                       | `undefined`    | Apply custom class names to rows, either statically or dynamically based on row data.           |\n\n### `Column\u003cT\u003e`\n\n| **Key**      | **Type**                                               | **Description**                                                                                  |\n|--------------|--------------------------------------------------------|--------------------------------------------------------------------------------------------------|\n| `key`        | `keyof T \\| '__virtualKey1' \\| '__virtualKey2'`        | Key from the data object to display in this column or a virtual key.                             |\n| `label`      | `string`                                               | The column header text.                                                                          |\n| `render`     | `(value: T[keyof T] \\| undefined, row: T) =\u003e React.ReactNode` | Custom render function for column data.                                                         |\n| `sortable`   | `boolean`                                              | If true, this column supports sorting.                                                          |\n| `formatType` | `'date' \\| 'currency' \\| 'percentage' \\| 'text'`       | Optional data formatting type for automatic formatting.                                          |\n\n---\n\n\n### Examples\n\n#### Usage of `formatType`\n\n```tsx\nconst columns = [\n  { key: 'name', label: 'Name', sortable: true, formatType: 'text' },\n  { key: 'balance', label: 'Balance', formatType: 'currency' },\n  { key: 'birthDate', label: 'Birth Date', formatType: 'date' },\n  { key: 'discountRate', label: 'Discount Rate', formatType: 'percentage' },\n];\n```\n\n---\n\n## 🎨 Customization\n\n### Fallback Rendering\nMissing or `null` values are automatically replaced with a `'-'`. You can customize this behavior using the `render` function for any column.\n\n### Data Formatting\nUse the `formatType` property in a column definition to enable automatic formatting for dates, currencies, percentages, and text.\n\n### Row Styling\nUse the `rowClassName` prop to dynamically apply styles to rows. This can be a string for static styles or a function that returns a string based on the row's data.\n\n---\n\n## 🛠️ Dependencies\n\n- **React**: `^17.0.0` or `^18.0.0`\n- **React DOM**: `^17.0.0` or `^18.0.0`\n- **lucide-react**: For the sorting icons.\n\n---\n\n## 📝 License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Feel free to submit issues or pull requests on [GitHub](https://github.com/maxeq/datatable).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxeq%2Fdatatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxeq%2Fdatatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxeq%2Fdatatable/lists"}