{"id":13793406,"url":"https://github.com/jonespen/react-unsort","last_synced_at":"2025-05-12T20:30:59.038Z","repository":{"id":57346992,"uuid":"111321114","full_name":"jonespen/react-unsort","owner":"jonespen","description":"🔀 Render props for building accessible sortable stuff in React","archived":true,"fork":false,"pushed_at":"2018-01-09T09:54:53.000Z","size":541,"stargazers_count":20,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-24T11:42:14.436Z","etag":null,"topics":["a11y","flowtype","react"],"latest_commit_sha":null,"homepage":"https://jonespen.github.io/react-unsort","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/jonespen.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":"2017-11-19T18:29:18.000Z","updated_at":"2023-10-12T05:44:47.000Z","dependencies_parsed_at":"2022-09-13T02:22:53.234Z","dependency_job_id":null,"html_url":"https://github.com/jonespen/react-unsort","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonespen%2Freact-unsort","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonespen%2Freact-unsort/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonespen%2Freact-unsort/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonespen%2Freact-unsort/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonespen","download_url":"https://codeload.github.com/jonespen/react-unsort/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253816682,"owners_count":21968866,"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":["a11y","flowtype","react"],"created_at":"2024-08-03T23:00:20.681Z","updated_at":"2025-05-12T20:30:58.622Z","avatar_url":"https://github.com/jonespen.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# react-unsort\n\nRender prop component for accessible sorting.\n\n[![Build Status][build-badge]][build]\n[![Coverage][coverage-badge]][coverage]\n\n[build-badge]: https://img.shields.io/travis/jonespen/react-unsort/master.svg?style=flat-square\n[build]: https://travis-ci.org/jonespen/react-unsort\n[coverage-badge]: https://img.shields.io/codecov/c/github/jonespen/react-unsort.svg?style=flat-square\n[coverage]: https://codecov.io/github/jonespen/react-unsort\n\n## The problem\n\nYou want to sort something in react (e.g. a list or some table rows), and have\nfull control over styling.\n\n## This solution\n\nThis follows the patterns in [downshift](https://github.com/paypal/downshift) to\nexpose an API that renders nothing and simply encapsulates the logic of a\nsorting component. Note that it doesn't do any actual sorting, only setup aria, keyboard handling and handle sort directons for you.\n\n## Installation\n\n```sh\nnpm install react-unsort\n```\n\n\u003e This package also depends on react. Please make sure you have that installed\n\u003e as well.\n\n## Usage\n\nTodo: fill out this with props and stuff\n\n```js\n\u003cUnsort\n  {...props}\n  render={({ getSortProps, sortKey, sortDirection }) =\u003e {\n    return (\n      \u003ctable\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth {...getSortProps(\"name\")}\u003e\n              Name \u003cspan\u003e{sortKey === \"name\" \u0026\u0026 sortDirection}\u003c/span\u003e\n            \u003c/th\u003e\n            \u003cth {...getSortProps(\"age\")}\u003e\n              Age \u003cspan\u003e{sortKey === \"age\" \u0026\u0026 sortDirection}\u003c/span\u003e\n            \u003c/th\u003e\n            \u003cth\u003eCountry (not sortable)\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          {rows.map(row =\u003e {\n            return (\n              \u003ctr key={row.id}\u003e\n                \u003ctd\u003e{row.name}\u003c/td\u003e\n                \u003ctd\u003e{row.age}\u003c/td\u003e\n                \u003ctd\u003e{row.country}\u003c/td\u003e\n              \u003c/tr\u003e\n            );\n          })}\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    );\n  }}\n/\u003e\n```\n\n## Props\n\n### `render:(RenderProps) =\u003e React.Node`\nThis is where you render whatever you want to based on the state of react-unsort.\n\nGets the following props:\n```\ngetSortProps: (key: string) =\u003e SortProps\nsortKey: ?string\nsortDirection: ?SortDirection\n```\n\n### `onSort:({ sortKey: ?string, sortDirection: \"asc\" | \"desc\" | null }) =\u003e void`\nCalled when the element with `getSortProps` applied is clicked or enter key is pressed.\n\n## Motivation\n\nThere are [other, more advanced solutions](https://reactabular.js.org/) to this\nproblem, but I found them way to bloated and hard to style, especially using\nstyled-components.\n\n## Credits\n\nThanks to [Kent C. Dodds](https://github.com/kentcdodds/) for his work on\nDownshift, which greatly inspired this lib.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonespen%2Freact-unsort","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonespen%2Freact-unsort","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonespen%2Freact-unsort/lists"}