A simple react component that helps you sort and paginate a list of data.

You 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 styling and a simple API.

Components with a render prop like Downshift and React Router's Route are gaining popularity. The render prop pattern gives you maximum flexibility in the way you render and style your components because the render prop itself doens't render anything.

I'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 styling. I couldn't find it, so I decided to build something myself. This is my first open source React Component, any feedback or contributions are very welcome!

Note: If you need to render a really large dataset where performance is vital, something like react-virtualized is probably a better fit.

• Installation
• Usage
• Props
• Render prop function
• Examples
• Todo
• License

This modules is distributed via npm. You can install it with npm:

npm install --save react-data-sort

This package has react and prop-types as peerDependencies. Make sure to install them if you haven't.

import Datasort from 'react-data-sort'

const tableData = [{ id: 1, name: 'b', id: 2, name: 'c', id: 3, name: 'a' }]

function App() {
  return (
    <Datasort
      data={tableData}
      paginate
      render={({ data }) => (
        <table>
          <thead>
            <tr>
              <td>Id</td>
              <td>Name</td>
            </tr>
          </thead>
          <tbody>
            {data.map(({ id, name }) => (
              <tr key={id}>
                <td>{id}</td>
                <td>{name}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    />
  )
}

export default App

By default, it will return the data in the same order that you've given it. The above code will result in this table:

array | defaults to [] An array of data that you want to render

string | defaults to desc | can be asc or desc This is the direction in which the data is sorted by default.

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.

number | defaults to 10 The number of items to show on one page. Only works if paginate prop is true.

boolean | defaults to false

Enables pagination functionality and slices your data to the current page.

array | defaults to the keys of the first item in data

Sets the keys to search in

The internal state manages direction, sortBy, searchQuery and activePage. In some cases, you want to control that state outside the component, for example 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 the state 'controlled'.

The 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.

<Datasort
      data={tableData}
      paginate
      render={({
         data,
         activePage,
         pages,
         sortBy,
         searchQuery,
         // etc..
        }) => (
        // Render jsx stuff here
      )}
    />

You can change the internal state with these actions.

These are the internal state values

• Uncontrolled example
• Controlled example
• Without pagination

• UMD build
• Add helpers for aria labels
• Change the name to something fancier?

MIT