{"id":20393044,"url":"https://github.com/aichbauer/react-table-kit","last_synced_at":"2025-07-27T12:38:23.180Z","repository":{"id":57346150,"uuid":"130912022","full_name":"aichbauer/react-table-kit","owner":"aichbauer","description":"A react table component with custom components and support for sorting, searching, exporting the data...","archived":false,"fork":false,"pushed_at":"2019-02-06T16:53:30.000Z","size":874,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-17T16:03:36.894Z","etag":null,"topics":["component","csv","data","datagrid","datatable","export","grid","react","search","sort","table"],"latest_commit_sha":null,"homepage":null,"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/aichbauer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-04-24T20:48:03.000Z","updated_at":"2021-04-14T21:13:13.000Z","dependencies_parsed_at":"2022-09-17T22:50:33.118Z","dependency_job_id":null,"html_url":"https://github.com/aichbauer/react-table-kit","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/aichbauer/react-table-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-table-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-table-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-table-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-table-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aichbauer","download_url":"https://codeload.github.com/aichbauer/react-table-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aichbauer%2Freact-table-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266924948,"owners_count":24007300,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["component","csv","data","datagrid","datatable","export","grid","react","search","sort","table"],"created_at":"2024-11-15T03:47:07.755Z","updated_at":"2025-07-27T12:38:23.142Z","avatar_url":"https://github.com/aichbauer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-table-kit\n\n[![npm](https://img.shields.io/npm/v/react-table-kit.svg?style=flat-square)](https://www.npmjs.com/package/react-table-kit)\n[![Travis branch](https://img.shields.io/travis/aichbauer/react-table-kit/master.svg?style=flat-square)](https://travis-ci.org/aichbauer/react-table-kit)\n[![Codecov branch](https://img.shields.io/codecov/c/github/aichbauer/react-table-kit/master.svg?style=flat-square)](https://codecov.io/gh/aichbauer/react-table-kit)\n[![storybook](https://img.shields.io/badge/docs%20with-storybook-f1618c.svg?style=flat-square)](https://aichbauer.github.io/react-table-kit)\n\n\u003e A react table component with custom components support and functionality to sort, search, export data, ...\n\n## Table of Contents\n\n* [Documentation](https://aichbauer.github.io/react-table-kit)\n* [Why?](#why)\n* [Installation](#installation)\n* [Components](#components)\n* [Usage](#usage)\n* [License](#license)\n\n## Why?\n\nEvery react table component I found was using its own styling but you couldn't use it with a `css-in-js` library. I wanted to use my own components to style the table without relying on `className` and `css files`. So this library has most of the functionality of the common table components like [react-table]() or [react-bootstrap-table]() but without styling and leaving the option to pass your own components where the styling is up to you. Want to use plain `CSS`, or a `css-in-js library`, no problem, its up to you.\n\n## Installation\n\n```sh\n$ npm i react-table-kit -S\n```\n\nor\n\n```sh\n$ yarn add react-table-kit\n```\n\n## Components\n\nTake a look into the [usage section](#usage) for a detailed example.\n\n### Table\n\n\u003e Note: you can also use the default export.\n\nThis component renders a table wich has a lot of different functionality.\n\n**Functionality**:\n\n* **custom components**: pass you own components\n* **sort** the table by columns\n* **search** the table **columns**\n  * this column includes the searchphrase\n  * this column is exactly the searchphrase\n* **search** the complete **table**\n  * some column includes the searchphrase\n  * some column is exactly the searchphrase\n* **clickable cells**\n* **clickable rows**\n* **download** the table content as **CSV** formatted file\n\n#### Syntax\n\nRender a table.\n\n```js\nconst myTable = (props) =\u003e (\n  \u003cTable\n    buttonExportCSV={...}\n    columns={...}\n    data={...}\n    exportCSV={...}\n    inputColumnSearch={...}\n    inputTableSearch={...}\n    onClickCell={...}\n    onClickRow={...}\n    table={...}\n    tableSearch={...}\n    td={...}\n    th={...}\n    trBody={...}\n    trHead={...}\n  /\u003e\n);\n```\n\n#### Props\n\n* **buttonExportCSV**\n  * **Type**: element\n  * **Default**: `\u003cbutton value=\"Export CSV\" /\u003e`\n* **columns**\n  * **Type**: array of objects - `required`\n  * **Default**: `[]`\n* **data**\n  * **Type**: array of objects - `required`\n  * **Default**: `[]`\n* **exportCSV**\n  * **Type**: boolean\n  * **Default**: `false`\n* **inputColumnSearch**\n  * **Type**: element\n  * **Default**: `\u003cinput type=\"text\" placeholder=\"Search column\" /\u003e`\n* **inputTableSearch**\n  * **Type**: element\n  * **Default**: `\u003cinput type=\"text\" placeholder=\"Search table\" /\u003e`\n* **noDataMessage**\n  * **Type**: string\n  * **Default**: `'No data found'`\n* **onClickCell**\n  * **Type**: function\n  * **Default**: `(item) =\u003e item;`\n* **onClickRow**\n  * **Type**: function\n  * **Default**: `(item) =\u003e item;`\n* **table**\n  * **Type**: element\n  * **Default**: `\u003ctable /\u003e`\n* **tableSearch**\n  * **Type**: string\n  * **Default**: `''`\n* **td**\n  * **Type**: element\n  * **Default**: `\u003ctd /\u003e`\n* **th**\n  * **Type**: element\n  * **Default**: `\u003cth /\u003e`\n* **trBody**\n  * **Type**: element\n  * **Default**: `\u003ctr /\u003e`\n* **trHead**\n  * **Type**: element\n  * **Default**: `\u003ctr /\u003e`\n\n##### Required Props\n\nYou need at least data and columns to render a table.\n\n###### data\n\n`data` is an array of objects.\n\n* each object represents one row\n  * each entry in the object represents one cell in the table\n  * each object has the same keys\n  * each key represents a column name\n\nAn example of `data`.\n\n```js\nconst data = [\n  {\n    number: 1,\n    first: 'Mark',\n    last: 'Otto',\n    handle: '@mdo',\n  },\n  ...\n];\n```\n\n###### columns\n\n`columns` is an array of objects.\n\n* each object holds at least two keys\n  * **header**: the name of the column\n  * **accessor**: the way to access the value in the data object\n* can be extended by two optional keys\n  * **sort**: boolean\n  * **search**: `includes` or `exact`\n\nAn example of `columns`.\n\n```js\nconst columns = [\n  {\n    header: '#',\n    accessor: 'number',\n    search: 'exact',\n    sort: true,\n  },\n  {\n    header: 'First',\n    accessor: 'first',\n    search: 'exact',\n    sort: true,\n  },\n  {\n    header: 'Last',\n    accessor: 'last',\n    search: 'exact',\n    sort: true,\n  },\n  {\n    header: 'Handle',\n    accessor: 'handle',\n    search: 'exact',\n    sort: true,\n  },\n];\n```\n\n## Usage\n\nAn example how to use it. For more detailed information you can take a look at the [documentation](https://aichbauer.github.io/react-table-kit).\n\n```jsx\nimport React from 'react';\nimport { Table } from 'react-table-kit';\n\n// use your own components\nimport { Button } from 'styled-button-component';\nimport { FormControl } from 'styled-form-component';\nimport { Table as T, Tr } from 'styled-table-component';\n\nconst columns = [\n  {\n    header: '#',\n    accessor: 'number',\n    search: 'exact',\n    sort: true,\n  },\n  {\n    header: 'First',\n    accessor: 'first',\n    search: 'exact',\n    sort: true,\n  },\n  {\n    header: 'Last',\n    accessor: 'last',\n    search: 'exact',\n    sort: true,\n  },\n  {\n    header: 'Handle',\n    accessor: 'handle',\n    search: 'exact',\n    sort: true,\n  },\n];\n\nexport const data = [\n  {\n    number: 1,\n    first: 'mark',\n    last: 'otto',\n    handle: '@mdo',\n  },\n  ...\n]\n\nexport const myTable = (props) =\u003e (\n  \u003cTable\n    buttonExportCSV={\u003cButton success value=\"Export CSV\" /\u003e}\n    columns={columns}\n    data={data}\n    exportCSV={true}\n    inputColumnSearch={\u003cFormControl borderRadius=\"0\" sm type=\"text\" placeholder=\"Search column\" /\u003e}\n    inputTableSearch={\u003cFormControl borderRadius=\"0\" sm type=\"text\" placeholder=\"Search table\" /\u003e}\n    onClickCell={(item) =\u003e alert(`\"cellValue\": \"${item}\"`)}\n    onClickRow={(item) =\u003e alert(`\"rowValue\": ${JSON.stringify(item, null, 2)};`)}\n    table={\u003cT hover bordered /\u003e}\n    tableSearch=\"exact\"\n    trBody={\u003cTr /\u003e}\n  /\u003e\n);\n```\n\n## License\n\nMIT © Lukas Aichbauer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faichbauer%2Freact-table-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faichbauer%2Freact-table-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faichbauer%2Freact-table-kit/lists"}