{"id":16514163,"url":"https://github.com/stevesims/react-sort-data","last_synced_at":"2025-04-04T19:15:26.030Z","repository":{"id":57345068,"uuid":"131701612","full_name":"stevesims/react-sort-data","owner":"stevesims","description":"A data sorting react component that uses render props","archived":false,"fork":false,"pushed_at":"2018-05-03T21:02:45.000Z","size":339,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T19:19:02.222Z","etag":null,"topics":["data-sorting","react","react-component","react-sort-data","render-props","sorted-data"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stevesims.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-01T10:38:06.000Z","updated_at":"2024-04-09T18:02:02.000Z","dependencies_parsed_at":"2022-09-17T13:51:38.773Z","dependency_job_id":null,"html_url":"https://github.com/stevesims/react-sort-data","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevesims%2Freact-sort-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevesims%2Freact-sort-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevesims%2Freact-sort-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevesims%2Freact-sort-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevesims","download_url":"https://codeload.github.com/stevesims/react-sort-data/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234930,"owners_count":20905854,"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-sorting","react","react-component","react-sort-data","render-props","sorted-data"],"created_at":"2024-10-11T16:11:39.312Z","updated_at":"2025-04-04T19:15:25.984Z","avatar_url":"https://github.com/stevesims.png","language":"JavaScript","readme":"# react-sort-data\n\nA data sorting component that uses render props.\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n\n[build-badge]: https://img.shields.io/travis/stevesims/react-sort-data/master.svg\n[build]: https://travis-ci.org/stevesims/react-sort-data\n\n[npm-badge]: https://img.shields.io/npm/v/react-sort-data.svg\n[npm]: https://www.npmjs.org/package/react-sort-data\n\n[coveralls-badge]: https://coveralls.io/repos/github/stevesims/react-sort-data/badge.svg?branch=master\n[coveralls]: https://coveralls.io/github/stevesims/react-sort-data?branch=master\n\nData sorting by this component intended primarily for sorting arrays of objects using string values of given keys.  Provide the component with an array of `data` objects, and an array of `field` definitions (with one indicated as being the `default`) and you'll get back a sorted `data` array.  A field definition may also contain a `sort` function, which should take a `reversed` argument and return back a function that can be used with `Array.sort`.\n\nThe component uses the render-props pattern so as to allow for maximum flexibility and control when rendering out sorted data.\n\n## Usage\n\n```sh\nnpm install react-sort-data --save\n```\n\n```js\nimport Sortable from 'react-sort-data';\n\nconst MyComponent = () =\u003e {\n  const andersonCharacters = [\n    { name: 'Captain Scarlet', series: 'Captain Scarlet and the Mysterons', year: '1967' },\n    { name: 'Captain Black', series: 'Captain Scarlet and the Mysterons', year: '1967' },\n    { name: 'Brains', series: 'Thunderbirds', year: '1965' },\n    { name: 'Lady Penelope', series: 'Thunderbirds', year: '1965' },\n    { name: 'Scott Tracy', series: 'Thunderbirds', year: '1965' },\n    { name: 'Joe McLaine', series: 'Joe 90', year: '1968' }\n  ];\n  const fields = [\n    { key: 'name', default: true },\n    { key: 'series' },\n    { key: 'year', reversed: true }\n  ];\n\n  return (\n    \u003cSortable data={andersonCharacters} fields={fields}\u003e\n      {({ data, reversed, setSortField, sortField }) =\u003e (\n        \u003ctable\u003e\n          \u003cthead\u003e\n            \u003ctr\u003e\n              {fields.map(({ key }) =\u003e {\n                const selected = (sortField === key);\n                return \u003cth key={key} onClick={() =\u003e setSortField(key)}\u003e\n                  {selected \u0026\u0026 '\u003e '}{key} {selected \u0026\u0026 (reversed ? '^' : 'v')}\n                \u003c/th\u003e;\n              })}\n            \u003c/tr\u003e\n          \u003c/thead\u003e\n          \u003ctbody\u003e\n            {data.map(row =\u003e (\n              \u003ctr key={row.name}\u003e\n                \u003ctd\u003e{row.name}\u003c/td\u003e\n                \u003ctd\u003e{row.series}\u003c/td\u003e\n                \u003ctd\u003e{row.year}\u003c/td\u003e\n              \u003c/tr\u003e\n            ))}\n          \u003c/tbody\u003e\n        \u003c/table\u003e\n      )}\n    \u003c/Sortable\u003e\n  );\n};\n```\n\n## Contributors\n\n- [Steve Sims](https://github.com/stevesims)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevesims%2Freact-sort-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevesims%2Freact-sort-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevesims%2Freact-sort-data/lists"}