{"id":17673741,"url":"https://github.com/miteshtagadiya/react-responsive-data-table","last_synced_at":"2025-07-21T03:31:46.941Z","repository":{"id":57343570,"uuid":"136474875","full_name":"miteshtagadiya/react-responsive-data-table","owner":"miteshtagadiya","description":"Responsive Data Table with Searching, Sorting, Pagination","archived":false,"fork":false,"pushed_at":"2020-03-24T19:33:01.000Z","size":1170,"stargazers_count":7,"open_issues_count":2,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-20T16:11:06.841Z","etag":null,"topics":["data-table","datatables","npm-package","pagination","react-data-table","react-datatable","responsive-data-table","responsive-table","simple-table","table"],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/miteshtagadiya.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-06-07T12:34:36.000Z","updated_at":"2023-08-31T11:19:45.000Z","dependencies_parsed_at":"2022-09-12T07:00:34.411Z","dependency_job_id":null,"html_url":"https://github.com/miteshtagadiya/react-responsive-data-table","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/miteshtagadiya/react-responsive-data-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miteshtagadiya%2Freact-responsive-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miteshtagadiya%2Freact-responsive-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miteshtagadiya%2Freact-responsive-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miteshtagadiya%2Freact-responsive-data-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miteshtagadiya","download_url":"https://codeload.github.com/miteshtagadiya/react-responsive-data-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miteshtagadiya%2Freact-responsive-data-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266235283,"owners_count":23897175,"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","datatables","npm-package","pagination","react-data-table","react-datatable","responsive-data-table","responsive-table","simple-table","table"],"created_at":"2024-10-24T06:04:50.214Z","updated_at":"2025-07-21T03:31:46.890Z","avatar_url":"https://github.com/miteshtagadiya.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-responsive-data-table\n\n[![npm](https://img.shields.io/npm/v/react-responsive-data-table.svg)](https://www.npmjs.com/package/react-responsive-data-table)\n[![npm](https://img.shields.io/npm/dm/react-responsive-data-table.svg)](https://www.npmjs.com/package/react-responsive-data-table)\n[![npm](https://img.shields.io/npm/dw/react-responsive-data-table.svg)](https://www.npmjs.com/package/react-responsive-data-table)\n![npm](https://img.shields.io/npm/l/react-responsive-data-table.svg)\n\n\nResponsive Data Table with Searching, Sorting, Pagination\n\n\n## Demo\n[Click Here](https://miteshtagadiya.github.io/react-responsive-data-table/)\n\n## Installation\n\n1.  Install React Table as a dependency\n\n```bash\n# NPM\n$ npm install react-responsive-data-table\n```\n\n2.  Import the `react-responsive-data-table` module\n\n```javascript\n// ES6\nimport Table from \"react-responsive-data-table\";\n```\n\n\n## Example\n```jsx\nimport Table from 'react-responsive-data-table';\n\nrender() {\n\u003cTable style={{\n    opacity: 0.8,\n    backgroundColor: \"#00113a\",\n    color: \"#ffffff\",\n    textAlign: \"center\"\n  }}\n  tableStyle=\"table table-hover table-striped table-bordered table-borderless table-responsive\"\n  pages={true}\n  pagination={true}\n  onRowClick={() =\u003e {}} // if You Want Table Row Data OnClick then assign this {row =\u003e console.log(row)}\n  page={true}\n  errormsg=\"Error. . .\"\n  loadingmsg=\"Loading. . .\"\n  isLoading={false} \n  sort={true} \n  title=\"Customers\"\n  search={true}\n  size={10}\n  data={{\n    head: {\n      id: \"ID\",\n      name: \"Name\",\n      email: \"Email\",\n      created_at: \"Created At\",\n      orders: \"Orders\",\n      last_order: \"Last OrderResponse\",\n      total_spent: \"Total Spent\"\n    },\n    data: [\n      {\n        id: 218354810912,\n        name: \"Kattie Wisoky\",\n        email: \"Kattie.Wisoky@data-generator.com\",\n        created_at: \"2017-11-07T15:14:07.000+0000\",\n        orders: 6,\n        last_order: \"#2233\",\n        total_spent: 0\n      },\n      {\n        id: 218354843680,\n        name: \"Vernon McLaughlin\",\n        email: \"Vernon.McLaughlin@data-generator.com\",\n        created_at: \"2017-11-07T15:14:07.000+0000\",\n        orders: 4,\n        last_order: \"#1287\",\n        total_spent: 0\n      },\n      {\n        id: 218354909216,\n        name: \"Jeffry Harber\",\n        email: \"Jeffry.Harber@data-generator.com\",\n        created_at: \"2017-11-07T15:14:07.000+0000\",\n        orders: 2,\n        last_order: \"#2356\",\n        total_spent: 0\n      }\n    ]\n  }} /\u003e\n  }\n\n```\n\n## Data\nYou have to pass data and head objects in data prop. head is for Header.\n```javascript\n\u003cTable\n  data={{head:{},data:[]}}\n/\u003e\n```\n\n## Props\n\nThese are all of the available props (and their default values) for the main `\u003cTable /\u003e` component.\n```javascript\n{\n    data={{\n        head:{},\n        data:[]\n        }},\n    style,\n    pages: true,\n    tableStyle: \"table class name\",\n    pagination= true,\n    page= true,\n    title= \"title\",\n    search= true,\n    size= 10,\n    errormsg= \"Error message\",\n    loadingmsg= \"Loading message\",\n    isLoading= false,\n    sort= true,\n    onRowClick= {() =\u003e {}} //function\n}\n```\n\n## Props Details\n\n* `data` - You have to pass data and head objects in data prop. head is for Header.\n* `tableStyle` - Bootstrap Table class name\n* `style` - Style for Table Header\n* `pages` - Boolean. Shows Pages Option to display number of records per page.[5,10,20,25,50]\n* `pagination` - Boolean. Shows Pagination if true.\n* `page` - Boolean. Shows Current page out of total pages if true.\n* `title` - String. Title for Table.\n* `search` - Boolean. Shows Searchbar if true.\n* `size` - Number Of Records that Shows in single page. You can \nOnle use 5,10,20,25,50.\n* `errormsg` - Error message.(Default is Error. . .)\n* `loadingmsg` - Loading message. (Default is Loading. . .)\n* `isLoading` - Boolean. Default is false\n* `sort` - Boolean. Default is  \n* `onRowClick` - Function. You can redirect to another page by onRowClick, you can call any function by onRowClick, You can also get Row Data by onRowClick using ({row =\u003e console.log(row)}).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiteshtagadiya%2Freact-responsive-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiteshtagadiya%2Freact-responsive-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiteshtagadiya%2Freact-responsive-data-table/lists"}