{"id":13683505,"url":"https://github.com/joaocarmo/react-smart-data-table","last_synced_at":"2025-04-13T04:59:07.745Z","repository":{"id":37251529,"uuid":"80382058","full_name":"joaocarmo/react-smart-data-table","owner":"joaocarmo","description":"A smart data table component for React meant to be configuration free","archived":false,"fork":false,"pushed_at":"2025-03-24T23:17:12.000Z","size":10009,"stargazers_count":88,"open_issues_count":10,"forks_count":37,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-04T05:51:55.128Z","etag":null,"topics":["data","data-table","data-visualization","plug-and-play","react"],"latest_commit_sha":null,"homepage":"https://joaocarmo.com/react-smart-data-table/","language":"TypeScript","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/joaocarmo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-30T00:07:32.000Z","updated_at":"2025-01-11T16:26:14.000Z","dependencies_parsed_at":"2024-06-18T21:12:03.632Z","dependency_job_id":"b64bbbbe-834f-4e44-90cb-4b1183b6e7ca","html_url":"https://github.com/joaocarmo/react-smart-data-table","commit_stats":{"total_commits":154,"total_committers":5,"mean_commits":30.8,"dds":"0.49350649350649356","last_synced_commit":"9fe30653d7dfe44c44a31daa75862e1b6ca7ac36"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaocarmo%2Freact-smart-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaocarmo%2Freact-smart-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaocarmo%2Freact-smart-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaocarmo%2Freact-smart-data-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joaocarmo","download_url":"https://codeload.github.com/joaocarmo/react-smart-data-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661706,"owners_count":21141450,"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","data-table","data-visualization","plug-and-play","react"],"created_at":"2024-08-02T13:02:13.627Z","updated_at":"2025-04-13T04:59:07.722Z","avatar_url":"https://github.com/joaocarmo.png","language":"TypeScript","readme":"# react-smart-data-table\n\n[![npm version](https://badge.fury.io/js/react-smart-data-table.svg)][npm]\n[![jest](https://jestjs.io/img/jest-badge.svg)][jest]\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)][contributor]\n![Workflow Status](https://github.com/joaocarmo/react-smart-data-table/workflows/Tests/badge.svg)\n\nA smart data table component for React.js meant to be configuration free,\nbatteries included.\n\n## About\n\nThis is meant to be a _zero configuration_ data table component for React.js\nin the spirit of _plug and play_.\n\nJust feed it an array of equal JSON objects and it will create a template free\ntable that can be customized easily with any framework (or custom CSS).\n\nIf you want more control over the data rendering process or don't need the\n_smarts_, check out\n[react-very-simple-data-table][react-very-simple-data-table].\n\n## Features\n\nIt currently supports:\n\n1. Humanized column names based on object keys\n1. Sortable columns\n   - Accepts a custom sort `compareFn` function\n1. Rows filtering / searchable\n1. Search term highlight in the results\n1. Column visibility toggles\n1. Automatic pagination\n1. Server-side/remote data\n1. Control over row clicks\n1. Smart data rendering\n   - URLs and E-Mail addresses rendered as the _href_ in an _anchor_ tag\n     `\u003ca /\u003e`\n   - _boolean_ value parsing to yes/no word\n   - Image URLs rendered as the _src_ for an image tag `\u003cimg /\u003e`\n1. Custom override if the default behavior is unwanted for some columns\n1. Custom components\n   - Paginator\n1. Control the order of the columns\n   - Using the above, it's also possible to select which columns to display\n\n## Installation\n\n```sh\nyarn add react-smart-data-table\n\n# or\n\nnpm install react-smart-data-table\n```\n\nThere is some very basic styling you can use to get started, but since `v0.8.0`\nyou need to import it specifically. You can also copy the file and use it as the\nbasis for your own theme.\n\n```js\n// Import basic styling\nimport 'react-smart-data-table/dist/react-smart-data-table.css'\n```\n\n## Context\n\nYou can access the SmartDataTable's internal context in your own component by\nusing the `useSmartDataTableContext` hook.\n\n**Note:** You must be within the context of `SmartDataTable`, e.g. passing a\ncustom component to `emptyTable`, `loading`, or `paginator`.\n\n```jsx\nimport { useSmartDataTableContext } from 'react-smart-data-table'\n\nconst MyComponent = () =\u003e {\n  const { columns, data } = useSmartDataTableContext()\n\n  return (\n    \u003cdiv\u003e\n      \u003ch3\u003eMy Component\u003c/h3\u003e\n      \u003cp\u003eColumns: {columns.length}\u003c/p\u003e\n      \u003cp\u003eRows: {data.length}\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Props\n\n| Name               | Default               | Type                  | Description                                                       |\n| :----------------- | :-------------------- | :-------------------- | :---------------------------------------------------------------- |\n| data               | []                    | {array\u0026#124;string}   | An array of plain objects (can be nested) or a URL                |\n| dataKey            | 'data'                | {string}              | The object key where the async data is available                  |\n| dataKeyResolver    | _null_                | {function}            | Supply a function to extract the data from the async response     |\n| dataRequestOptions | {}                    | {object}              | Fetch API options passed directly into the async request call     |\n| dataSampling       | 0                     | {number}              | **Percentage** of the data to sample before computing the headers |\n| dynamic            | false                 | {boolean}             | Use this if your column structure changes dynamically             |\n| emptyTable         | _null_                | {element}             | Pass a renderable object to render when there is no data          |\n| filterValue        | ''                    | {string}              | Filters all columns by its value                                  |\n| headers            | {}                    | {object}              | The object that overrides default column behavior                 |\n| hideUnordered      | false                 | {boolean}             | Hides all the columns not passed to _orderedHeaders_              |\n| loader             | _null_                | {element}             | Element to be rendered while fetching async data                  |\n| name               | 'reactsmartdatatable' | {string}              | The name for the table                                            |\n| onRowClick         | _undefined_           | {function}            | If present, it will execute on every row click                    |\n| orderedHeaders     | []                    | {array}               | An ordered array of the column keys                               |\n| paginator          | _elements_            | {element}             | Pass a renderable object to handle the table pagination           |\n| parseBool          | false                 | {boolean\u0026#124;object} | When true, boolean values will be converted to Yes/No             |\n| parseImg           | false                 | {boolean\u0026#124;object} | When true, image URLs will be rendered as an _img_ tag            |\n| perPage            | 0                     | {number}              | Paginates the results with the value as rows per page             |\n| sortable           | false                 | {boolean}             | Enables the columns of the table to be sortable                   |\n| withFooter         | false                 | {boolean}             | Copy the header to the footer                                     |\n| withHeader         | true                  | {boolean}             | Can be used to disable the rendering of column headers            |\n| withLinks          | false                 | {boolean}             | Converts e-mails and url addresses to links                       |\n| withToggles        | false                 | {boolean\u0026#124;object} | Enables the column visibility toggles                             |\n\n### emptyTable\n\n```jsx\n// Any renderable object can be passed\nconst emptyTable = \u003cdiv\u003eThere is no data available at the time.\u003c/div\u003e\n```\n\n### headers\n\n```js\n/*\n  Use the following structure to overwrite the default behavior for columns\n  Undefined column keys will present the default behavior\n    text:       Humanized text based on the column key name\n    invisible:  Columns are visible by default\n    sortable:   Columns are sortable by default\n    filterable: Columns are filterable by default\n    isImg:      Will force the render as an image, e.g. for dynamic URLs\n    transform:  Allows the custom rendering of the cells content\n                Should be a function and these are the arguments passed:\n                  (value, index, row)\n                The index is the position of the row as being rendered and\n                not the index of the row in the original data\n  Nested structures can be defined by a string-dot representation\n    'key1.key2.key3.[...].key99'\n*/\nconst headers = {\n  columnKey: {\n    text: 'Column 1',\n    invisible: false,\n    sortable: true,\n    filterable: true,\n  },\n  'nested.columnKey': {\n    text: 'Nested Column',\n    invisible: false,\n    sortable: (a, b) =\u003e b['nested.columnKey'] - a['nested.columnKey'],\n    filterable: true,\n  },\n  // If a dummy column is inserted into the data, it can be used to customize\n  // the table by allowing actions per row to be implemented, for example\n  tableActions: {\n    text: 'Actions',\n    invisible: false,\n    sortable: false,\n    filterable: false,\n    transform: (value, index, row) =\u003e {\n      // The following results should be identical\n      console.log(value, row.tableActions)\n      // Example of table actions: Delete row from data by row index\n      return \u003cbutton onClick={() =\u003e deleteRow(row)}\u003eDelete Row\u003c/button\u003e\n    },\n  },\n}\n```\n\n### onRowClick()\n\n```js\nconst onRowClick = (event, { rowData, rowIndex, tableData }) =\u003e {\n  // The following results should be identical\n  console.log(rowData, tableData[rowIndex])\n}\n```\n\n### paginator\n\nThe _CustomComponent_ passed down as a prop will be rendered with the following\nprops which can be used to perform all the necessary calculations and makes it\nfully compatible with Semantic UI's [Pagination][pagination]\ncomponent.\n\n```jsx\nconst CustomComponent = ({\n  activePage, totalPages, onPageChange,\n}) =\u003e (/* ... */)\n\n\u003cSmartDataTable\n  // ...\n  paginator={CustomComponent}\n/\u003e\n\n// To change the page, call the onPageChange function with the next activePage\n\n\u003cMyCustomElement\n  // ...\n  onClick={e =\u003e this.onPageChange(e, { activePage: nextActivePage })}\n/\u003e\n```\n\n### parseBool\n\n```js\n// Default\nconst parseBool = {\n  yesWord: 'Yes',\n  noWord: 'No',\n}\n```\n\n### parseImg\n\n```js\n// You can pass a regular style object that will be passed down to \u003cimg /\u003e\n// Or a Class Name\nconst parseImg = {\n  style: {\n    border: '1px solid #ddd',\n    borderRadius: '4px',\n    padding: '5px',\n    width: '150px',\n  },\n  className: 'my-custom-image-style',\n}\n```\n\n### orderedHeaders / hideUnordered\n\nIf you want to control the order of the columns, simply pass an array containing\nthe keys in the desired order. All the omitted headers will be appended\nafterwards unpredictably. Additionally, you can pass the _hideUnordered_ in\norder to render only the headers in _orderedHeaders_ and hide the remaining.\n\n```js\nconst hideUnordered = true\n\nconst orderedHeaders = [\n  'key1',\n  'key2.subkey3',\n  ...\n]\n```\n\n### withToggles\n\nYou can control the _Toggles_ by passing an object with the following structure:\n\n```ts\n// Default toggles enabled\nconst withToggles = true\n\n// Default toggles enabled with default select all\nconst withToggles = {\n  selectAll: true,\n}\n\n// Toggles with a custom locale\nconst withToggles = {\n  // The options to be passed as props to the `SelectAll` component\n  selectAll: {\n    // The text to be displayed in the Select All input\n    locale: {\n      // The default label for the `unchecked` state\n      selectAllWord: 'Select All',\n      // The default label for the `checked` state\n      unSelectAllWord: 'Unselect All',\n    },\n    // You should not need to use this, but it is here for completeness\n    handleToggleAll: (isChecked: boolean): void =\u003e {\n      // ...\n    },\n  },\n}\n```\n\n## Examples\n\n### Async data loading (fetch)\n\nBy passing a string to the `data` prop, the component will interpret it as an\nURL and try to load the data from that location using _[fetch][fetch]_. If a\nsuccessful request is returned, the data will be extracted from the response\nobject. By default, it will grab the `data` key from the response. If it's in a\ndifferent key, you can specify it with the `dataKey` prop. Just in case it's\nnot a first-level attribute, you can supply a custom function to locate the\ndata using the `dataKeyResolver` prop.\n\n`response from /api/v1/user`\n\n```json\n{\n  \"status\": \"success\",\n  \"message\": \"\",\n  \"users\": [{ \"id\": 0, \"other\": \"...\" }, { \"id\": 1, \"other\": \"...\" }, \"...\"]\n}\n```\n\n`response from /api/v1/post`\n\n```json\n{\n  \"status\": \"success\",\n  \"message\": \"\",\n  \"results\": {\n    \"posts\": [{ \"id\": 0, \"other\": \"...\" }, { \"id\": 1, \"other\": \"...\" }, \"...\"]\n  }\n}\n```\n\n`component`\n\n```jsx\n// Using `dataKey`\n\u003cSmartDataTable\n  data=\"/api/v1/user\"\n  dataKey=\"users\"\n  name=\"test-table\"\n/\u003e\n\n// Using `dataKeyResolver`\n\u003cSmartDataTable\n  data=\"/api/v1/post\"\n  dataKeyResolver={(response) =\u003e response.results.posts}\n  name=\"test-table\"\n/\u003e\n```\n\n### Simple sortable table (with Semantic UI)\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport faker from 'faker'\nimport SmartDataTable from 'react-smart-data-table'\n\nconst testData = []\nconst numResults = 100\n\nfor (let i = 0; i \u003c numResults; i++) {\n  testData.push({\n    _id: i,\n    fullName: faker.name.findName(),\n    'email.address': faker.internet.email(),\n    phone_number: faker.phone.phoneNumber(),\n    address: {\n      city: faker.address.city(),\n      state: faker.address.state(),\n      country: faker.address.country(),\n    },\n  })\n}\n\nReactDOM.render(\n  \u003cSmartDataTable\n    data={testData}\n    name=\"test-table\"\n    className=\"ui compact selectable table\"\n    sortable\n  /\u003e,\n  document.getElementById('app'),\n)\n```\n\n## Demos\n\nYou can try _react-smart-data-table_ with different UI libraries in the demo\npages below. You can experiment with different features as well.\n\n- [Semantic UI: All Features][semantic]\n\nTake a look at the full featured example's [source code][example-source].\n\nAlso, see it in full integration with a simple user/group management dashboard\napplication. Feel free to play around with it, it's built with hot reloading.\n\n- [Somewhere I Belong][somewhere-i-belong]\n\nIf you want to play around, check out this [codepen][codepen].\n\n## FAQ\n\nIf you're having trouble with _react-smart-data-table_, please check out the\nanswers below. Otherwise, feel free to open a new issue!\n\n- Check [this answer][hide-pagination] to see how to hide the pagination for an\n  empty table\n- Check [this answer][ssr-integration] if you're integrating with Server Side\n  Rendering (SSR)\n- Check [this answer][double-click] if you want to implement a double click\n  event on a row\n- Check [this answer][control-page] if you want to control the active page\n  manually (e.g., based on a URL parameter)\n- Check [this answer][column-selector] if you want to style individual columns\n  differently\n\n## Forking / Contributing\n\nIf you want to fork or [contribute][contribute], it's easy to test your changes.\nJust run the following development commands. The _start_ instruction will start\na development HTTP server in your computer accessible from your browser at the\naddress `http://localhost:3000/`.\n\n```sh\npnpm start\n```\n\n\u003c!-- References --\u003e\n\n[codepen]: https://codepen.io/joaocarmo/pen/oNBNZBO\n[column-selector]: https://github.com/joaocarmo/react-smart-data-table/issues/62#issuecomment-1002973644\n[contribute]: ./CONTRIBUTING.md\n[contributor]: ./CODE_OF_CONDUCT.md\n[control-page]: https://github.com/joaocarmo/react-smart-data-table/issues/60#issuecomment-974718595\n[double-click]: https://github.com/joaocarmo/react-smart-data-table/issues/59#issuecomment-969371513\n[example-source]: ./example/index.js\n[fetch]: https://fetch.spec.whatwg.org/\n[hide-pagination]: https://github.com/joaocarmo/react-smart-data-table/issues/42#issuecomment-828593880\n[jest]: https://github.com/facebook/jest\n[lgtm-alerts]: https://lgtm.com/projects/g/joaocarmo/react-smart-data-table/alerts/\n[lgtm-context]: https://lgtm.com/projects/g/joaocarmo/react-smart-data-table/context:javascript\n[npm]: https://badge.fury.io/js/react-smart-data-table\n[pagination]: https://react.semantic-ui.com/addons/pagination/\n[react-very-simple-data-table]: https://github.com/joaocarmo/react-very-simple-data-table\n[semantic]: http://joaocarmo.com/react-smart-data-table/\n[somewhere-i-belong]: https://github.com/joaocarmo/somewhere-i-belong\n[ssr-integration]: https://github.com/joaocarmo/react-smart-data-table/issues/50#issuecomment-963060887\n","funding_links":[],"categories":["TypeScript","Specific Libraries"],"sub_categories":["React"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaocarmo%2Freact-smart-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoaocarmo%2Freact-smart-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaocarmo%2Freact-smart-data-table/lists"}