{"id":37327104,"url":"https://github.com/gihanrangana/react-mui-datatables","last_synced_at":"2026-01-16T03:30:55.529Z","repository":{"id":57334860,"uuid":"144617851","full_name":"gihanrangana/react-mui-datatables","owner":"gihanrangana","description":"Material UI v1 DataTable for React.  ","archived":false,"fork":false,"pushed_at":"2018-08-29T07:38:44.000Z","size":987,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-12T19:45:11.138Z","etag":null,"topics":["material","material-design","material-ui","mui-datatables","react","react-data-table","react-mui-datatables"],"latest_commit_sha":null,"homepage":"https://sl-codeblaster.github.io/react-mui-datatables/","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/gihanrangana.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-13T18:23:29.000Z","updated_at":"2025-03-12T17:28:20.000Z","dependencies_parsed_at":"2022-08-31T15:23:40.514Z","dependency_job_id":null,"html_url":"https://github.com/gihanrangana/react-mui-datatables","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/gihanrangana/react-mui-datatables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gihanrangana%2Freact-mui-datatables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gihanrangana%2Freact-mui-datatables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gihanrangana%2Freact-mui-datatables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gihanrangana%2Freact-mui-datatables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gihanrangana","download_url":"https://codeload.github.com/gihanrangana/react-mui-datatables/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gihanrangana%2Freact-mui-datatables/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28477204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T03:13:13.607Z","status":"ssl_error","status_checked_at":"2026-01-16T03:11:47.863Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["material","material-design","material-ui","mui-datatables","react","react-data-table","react-mui-datatables"],"created_at":"2026-01-16T03:30:55.439Z","updated_at":"2026-01-16T03:30:55.515Z","avatar_url":"https://github.com/gihanrangana.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Material UI DataTables for react MaterialUI ^v1 - react-mui-datatables\n\n[![npm version](https://badge.fury.io/js/react-mui-datatables.svg)](https://badge.fury.io/js/react-mui-datatables)\n\nreact-mui-datatables is table component for [Material-UI V1](https://www.material-ui.com). This version comes with search,export csv,sort,pagination,print. more options coming soon.stay with us...\n\n\n## Install\n\n`npm install react-mui-datatables --save`\n\n## Demo\n\n[![Edit 0qx6yljwlv](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0qx6yljwlv)\n\n## Usage\n\nFor a simple table:\n\n```js\n\nimport MuiDataTable from \"react-mui-datatables\";\nimport data from \"./data\";\n\n\nclass App extends Component {\n    constructor(props) {\n        super(props);\n\n        App.handleClick = App.handleClick.bind(this);\n    }\n\n    componentWillMount() {\n\n    }\n\n    /*\n    * This function for handle your action button click event \n    * if you add action button you can get your own key from array using below command\n    * please add indexColumn key to options object.\n    */\n    static handleClick(e) {\n        /* Your code is here.alert is the example */\n        alert(\"parent td#id: \" + e.target.parentNode.id);\n    }\n\n    render() {\n        const columns = [\n            { \n                label: \"First Name\", \n                key: \"fname\", /* this value is the your array object key.if you did't add this table is not working */\n                sort: true  /* you can set column sort true / false as your own */\n            },\n            { label: \"Last Name\", key: \"lname\", sort: true },\n            { label: \"Email\", key: \"email\" },\n            { label: \"Gender\", key: \"gender\" },\n            { label: \"Action\", key: \"action\" }, /* \u003c-- this is required if you using customAction */\n        ]; /* \u003c-- Table header columns. this is required */\n\n        const action = \u003cButton onClick={App.handleClick}\u003eAction\u003c/Button\u003e; /* \u003c-- action button */\n\n        const options = {\n            hasIndex: true, /* \u003c-- use numbers for rows*/\n            customAction: action, /* \u003c-- use action button for row */\n            searchBox: true, /* \u003c-- search true or false */\n            csv: true, /* \u003c-- csv download true or false */\n            indexColumn: \"fname\" /* \u003c-- add your data first unique column name for this like _id, i used fname because i don't have a _id field in my array */\n        };\n\n        return (\n            \u003cdiv\u003e\n                \u003cMuiDataTable data={data} columns={columns} options={options} title={\"User Data\"} /\u003e\n            \u003c/div\u003e\n        );\n    }\n\n}\n```\n\n## API\n\n\n#### \u0026lt;MuiDataTable /\u003e\n\nThis component accepts the following props:\n\n|Name|Type|Description\n|:--:|:-----|:-----|\n|**`title`**|array|Title used to caption table\n|**`columns`**|array|Columns use to describe the table.this display on the table head cells.This is required\n|**`data`**|array|Data is your data array.This is required\n|**`options`**|object|Options use to customize your table\n\nOptions:\nUse these as option object key.\n\n|Name|Type|Default|Description\n|:--:|:-----|:--|:-----|\n|**`hasIndex`**|bool|false|This is use for create column with your index for adding numbers for rows first column\n|**`customAction`**|string||You can add custom action button if you want.please add this as a component\n|**`searchBox`**|bool|true|You can remove search box using this option\n|**`csv`**|bool|true|You can remove csv download using this option\n|**`indexColumn`**|string||If add custom action button please set the indexColumn as your own array key. \n|**`printButton`**|bool|true|You can disable print button using this. \n\n## Custom Styles\nYou can styles using material ui CreateMuiTheme function.\n\n\n## License\nThe files included in this repository are licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgihanrangana%2Freact-mui-datatables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgihanrangana%2Freact-mui-datatables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgihanrangana%2Freact-mui-datatables/lists"}