{"id":15037152,"url":"https://github.com/kevinvandy/material-react-table","last_synced_at":"2025-05-12T13:22:54.966Z","repository":{"id":37249678,"uuid":"444635962","full_name":"KevinVandy/material-react-table","owner":"KevinVandy","description":"A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript","archived":false,"fork":false,"pushed_at":"2025-03-01T21:57:50.000Z","size":21139,"stargazers_count":1646,"open_issues_count":114,"forks_count":496,"subscribers_count":14,"default_branch":"v3","last_synced_at":"2025-05-12T13:22:46.087Z","etag":null,"topics":["data-table","datagrid","material-table","material-ui","react","react-table","tanstack","typescript"],"latest_commit_sha":null,"homepage":"https://material-react-table.com","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/KevinVandy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":"KevinVandy"}},"created_at":"2022-01-05T02:33:38.000Z","updated_at":"2025-05-10T19:27:19.000Z","dependencies_parsed_at":"2022-08-08T20:00:34.905Z","dependency_job_id":"d67c8ef6-a84a-49d9-95d3-020427592e0f","html_url":"https://github.com/KevinVandy/material-react-table","commit_stats":{"total_commits":1495,"total_committers":104,"mean_commits":14.375,"dds":0.1953177257525084,"last_synced_commit":"317a87cf4da853b2078400dd3918ce0b493a4fb9"},"previous_names":[],"tags_count":153,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinVandy%2Fmaterial-react-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinVandy%2Fmaterial-react-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinVandy%2Fmaterial-react-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinVandy%2Fmaterial-react-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KevinVandy","download_url":"https://codeload.github.com/KevinVandy/material-react-table/tar.gz/refs/heads/v3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745337,"owners_count":21957352,"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","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":["data-table","datagrid","material-table","material-ui","react","react-table","tanstack","typescript"],"created_at":"2024-09-24T20:33:37.477Z","updated_at":"2025-05-12T13:22:54.944Z","avatar_url":"https://github.com/KevinVandy.png","language":"TypeScript","readme":"# Material React Table V3\n\nView [Documentation](https://www.material-react-table.com/)\n\n\u003ca href=\"https://npmjs.com/package/material-react-table\" target=\"_blank\"\u003e\n  \u003cimg alt=\"\" src=\"https://badgen.net/npm/v/material-react-table?color=blue\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://npmtrends.com/material-react-table\" target=\"_blank\"\u003e\n  \u003cimg alt=\"\" src=\"https://badgen.net/npm/dt/material-react-table?label=installs\u0026icon=npm\u0026color=blue\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=material-react-table\" target=\"_blank\"\u003e\n  \u003cimg alt=\"\" src=\"https://badgen.net/bundlephobia/minzip/material-react-table@latest?color=blue\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://star-history.com/#kevinvandy/material-react-table\u0026Date\" target=\"_blank\"\u003e\n  \u003cimg alt=\"\" src=\"https://badgen.net/github/stars/KevinVandy/material-react-table?color=blue\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/KevinVandy/material-react-table/blob/v3/LICENSE\" target=\"_blank\"\u003e\n  \u003cimg alt=\"\" src=\"https://badgen.net/github/license/KevinVandy/material-react-table?color=blue\" /\u003e\n\u003c/a\u003e\n \u003ca\n  href=\"https://github.com/sponsors/kevinvandy\"\n  target=\"_blank\"\n  rel=\"noopener\"\n\u003e\n  \u003cimg alt=\"\" src=\"https://img.shields.io/badge/sponsor-violet\" /\u003e\n\u003c/a\u003e\n\u003ca\n  href=\"https://discord.gg/5wqyRx6fnm\"\n  target=\"_blank\"\n  rel=\"noopener\"\n\u003e\n  \u003cimg alt=\"\" src=\"https://dcbadge.vercel.app/api/server/5wqyRx6fnm?style=flat\"\u003e\n\u003c/a\u003e\n\n## About\n\n### _Quickly Create React Data Tables with Material Design_\n\n### **Built with [Material UI \u003csup\u003eV6\u003c/sup\u003e](https://mui.com) and [TanStack Table \u003csup\u003eV8\u003c/sup\u003e](https://tanstack.com/table/v8)**\n\n\u003cimg src=\"https://material-react-table.com/banner.png\" alt=\"MRT\" height=\"50\" /\u003e\n\n\u003e Want to use Mantine instead of Material UI? Check out [Mantine React Table](https://www.mantine-react-table.com)\n\n## Learn More\n\n- Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions\n- View the [Docs Website](https://www.material-react-table.com/)\n- See all [Props, Options, APIs, Components, and Hooks](https://www.material-react-table.com/docs/api)\n\n### Quick Examples\n\n- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)\n- [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)\n- [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)\n- [Custom Headless Table](https://www.material-react-table.com/docs/examples/custom-headless/) (Build your own table markup)\n- [Dragging / Ordering Examples](https://www.material-react-table.com/docs/examples/column-ordering/) (Drag and Drop)\n- [Editing (CRUD) Examples](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)\n- [Expanding / Grouping Examples](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Sum, Average, Count, etc.)\n- [Filtering Examples](https://www.material-react-table.com/docs/examples/filter-variants/) (Faceted Values, Switching Filters, etc.)\n- [Sticky Pinning Examples](https://www.material-react-table.com/docs/examples/sticky-header/) (Sticky Headers, Sticky Columns, Sticky Rows, etc.)\n- [Remote Data Fetching Examples](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)\n- [Virtualized Examples](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)\n- [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)\n- [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)\n\nView additional [storybook examples](https://www.material-react-table.dev/)\n\n## Features\n\n_All features can easily be enabled/disabled_\n\n_**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_\n\n- [x] 30-56kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)\n- [x] Advanced TypeScript Generics Support (TypeScript Optional)\n- [x] Aggregation and Grouping (Sum, Average, Count, etc.)\n- [x] Cell Actions (Right-click Context Menu)\n- [x] Click To Copy Cell Values\n- [x] Column Action Dropdown Menu\n- [x] Column Hiding\n- [x] Column Ordering via Drag'n'Drop\n- [x] Column Pinning (Freeze Columns)\n- [x] Column Resizing\n- [x] Customize Icons\n- [x] Customize Styling of internal Mui Components\n- [x] Data Editing and Creating (5 different editing modes)\n- [x] Density Toggle\n- [x] Detail Panels (Expansion)\n- [x] Faceted Value Generation for Filter Options\n- [x] Filtering (supports client-side and server-side)\n- [x] Filter Match Highlighting\n- [x] Full Screen Mode\n- [x] Global Filtering (Search across all columns, rank by best match)\n- [x] Header Groups \u0026 Footers\n- [x] Localization (i18n) support\n- [x] Manage your own state or let the table manage it internally for you\n- [x] Pagination (supports client-side and server-side)\n- [x] Row Actions (Your Custom Action Buttons)\n- [x] Row Numbers\n- [x] Row Ordering via Drag'n'Drop\n- [x] Row Pinning\n- [x] Row Selection (Checkboxes)\n- [x] SSR compatible\n- [x] Sorting (supports client-side and server-side)\n- [x] Theming (Respects your Material UI Theme)\n- [x] Toolbars (Add your own action buttons)\n- [x] Tree Data / Expanding Sub-rows\n- [x] Virtualization (@tanstack/react-virtual)\n\n## Getting Started\n\n### Installation\n\nView the full [Installation Docs](https://www.material-react-table.com/docs/getting-started/install)\n\n1. Ensure that you have React 18 or later installed\n\n2. Install Peer Dependencies (Material UI V6)\n\n```bash\nnpm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled\n```\n\n3. Install material-react-table\n\n```bash\nnpm install material-react-table\n```\n\n\u003e _`@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils`_ are internal dependencies, so you do NOT need to install them yourself.\n\n### Usage\n\n\u003e Read the full usage docs [here](https://www.material-react-table.com/docs/getting-started/usage/)\n\n```jsx\nimport { useMemo, useState, useEffect } from 'react';\nimport {\n  MaterialReactTable,\n  useMaterialReactTable,\n} from 'material-react-table';\n\n//data must be stable reference (useState, useMemo, useQuery, defined outside of component, etc.)\nconst data = [\n  {\n    name: 'John',\n    age: 30,\n  },\n  {\n    name: 'Sara',\n    age: 25,\n  },\n];\n\nexport default function App() {\n  const columns = useMemo(\n    () =\u003e [\n      {\n        accessorKey: 'name', //simple recommended way to define a column\n        header: 'Name',\n        muiTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props\n        Cell: ({ cell }) =\u003e \u003cspan\u003e{cell.getValue()}\u003c/span\u003e, //optional custom cell render\n      },\n      {\n        accessorFn: (row) =\u003e row.age, //alternate way\n        id: 'age', //id required if you use accessorFn instead of accessorKey\n        header: 'Age',\n        Header: () =\u003e \u003ci\u003eAge\u003c/i\u003e, //optional custom header render\n      },\n    ],\n    [],\n  );\n\n  //optionally, you can manage any/all of the table state yourself\n  const [rowSelection, setRowSelection] = useState({});\n\n  useEffect(() =\u003e {\n    //do something when the row selection changes\n  }, [rowSelection]);\n\n  const table = useMaterialReactTable({\n    columns,\n    data,\n    enableColumnOrdering: true, //enable some features\n    enableRowSelection: true,\n    enablePagination: false, //disable a default feature\n    onRowSelectionChange: setRowSelection, //hoist internal state to your own state (optional)\n    state: { rowSelection }, //manage your own state, pass it back to the table (optional)\n  });\n\n  const someEventHandler = () =\u003e {\n    //read the table state during an event from the table instance\n    console.log(table.getState().sorting);\n  };\n\n  return (\n    \u003cMaterialReactTable table={table} /\u003e //other more lightweight MRT sub components also available\n  );\n}\n```\n\n_Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-example-t5c3ji)_\n\n## Contributors\n\n\u003ca href=\"https://github.com/kevinvandy/material-react-table/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=kevinvandy/material-react-table\" /\u003e\n\u003c/a\u003e\n\nPRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!\n\nRead the [Contributing Guide](https://github.com/KevinVandy/material-react-table/blob/v3/CONTRIBUTING.md) to learn how to run this project locally.\n\n\u003c!-- Use the FORCE, Luke! --\u003e\n","funding_links":["https://github.com/sponsors/KevinVandy","https://github.com/sponsors/kevinvandy"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinvandy%2Fmaterial-react-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinvandy%2Fmaterial-react-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinvandy%2Fmaterial-react-table/lists"}