{"id":13481381,"url":"https://github.com/corjen/react-data-sort","last_synced_at":"2025-07-01T09:37:08.186Z","repository":{"id":27062310,"uuid":"111913015","full_name":"Corjen/react-data-sort","owner":"Corjen","description":"A React component to sort and paginate data","archived":false,"fork":false,"pushed_at":"2023-01-04T21:47:27.000Z","size":4087,"stargazers_count":27,"open_issues_count":34,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T18:12:16.919Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Corjen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-24T11:53:19.000Z","updated_at":"2025-06-07T13:20:14.000Z","dependencies_parsed_at":"2022-08-07T12:15:18.070Z","dependency_job_id":null,"html_url":"https://github.com/Corjen/react-data-sort","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/Corjen/react-data-sort","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Corjen%2Freact-data-sort","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Corjen%2Freact-data-sort/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Corjen%2Freact-data-sort/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Corjen%2Freact-data-sort/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Corjen","download_url":"https://codeload.github.com/Corjen/react-data-sort/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Corjen%2Freact-data-sort/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262937353,"owners_count":23387570,"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":[],"created_at":"2024-07-31T17:00:51.351Z","updated_at":"2025-07-01T09:37:08.151Z","avatar_url":"https://github.com/Corjen.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":["Data"],"readme":"# React data sort\n\nA simple react component that helps you sort and paginate a list of data.\n\n[![GitHub license](https://img.shields.io/github/license/Corjen/react-data-sort.svg)](https://github.com/Corjen/react-data-sort/blob/master/LICENSE.md)\n[![Build Status](https://travis-ci.org/Corjen/react-data-sort.svg?branch=master)](https://travis-ci.org/Corjen/react-data-sort)\n![](https://img.shields.io/badge/size-7.19%20kB-brightgreen.svg) ![](https://img.shields.io/badge/gzip%20size-2.02%20kB-brightgreen.svg)\n\n# The problem\n\nYou want to display a custom set of data in a table or list and want to be able to sort and/or paginate it. You also want to have freedom of\nstyling and a simple API.\n\n# This solution\n\nComponents with a [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) like [Downshift](downshift) and React Router's\n[Route](https://reacttraining.com/react-router/web/api/Route) are gaining popularity. The render prop pattern gives you maximum flexibility\nin the way you render and style your components because the render prop itself doens't render anything.\n\nI've made this component because I was looking for a React table component that would give me as much control as possible over rendering and\nstyling. I couldn't find it, so I decided to build something myself. This is my first open source React Component, any feedback or\ncontributions are very welcome!\n\n\u003e Note: If you need to render a really large dataset where performance is vital, something like\n\u003e [react-virtualized](https://github.com/bvaughn/react-virtualized) is probably a better fit.\n\n# Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Props](#props)\n* [Render prop function](#render-prop-function)\n* [Examples](#examples)\n* [Todo](#todo)\n* [License](#license)\n\n# Installation\n\nThis modules is distributed via [npm](https://www.npmjs.com/package/react-data-sort). You can install it with npm:\n\n```\nnpm install --save react-data-sort\n```\n\nThis package has `react` and `prop-types` as [peerDependencies](https://nodejs.org/en/blog/npm/peer-dependencies/). Make sure to install\nthem if you haven't.\n\n# Usage\n\n```javascript\nimport Datasort from 'react-data-sort'\n\nconst tableData = [{ id: 1, name: 'b', id: 2, name: 'c', id: 3, name: 'a' }]\n\nfunction App() {\n  return (\n    \u003cDatasort\n      data={tableData}\n      paginate\n      render={({ data }) =\u003e (\n        \u003ctable\u003e\n          \u003cthead\u003e\n            \u003ctr\u003e\n              \u003ctd\u003eId\u003c/td\u003e\n              \u003ctd\u003eName\u003c/td\u003e\n            \u003c/tr\u003e\n          \u003c/thead\u003e\n          \u003ctbody\u003e\n            {data.map(({ id, name }) =\u003e (\n              \u003ctr key={id}\u003e\n                \u003ctd\u003e{id}\u003c/td\u003e\n                \u003ctd\u003e{name}\u003c/td\u003e\n              \u003c/tr\u003e\n            ))}\n          \u003c/tbody\u003e\n        \u003c/table\u003e\n      )}\n    /\u003e\n  )\n}\n\nexport default App\n```\n\nBy default, it will return the data in the same order that you've given it. The above code will result in this table:\n\n| ID  | Name |\n| --- | ---- |\n| 1   | b    |\n| 2   | c    |\n| 3   | a    |\n\n# Props\n\n## data\n\n\u003e `array` | defaults to `[]` An array of data that you want to render\n\n## defaultDirection\n\n\u003e `string` | defaults to `desc` | can be `asc` or `desc` This is the direction in which the data is sorted by default.\n\n## defaultSortBy\n\n\u003e `string` | defaults to `null` | can be null or an object key in your data array. This is the key by which your data is sorted.\n\n## itemsPerPage\n\n\u003e `number` | defaults to `10` The number of items to show on one page. Only works if `paginate` prop is `true`.\n\n## paginate\n\n\u003e `boolean` | defaults to `false`\n\nEnables pagination functionality and slices your data to the current page.\n\n## searchInKeys\n\n\u003e `array` | defaults to the keys of the first item in `data`\n\nSets the keys to search in\n\n# Controlled vs Uncontrolled\n\nThe internal state manages `direction`, `sortBy`, `searchQuery` and `activePage`. In some cases, you want to control that state outside the component, for\nexample if you use `redux` or `mobx` to manage your state. You can set `direction`, `sortBy`, `searchQuery` and `active` as props, thus making that part of\nthe state 'controlled'.\n\n# Render Prop Function\n\nThe render prop expects a function and doesn't render anything. It's argument is an object, with the internal state and a couple of actions.\n\n```javascript\n\u003cDatasort\n      data={tableData}\n      paginate\n      render={({\n         data,\n         activePage,\n         pages,\n         sortBy,\n         searchQuery,\n         // etc..\n        }) =\u003e (\n        // Render jsx stuff here\n      )}\n    /\u003e\n```\n\n## actions\n\nYou can change the internal state with these actions.\n\n| property        | type                          | description                                            |\n| --------------- | ----------------------------- | ------------------------------------------------------ |\n| toggleDirection | `function()`                  | toggle the direction from `asc` to `desc` or viceversa |\n| setDirection    | `function(direction: string)` | set the direction to `asc` or `desc`                   |\n| prevPage        | `function()`                  | go to the previous page (only if `paginate` is true)   |\n| nextPage        | `function()`                  | go to the next page (only if `paginate` is true)       |\n| goToPage        | `function(index: number)`     | go to a specific page                                  |\n| setSortBy       | `function(key: string)`       | set the key to sort the data by                        |\n| reset           | `function()`                  | reset to the initial state                             |\n| search          | `function(query: string)`     | search for a query in given data                       |\n\n## state\n\nThese are the internal state values\n\n| property    | type              | description                                       |\n| ----------- | ----------------- | ------------------------------------------------- |\n| activePage  | `number`          | the current active page                           |\n| pages       | `number`          | the total amount of pages The current active page |\n| sortBy      | `string` / `null` | the current key where the data is sorted by       |\n| direction   | `string`          | the current direction where the data is sorted by |\n| searchQuery | `string`          | the current search query                          |\n\n# Examples\n\n* [Uncontrolled example](https://codesandbox.io/s/2zmrjm564r)\n* [Controlled example](https://codesandbox.io/s/4r08q2vx94)\n* [Without pagination](https://codesandbox.io/s/4rw4pvykzx)\n\n# TODO\n\n* UMD build\n* Add helpers for aria labels\n* Change the name to something fancier?\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorjen%2Freact-data-sort","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorjen%2Freact-data-sort","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorjen%2Freact-data-sort/lists"}