{"id":21112217,"url":"https://github.com/icflorescu/mantine-datatable-v6","last_synced_at":"2026-03-16T18:04:50.135Z","repository":{"id":202408943,"uuid":"707393766","full_name":"icflorescu/mantine-datatable-v6","owner":"icflorescu","description":"The table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, context menus, nesting, Gmail-style batch row selection, dark theme, and more.","archived":false,"fork":false,"pushed_at":"2024-01-17T17:46:15.000Z","size":2414,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-28T16:55:31.287Z","etag":null,"topics":["dark-mode","dark-theme","datagrid","datatable","javascript","mantine","mantine-v6","react","typescript","ui","uikit"],"latest_commit_sha":null,"homepage":"https://icflorescu.github.io/mantine-datatable-v6","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icflorescu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"icflorescu"}},"created_at":"2023-10-19T20:01:39.000Z","updated_at":"2025-03-09T19:56:07.000Z","dependencies_parsed_at":"2024-01-10T09:40:33.606Z","dependency_job_id":"2daf19fa-4c95-452f-8572-0963e50be5b4","html_url":"https://github.com/icflorescu/mantine-datatable-v6","commit_stats":null,"previous_names":["icflorescu/mantine-datatable-v6"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/icflorescu/mantine-datatable-v6","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Fmantine-datatable-v6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Fmantine-datatable-v6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Fmantine-datatable-v6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Fmantine-datatable-v6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icflorescu","download_url":"https://codeload.github.com/icflorescu/mantine-datatable-v6/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Fmantine-datatable-v6/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278551499,"owners_count":26005386,"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-06T02:00:05.630Z","response_time":65,"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":["dark-mode","dark-theme","datagrid","datatable","javascript","mantine","mantine-v6","react","typescript","ui","uikit"],"created_at":"2024-11-20T01:27:24.250Z","updated_at":"2025-10-06T02:44:16.029Z","avatar_url":"https://github.com/icflorescu.png","language":"TypeScript","funding_links":["https://github.com/sponsors/icflorescu"],"categories":[],"sub_categories":[],"readme":"# Mantine DataTable V6\n\n![Publish NPM \u0026 deploy docs workflow](https://github.com/icflorescu/mantine-datatable-v6/actions/workflows/publish-and-deploy.yml/badge.svg)  \n[![NPM version][npm-image]][npm-url]\n[![License][license-image]][license-url]\n[![Stars][stars-image]][stars-url]\n[![Last commit][last-commit-image]][repo-url]\n[![Closed issues][closed-issues-image]][closed-issues-url]\n[![Downloads][downloads-image]][npm-url]\n[![Language][language-image]][repo-url]\n[![Sponsor the author][sponsor-image]][sponsor-url]\n\n⚠️ Mantine DataTable V6 is compatible with [Mantine V6](https://v6.mantine.dev/).\n💡 If you're using Mantine V7, please use [Mantine DataTable V7](https://icflorescu.github.io/mantine-datatable/).\n\nThe lightweight, dependency-free, \"dark-theme aware\" [**table component**](https://icflorescu.github.io/mantine-datatable-v6/) for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row context menu, row expansion, nesting, and more.\n\n[![Mantine DataTable](https://user-images.githubusercontent.com/581999/189911698-369ba48e-65f0-4772-aad3-cb5e6d4cb59d.png)](https://icflorescu.github.io/mantine-datatable-v6/)\n\n## Features\n\n- **Lightweight** - no external dependencies, [no bloat](https://bundlephobia.com/package/mantine-datatable)\n- **Dark theme aware** - works out of the box with [Mantine's dark theme](https://mantine.dev/guides/dark-theme/)\n- **[Fully customizable](https://icflorescu.github.io/mantine-datatable-v6/examples/additional-styling)** - you can customize the look and feel of the table and its components\n- **[Asynchronous data loading](https://icflorescu.github.io/mantine-datatable-v6/examples/asynchronous-data-loading)** - load data from a remote API endpoint and show a loading indicator while waiting for the response\n- **[Pagination](https://icflorescu.github.io/mantine-datatable-v6/examples/pagination)** - split large data sets into pages\n- **[Column sorting](https://icflorescu.github.io/mantine-datatable-v6/examples/sorting)** - sort data by one or more columns\n- **[Custom cell data rendering](https://icflorescu.github.io/mantine-datatable-v6/examples/column-properties)** - render cell data using custom components\n- **[Row context menu](https://icflorescu.github.io/mantine-datatable-v6/examples/row-context-menu)** - show a context menu when right-clicking on a row\n- **[Row expansion](https://icflorescu.github.io/mantine-datatable-v6/examples/expanding-rows)** - expand a row to show additional details\n- **[Nesting](https://icflorescu.github.io/mantine-datatable-v6/examples/nested-tables)** - nest tables to show hierarchical data\n- **[Additive batch rows selection](https://icflorescu.github.io/mantine-datatable-v6/examples/records-selection)** - select or deselect ranges of rows using the Shift key\n- **[Automatically-scrollable](https://icflorescu.github.io/mantine-datatable-v6/examples/scrollable-vs-auto-height)** - automatically scrollable or auto-height\n- **[AutoAnimate support](https://icflorescu.github.io/mantine-datatable/examples-v6/using-with-auto-animate)** - animate row sorting, addition and removal\n- **More** - check out the [full documentation](https://icflorescu.github.io/mantine-datatable-v6/)\n\n## Trusted by the community\n\nEmil Sorensen @ [kapa.ai](https://kapa.ai/):\n\n\u003e _Mantine DataTable is a great component that’s core to our web app - it saves us a ton of time and comes with great styling and features out of the box_\n\n[![Who's using Mantine DataTable](https://user-images.githubusercontent.com/581999/258483859-f8f46b97-5900-4871-8243-c7316fbc244f.png)](https://icflorescu.github.io/mantine-datatable-v6/)\n\n[Mantine DataTable](https://icflorescu.github.io/mantine-datatable-v6/) is used by developers and startups around the world, such as: [kapa.ai](https://kapa.ai/), [exdatis.ai](https://exdatis.ai/), [teachfloor](https://www.teachfloor.com/), [MARKUP](https://www.getmarkup.com/), [BookieBase](https://bookiebase.ie/), [zipline](https://zipline.diced.tech/), [Pachtop](https://github.com/pacholoamit/pachtop), [Ganymede](https://github.com/Zibbp/ganymede), [COH3 Stats](https://coh3stats.com/), [Culver City Rental Registry](https://www.ccrentals.org/) and many more.\n\nIf you're using [Mantine DataTable](https://icflorescu.github.io/mantine-datatable-v6/) in your project, please drop me a line at the email address listed in my [GitHub profile](https://github.com/icflorescu) and I'll be happy to add it to the list and on the [documentation website](https://icflorescu.github.io/mantine-datatable-v6/).\n\n## Full documentation and examples\n\nVisit [icflorescu.github.io/mantine-datatable-v6](https://icflorescu.github.io/mantine-datatable-v6/) to view the full documentation and learn how to use it by browsing a comprehensive list of examples.\n\n## Quickstart\n\nInstall the package and its dependencies (this package supports Mantine V6; the V7 version is under development):\n\n```sh\nnpm i @mantine/core@6 @mantine/hooks@6 @emotion/react mantine-datatable@6\n```\n\nIf you're using Next.js, Vite, CRA, Remix or Gatsby, you might need to install additional dependencies. Please refer to Mantine's [getting started page](https://v6.mantine.dev/pages/getting-started/) for more details.\n\nUse it in your code:\n\n```ts\nimport { Text } from '@mantine/core';\nimport { DataTable } from 'mantine-datatable';\n\nexport default function GettingStartedExample() {\n  return (\n    \u003cDataTable\n      withBorder\n      borderRadius=\"sm\"\n      withColumnBorders\n      striped\n      highlightOnHover\n      // provide data\n      records={[\n        { id: 1, name: 'Joe Biden', bornIn: 1942, party: 'Democratic' },\n        // more records...\n      ]}\n      // define columns\n      columns={[\n        {\n          accessor: 'id',\n          // this column has a custom title\n          title: '#',\n          // right-align column\n          textAlignment: 'right',\n        },\n        { accessor: 'name' },\n        {\n          accessor: 'party',\n          // this column has custom cell data rendering\n          render: ({ party }) =\u003e (\n            \u003cText weight={700} color={party === 'Democratic' ? 'blue' : 'red'}\u003e\n              {party.slice(0, 3).toUpperCase()}\n            \u003c/Text\u003e\n          ),\n        },\n        { accessor: 'bornIn' },\n      ]}\n      // execute this callback when a row is clicked\n      onRowClick={({ name, party, bornIn }) =\u003e\n        alert(`You clicked on ${name}, a ${party.toLowerCase()} president born in ${bornIn}.`)\n      }\n    /\u003e\n  );\n}\n```\n\nMake sure to browse the comprehensive list of [usage examples](https://icflorescu.github.io/mantine-datatable-v6/examples/basic-usage) to learn how to unleash the full power of Mantine DataTable.\n\n## Other useful resources\n\nMantine DataTable had the context-menu functionality baked in since its early days. If you're looking to use a context menu in other parts of your application, you might want to check out [Mantine Context Menu](https://icflorescu.github.io/mantine-contextmenu-v6/).\n\n## Code contributors\n\n[![Contributors list](https://contrib.rocks/image?repo=icflorescu/mantine-datatable)](https://github.com/icflorescu/mantine-datatable/graphs/contributors)\n\nWant to [become a code contributor](https://icflorescu.github.io/mantine-datatable-v6/contribute-and-support)?\n\n## Sponsor the project\n\nIf you find this package useful, please consider ❤️ [sponsoring my work](https://github.com/sponsors/icflorescu). Your sponsorship will help me dedicate more time to maintaining the project and will encourage me to add new features and fix existing bugs. If you're a company using Mantine DataTable in a commercial project, you can also [hire my services](https://github.com/icflorescu).\n\n## Other means of support\n\nIf you find this package useful, please 🙏 star the repository, 💕 [tweet about it](http://twitter.com/share?text=Build%20data-rich%20React%20applications%20with%20Mantine%20DataTable\u0026url=https%3A%2F%2Fgithub.com%2Ficflorescu%2Fmantine-datatable\u0026hashtags=mantine%2Cdatatable%2Cdatagrid%2Creact\u0026via=icflorescu), 👍 [endorse me on LinkedIn](https://www.linkedin.com/in/icflorescu) or consider hiring my services.\n\nThe more stars this repository gets, the more visibility it gains among the Mantine users community. The more\nusers it gets, the more chances that some of those users will become active code contributors willing to put\ntheir effort into bringing new features to life and/or fixing bugs.\n\nAs the repository gain awareness, my chances of getting hired to work on Mantine-based projects will increase,\nwhich in turn will help maintain my vested interest in keeping the project alive.\n\n## Hiring the author\n\nIf you want to hire my services, don’t hesitate to drop me a line at the email address listed in my [GitHub profile](https://github.com/icflorescu).\nI’m currently getting a constant flow of approaches, some of them relevant, others not so relevant.\nMentioning “Mantine DataTable” in your text would help me prioritize your message.\n\n## Acknowledgements\n\n🙏 Special thanks to [Ani Ravi](https://github.com/aniravi24) for being the first person to sponsor my work on this project!\n\n## License\n\nThe [MIT License](https://github.com/icflorescu/mantine-datatable/blob/master/LICENSE).\n\n[npm-url]: https://npmjs.org/package/mantine-datatable\n[repo-url]: https://github.com/icflorescu/mantine-datatable\n[stars-url]: https://github.com/icflorescu/mantine-datatable/stargazers\n[closed-issues-url]: https://github.com/icflorescu/mantine-datatable/issues?q=is%3Aissue+is%3Aclosed\n[license-url]: LICENSE\n[npm-image]: https://img.shields.io/npm/v/mantine-datatable.svg?style=flat-square\n[license-image]: http://img.shields.io/npm/l/mantine-datatable.svg?style=flat-square\n[downloads-image]: http://img.shields.io/npm/dm/mantine-datatable.svg?style=flat-square\n[stars-image]: https://img.shields.io/github/stars/icflorescu/mantine-datatable?style=flat-square\n[last-commit-image]: https://img.shields.io/github/last-commit/icflorescu/mantine-datatable?style=flat-square\n[closed-issues-image]: https://img.shields.io/github/issues-closed-raw/icflorescu/mantine-datatable?style=flat-square\n[language-image]: https://img.shields.io/github/languages/top/icflorescu/mantine-datatable?style=flat-square\n[sponsor-image]: https://img.shields.io/badge/sponsor-violet?style=flat-square\n[sponsor-url]: https://github.com/sponsors/icflorescu\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficflorescu%2Fmantine-datatable-v6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficflorescu%2Fmantine-datatable-v6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficflorescu%2Fmantine-datatable-v6/lists"}