{"id":28391538,"url":"https://github.com/jtassin/react-responsive-table","last_synced_at":"2025-07-19T08:02:56.409Z","repository":{"id":57343603,"uuid":"64823809","full_name":"jtassin/react-responsive-table","owner":"jtassin","description":"A react component for building really responsive table","archived":false,"fork":false,"pushed_at":"2017-07-03T20:08:08.000Z","size":6970,"stargazers_count":6,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-31T20:10:36.233Z","etag":null,"topics":["lpz","material","material-design","material-ui","react","reactjs","responsive","responsive-table"],"latest_commit_sha":null,"homepage":"https://jtassin.github.io/react-responsive-table/","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/jtassin.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":"2016-08-03T07:08:25.000Z","updated_at":"2023-01-06T16:04:37.000Z","dependencies_parsed_at":"2022-09-12T07:00:39.373Z","dependency_job_id":null,"html_url":"https://github.com/jtassin/react-responsive-table","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/jtassin/react-responsive-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtassin%2Freact-responsive-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtassin%2Freact-responsive-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtassin%2Freact-responsive-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtassin%2Freact-responsive-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jtassin","download_url":"https://codeload.github.com/jtassin/react-responsive-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtassin%2Freact-responsive-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261955823,"owners_count":23235960,"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":["lpz","material","material-design","material-ui","react","reactjs","responsive","responsive-table"],"created_at":"2025-05-31T09:42:21.097Z","updated_at":"2025-06-25T21:30:58.691Z","avatar_url":"https://github.com/jtassin.png","language":"JavaScript","readme":"# react-responsive-table\n[![npm version](https://badge.fury.io/js/react-responsive-table.svg)](https://badge.fury.io/js/react-responsive-table) \n[![Build Status](https://travis-ci.org/jtassin/react-responsive-table.svg?branch=master)](https://travis-ci.org/jtassin/react-responsive-table)\n[![codecov](https://codecov.io/gh/jtassin/react-responsive-table/branch/master/graph/badge.svg)](https://codecov.io/gh/jtassin/react-responsive-table)\n[![Code Climate](https://codeclimate.com/github/jtassin/react-responsive-table/badges/gpa.svg)](https://codeclimate.com/github/jtassin/react-responsive-table)\n[![Dependency Status](https://www.versioneye.com/user/projects/57b4cdc22236f4002b96697b/badge.png)](https://www.versioneye.com/user/projects/57b4cdc22236f4002b96697b)\n\n\nA react component for building really responsive table.\nThe built tables can be used for form (hell yeah!) and can wrap to multiples lines on small devices.\n\nInspiration : https://hashnode.com/post/really-responsive-tables-using-css3-flexbox-cijzbxd8n00pwvm53sl4l42cx\n\n## Installation\n\n### With webpack\n```sh\nnpm i react-responsive-table --save\n```\n\n### With UMD\n\nYou will need also react (of course) and [react-style-proptype](https://github.com/brigand/react-style-proptype) (used to validate the style properties).\n```sh\nnpm i react, react-style-proptype, react-responsive-table --save\n```\n\n## Usage\nOnce installed, just require and use the components:\n```jsx\nimport React from `react`;\nimport { Table, Row, Cell } from 'react-responsive-table';\n\nReact.render(\u003cTable\u003e\n  \u003cRow\u003e\n     \u003cCell thead minWidthPx={100}\u003eHead-1-1\u003c/Cell\u003e\n     \u003cCell thead minWidthPx={100}\u003eHead-1-2\u003c/Cell\u003e\n  \u003c/Row\u003e\n  \u003cRow\u003e\n     \u003cCell minWidthPx={100}\u003eCol-1-1\u003c/Cell\u003e\n     \u003cCell minWidthPx={100}\u003eLong text for Col-1-2\u003c/Cell\u003e\n  \u003c/Row\u003e\n  \u003cRow\u003e\n     \u003cCell minWidthPx={100}\u003eCol-2-1\u003c/Cell\u003e\n     \u003cCell minWidthPx={100}\u003eCol-2-2\u003c/Cell\u003e\n  \u003c/Row\u003e\n  \u003cRow\u003e\n     \u003cCell minWidthPx={100}\u003eLong text for Col-3-1\u003c/Cell\u003e\n     \u003cCell minWidthPx={100}\u003eCol-3-2\u003c/Cell\u003e\n  \u003c/Row\u003e\n\u003c/Table\u003e, document.querySelector('#main'));\n```\n\n### Properties\n\n#### Table\n| Props        | Options           | Default  | Description |\n| ------------- |-------------| -----| -------- |\n| material | Boolean | false | if true, it apply [material-ui](https://github.com/callemall/material-ui) styles to the table|\n\n#### Row\n| Props        | Options           | Default  | Description |\n| ------------- |-------------| -----| -------- |\n| striped | Boolean | false | if true, it strip the color of the row acording to the pair/impair index|\n| index | Number | null | The row index (used by the striped fonctionality). It is supposed to be set automatically by the Table parent but, with redux-connect or other middle component you may have to set it manually. |\n| material | Boolean | false | if true, it apply [material-ui](https://github.com/callemall/material-ui) styles to the table. It is supposed to be set automatically by the Table parent but, with redux-connect or other middle component you may have to set it manually. |\n\n#### Cell\n| Props        | Options           | Default  | Description |\n| ------------- |-------------| -----| -------- |\n| header | Boolean | false | if true, it apply a table header style to this cell|\n| minWidthPx | Number | null | The minimum with in px of the Cell|\n| material | Boolean | false | if true, it apply [material-ui](https://github.com/callemall/material-ui) styles to the table. It is supposed to be set automatically by the Table parent but, with redux-connect or other middle component you may have to set it manually. |\n\n## Material design\n\nThis lib is designed to integrate with [material-ui](https://github.com/callemall/material-ui). \nIt uses natively the selected theme for every supported functionalities.\n\n## Build\n```sh\nnpm run build\n```\n\n## Tests\n\n```sh\nnpm test\n```\n\n## Development (`src`, `lib` and the build process)\n\n**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.\n\nTo build, watch and serve the examples (which will also watch the component source), run `npm start`. \n\n## Examples\n\nExamples are available here : https://jtassin.github.io/react-responsive-table/\n\n## Contributors\n\n[![Julien TASSIN](https://avatars0.githubusercontent.com/u/1771191?v=3\u0026s=144)](https://github.com/roylee0704/) |\n---|\n[Julien TASSIN](https://github.com/jtassin) |\n\n## License\n\nMIT, see [LICENSE](/LICENSE) for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjtassin%2Freact-responsive-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjtassin%2Freact-responsive-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjtassin%2Freact-responsive-table/lists"}