https://github.com/stevesims/react-sort-data
A data sorting react component that uses render props
https://github.com/stevesims/react-sort-data
data-sorting react react-component react-sort-data render-props sorted-data
Last synced: 10 months ago
JSON representation
A data sorting react component that uses render props
- Host: GitHub
- URL: https://github.com/stevesims/react-sort-data
- Owner: stevesims
- Created: 2018-05-01T10:38:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-03T21:02:45.000Z (over 7 years ago)
- Last Synced: 2025-03-28T19:19:02.222Z (10 months ago)
- Topics: data-sorting, react, react-component, react-sort-data, render-props, sorted-data
- Language: JavaScript
- Size: 331 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# react-sort-data
A data sorting component that uses render props.
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
[build-badge]: https://img.shields.io/travis/stevesims/react-sort-data/master.svg
[build]: https://travis-ci.org/stevesims/react-sort-data
[npm-badge]: https://img.shields.io/npm/v/react-sort-data.svg
[npm]: https://www.npmjs.org/package/react-sort-data
[coveralls-badge]: https://coveralls.io/repos/github/stevesims/react-sort-data/badge.svg?branch=master
[coveralls]: https://coveralls.io/github/stevesims/react-sort-data?branch=master
Data 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`.
The component uses the render-props pattern so as to allow for maximum flexibility and control when rendering out sorted data.
## Usage
```sh
npm install react-sort-data --save
```
```js
import Sortable from 'react-sort-data';
const MyComponent = () => {
const andersonCharacters = [
{ name: 'Captain Scarlet', series: 'Captain Scarlet and the Mysterons', year: '1967' },
{ name: 'Captain Black', series: 'Captain Scarlet and the Mysterons', year: '1967' },
{ name: 'Brains', series: 'Thunderbirds', year: '1965' },
{ name: 'Lady Penelope', series: 'Thunderbirds', year: '1965' },
{ name: 'Scott Tracy', series: 'Thunderbirds', year: '1965' },
{ name: 'Joe McLaine', series: 'Joe 90', year: '1968' }
];
const fields = [
{ key: 'name', default: true },
{ key: 'series' },
{ key: 'year', reversed: true }
];
return (
{({ data, reversed, setSortField, sortField }) => (
{fields.map(({ key }) => {
const selected = (sortField === key);
return setSortField(key)}>
{selected && '> '}{key} {selected && (reversed ? '^' : 'v')}
;
})}
{data.map(row => (
{row.name}
{row.series}
{row.year}
))}
)}
);
};
```
## Contributors
- [Steve Sims](https://github.com/stevesims)