{"id":13421854,"url":"https://github.com/mbrn/material-table","last_synced_at":"2025-04-23T20:56:55.662Z","repository":{"id":38430684,"uuid":"143730858","full_name":"mbrn/material-table","owner":"mbrn","description":"Datatable for React based on material-ui's table with additional features","archived":false,"fork":false,"pushed_at":"2024-08-28T04:08:05.000Z","size":37965,"stargazers_count":3508,"open_issues_count":48,"forks_count":1026,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-04-23T20:56:42.245Z","etag":null,"topics":["datagrid","datatable","material","material-ui","react","table"],"latest_commit_sha":null,"homepage":"https://material-table.com","language":"JavaScript","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/mbrn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":".github/ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"mbrn","open_collective":"material-table"}},"created_at":"2018-08-06T13:15:08.000Z","updated_at":"2025-04-19T01:52:40.000Z","dependencies_parsed_at":"2024-02-25T07:04:07.477Z","dependency_job_id":"f44a3534-cfb0-44cb-b09a-97467a632030","html_url":"https://github.com/mbrn/material-table","commit_stats":{"total_commits":1135,"total_committers":199,"mean_commits":5.703517587939698,"dds":"0.46343612334801765","last_synced_commit":"650feb649d2ab6839e80556eea943660aa4adf11"},"previous_names":[],"tags_count":112,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbrn%2Fmaterial-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbrn%2Fmaterial-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbrn%2Fmaterial-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbrn%2Fmaterial-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mbrn","download_url":"https://codeload.github.com/mbrn/material-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250514767,"owners_count":21443208,"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":["datagrid","datatable","material","material-ui","react","table"],"created_at":"2024-07-30T23:00:32.874Z","updated_at":"2025-04-23T20:56:55.644Z","avatar_url":"https://github.com/mbrn.png","language":"JavaScript","readme":"\u003e :warning: Please do not create pull requests that contains a lot of change. Because we are working on refactoring and testing. Just pull requests that fixes a bug with a few line changes.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003cp align=\"center\" style=\"box-shadow: 2px 2px;\"\u003e\n  \u003ca href=\"https://material-table.com\" rel=\"noopener\" target=\"_blank\" \u003e\u003cimg width=\"200\" src=\"https://raw.githubusercontent.com/mbrn/material-table.com/master/docs/assets/logo-back.png\" alt=\"material-table\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003ematerial-table\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nA simple and powerful Datatable for React based on [Material-UI Table](https://material-ui.com/api/table/) with some additional features.\n\n[![Build Status](https://travis-ci.org/mbrn/material-table.svg?branch=master)](https://travis-ci.org/mbrn/material-table)\n[![Financial Contributors on Open Collective](https://opencollective.com/material-table/all/badge.svg?label=financial+contributors)](https://opencollective.com/material-table) [![npm package](https://img.shields.io/npm/v/material-table/latest.svg)](https://www.npmjs.com/package/material-table)\n[![NPM Downloads](https://img.shields.io/npm/dm/material-table.svg?style=flat)](https://npmcharts.com/compare/material-table?minimal=true)\n[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/mbrn/material-table.svg)](http://isitmaintained.com/project/mbrn/material-table \"Average time to resolve an issue\")\n[![xscode](https://img.shields.io/badge/Available%20on-xs%3Acode-blue?style=?style=plastic\u0026logo=appveyor\u0026logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAlUlEQVR42uzXSwqAMAwE0Mn9L+3Ggtgkk35QwcnSJo9S+yGwM9DCooCbgn4YrJ4CIPUcQF7/XSBbx2TEz4sAZ2q1RAECBAiYBlCtvwN+KiYAlG7UDGj59MViT9hOwEqAhYCtAsUZvL6I6W8c2wcbd+LIWSCHSTeSAAECngN4xxIDSK9f4B9t377Wd7H5Nt7/Xz8eAgwAvesLRjYYPuUAAAAASUVORK5CYII=)](https://xscode.com/mbrn/material-table)\n[![Follow on Twitter](https://img.shields.io/twitter/follow/baranmehmet.svg?label=follow+baranmehmet)](https://twitter.com/baranmehmet)\n[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/material-table/Lobby)\n\n\u003c/div\u003e\n\n## Roadmap\n\n- [More on our roadmap can be found here](https://github.com/mbrn/material-table/blob/master/.github/ROADMAP.md)\n\n## Key features\n\n- [Actions](https://material-table.com/#/docs/features/actions)\n- [Component overriding](https://material-table.com/#/docs/features/component-overriding)\n- [Custom column rendering](https://material-table.com/#/docs/features/custom-column-rendering)\n- [Detail Panel](https://material-table.com/#/docs/features/detail-panel)\n- [Editable](https://material-table.com/#/docs/features/editable)\n- [Export](https://material-table.com/#/docs/features/export)\n- [Filtering](https://material-table.com/#/docs/features/filtering)\n- [Grouping](https://material-table.com/#/docs/features/grouping)\n- [Localization](https://material-table.com/#/docs/features/localization)\n- [Remote Data](https://material-table.com/#/docs/features/remote-data)\n- [Search](https://material-table.com/#/docs/features/search)\n- [Selection](https://material-table.com/#/docs/features/selection)\n- [Sorting](https://material-table.com/#/docs/features/sorting)\n- [Styling](https://material-table.com/#/docs/features/styling)\n- [Tree Data](https://material-table.com/#/docs/features/tree-data)\n- and more\n\n## Demo and documentation\n\nYou can access all code examples and documentation on our site [**material-table.com**](https://material-table.com/).\n\n## Support material-table\n\nTo support material-table visit [SUPPORT](https://www.patreon.com/mbrn) page.\n\n## Issue Prioritizing\n\nIssues would be prioritized according reactions count. `is:issue is:open sort:reactions-+1-desc` filter would be use.\n\n[List issues according to reaction score](https://github.com/mbrn/material-table/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc)\n\n## Prerequisites\n\nThe minimum `React` version material-table supports is `^16.8.5` since material-table `v1.36.1`. This is due to utilising [`react-beautiful-dnd`](https://github.com/atlassian/react-beautiful-dnd) for drag \u0026 drop functionality which uses hooks.\n\nIf you use an older version of react we suggest to upgrade your dependencies or use material-table `1.36.0`.\n\n## Installation\n\n#### 1.Install package\n\nTo install material-table with `npm`:\n\n    npm install material-table @material-ui/core --save\n\nTo install material-table with `yarn`:\n\n    yarn add material-table @material-ui/core\n\n#### 2.Add material icons\n\nThere are two ways to use icons in material-table either import the material icons font via html OR import material icons and use the material-table `icons` prop.\n\n##### HTML\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\n/\u003e\n```\n\nOR\n\n##### Import Material icons\n\nIcons can be imported to be used in material-table offering more flexibility for customising the look and feel of material table over using a font library.\n\nTo install @material-ui/icons with `npm`:\n\n    npm install @material-ui/icons --save\n\nTo install @material-ui/icons with `yarn`:\n\n    yarn add @material-ui/icons\n\nIf your environment doesn't support tree-shaking, the **recommended** way to import the icons is the following:\n\n```jsx\nimport AddBox from \"@material-ui/icons/AddBox\";\nimport ArrowDownward from \"@material-ui/icons/ArrowDownward\";\n```\n\nIf your environment support tree-shaking you can also import the icons this way:\n\n```jsx\nimport { AddBox, ArrowDownward } from \"@material-ui/icons\";\n```\n\nNote: Importing named exports in this way will result in the code for _every icon_ being included in your project, so is not recommended unless you configure [tree-shaking](https://webpack.js.org/guides/tree-shaking/). It may also impact Hot Module Reload performance. Source: [@material-ui/icons](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-icons/README.md#imports)\n\nExample\n\n```jsx\nimport { forwardRef } from 'react';\n\nimport AddBox from '@material-ui/icons/AddBox';\nimport ArrowDownward from '@material-ui/icons/ArrowDownward';\nimport Check from '@material-ui/icons/Check';\nimport ChevronLeft from '@material-ui/icons/ChevronLeft';\nimport ChevronRight from '@material-ui/icons/ChevronRight';\nimport Clear from '@material-ui/icons/Clear';\nimport DeleteOutline from '@material-ui/icons/DeleteOutline';\nimport Edit from '@material-ui/icons/Edit';\nimport FilterList from '@material-ui/icons/FilterList';\nimport FirstPage from '@material-ui/icons/FirstPage';\nimport LastPage from '@material-ui/icons/LastPage';\nimport Remove from '@material-ui/icons/Remove';\nimport SaveAlt from '@material-ui/icons/SaveAlt';\nimport Search from '@material-ui/icons/Search';\nimport ViewColumn from '@material-ui/icons/ViewColumn';\n\nconst tableIcons = {\n    Add: forwardRef((props, ref) =\u003e \u003cAddBox {...props} ref={ref} /\u003e),\n    Check: forwardRef((props, ref) =\u003e \u003cCheck {...props} ref={ref} /\u003e),\n    Clear: forwardRef((props, ref) =\u003e \u003cClear {...props} ref={ref} /\u003e),\n    Delete: forwardRef((props, ref) =\u003e \u003cDeleteOutline {...props} ref={ref} /\u003e),\n    DetailPanel: forwardRef((props, ref) =\u003e \u003cChevronRight {...props} ref={ref} /\u003e),\n    Edit: forwardRef((props, ref) =\u003e \u003cEdit {...props} ref={ref} /\u003e),\n    Export: forwardRef((props, ref) =\u003e \u003cSaveAlt {...props} ref={ref} /\u003e),\n    Filter: forwardRef((props, ref) =\u003e \u003cFilterList {...props} ref={ref} /\u003e),\n    FirstPage: forwardRef((props, ref) =\u003e \u003cFirstPage {...props} ref={ref} /\u003e),\n    LastPage: forwardRef((props, ref) =\u003e \u003cLastPage {...props} ref={ref} /\u003e),\n    NextPage: forwardRef((props, ref) =\u003e \u003cChevronRight {...props} ref={ref} /\u003e),\n    PreviousPage: forwardRef((props, ref) =\u003e \u003cChevronLeft {...props} ref={ref} /\u003e),\n    ResetSearch: forwardRef((props, ref) =\u003e \u003cClear {...props} ref={ref} /\u003e),\n    Search: forwardRef((props, ref) =\u003e \u003cSearch {...props} ref={ref} /\u003e),\n    SortArrow: forwardRef((props, ref) =\u003e \u003cArrowDownward {...props} ref={ref} /\u003e),\n    ThirdStateCheck: forwardRef((props, ref) =\u003e \u003cRemove {...props} ref={ref} /\u003e),\n    ViewColumn: forwardRef((props, ref) =\u003e \u003cViewColumn {...props} ref={ref} /\u003e)\n  };\n\n\u003cMaterialTable\n  icons={tableIcons}\n  ...\n/\u003e\n```\n\n## Usage\n\nHere is a basic example of using material-table within a react application.\n\n```jsx\nimport React, { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport MaterialTable from \"material-table\";\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv style={{ maxWidth: \"100%\" }}\u003e\n        \u003cMaterialTable\n          columns={[\n            { title: \"Adı\", field: \"name\" },\n            { title: \"Soyadı\", field: \"surname\" },\n            { title: \"Doğum Yılı\", field: \"birthYear\", type: \"numeric\" },\n            {\n              title: \"Doğum Yeri\",\n              field: \"birthCity\",\n              lookup: { 34: \"İstanbul\", 63: \"Şanlıurfa\" },\n            },\n          ]}\n          data={[\n            {\n              name: \"Mehmet\",\n              surname: \"Baran\",\n              birthYear: 1987,\n              birthCity: 63,\n            },\n          ]}\n          title=\"Demo Title\"\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"react-div\"));\n```\n\n## Contributing\n\nWe'd love to have your helping hand on `material-table`! See [CONTRIBUTING.md](https://github.com/mbrn/material-table/blob/master/.github/CONTRIBUTING.md) for more information on what we're looking for and how to get started.\n\nIf you have any sort of doubt, idea or just want to talk about the project, feel free to join [our chat on Gitter](https://gitter.im/material-table/Lobby) :)\n\n## Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/mbrn/material-table/blob/master/.github/CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/mbrn/material-table/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/material-table/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/material-table/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/material-table\"\u003e\u003cimg src=\"https://opencollective.com/material-table/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/material-table/contribute)]\n\n\u003ca href=\"https://opencollective.com/material-table/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/material-table/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/material-table/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/material-table/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/material-table/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/material-table/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/material-table/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/material-table/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/material-table/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/material-table/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/material-table/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## License\n\nThis project is licensed under the terms of the [MIT license](/LICENSE).\n","funding_links":["https://patreon.com/mbrn","https://opencollective.com/material-table","https://www.patreon.com/mbrn","https://opencollective.com/material-table/contribute","https://opencollective.com/material-table/organization/0/website","https://opencollective.com/material-table/organization/1/website","https://opencollective.com/material-table/organization/2/website","https://opencollective.com/material-table/organization/3/website","https://opencollective.com/material-table/organization/4/website","https://opencollective.com/material-table/organization/5/website","https://opencollective.com/material-table/organization/6/website","https://opencollective.com/material-table/organization/7/website","https://opencollective.com/material-table/organization/8/website","https://opencollective.com/material-table/organization/9/website"],"categories":["UI Components","JavaScript","Data Tables \u0026 Grids","React"],"sub_categories":["Table","Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbrn%2Fmaterial-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmbrn%2Fmaterial-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbrn%2Fmaterial-table/lists"}