REACT SORTABLE TABLE
react-sortable-table is a react component for displaying data in a sortable table.
Features
- Pass in your custom sorting functions or use built in sorting functions.
- Use different sorting functions for different table headers.
- Handle onClick actions for headers and rows.
- Render JSX elements in your table.
Usage
To import the table component:
import { SortableTable } from 'react-sortable-table';
To use the CSS included with the package if you're using Webpack with a CSS loader:
import 'react-sortable-table/dist/style.css';
If you're not using Webpack with a CSS loader, you can create a CSS file containing:
require.resolve('react-sortable-table/dist/style.css')
You may also use your own styles. View the table JSX to see classnames or copy the included css file and edit to your needs.
Some data formatters are also included in the package:
import { formatters } from 'react-sortable-table';
These formatters include:
usdFormat() : format Numbers into usd.
dateFormat() : format strings for dates into Date objects
If you wish to use these included formatters, check out /src/utils/formatters.js to learn about these functions. The npm package will not include this folder and but it is includede in the project repo on github.
Props
The component accepts the following props:
Required:
rowData #array of objects of row data.
headers #array of object of header data.
handleRowClick #function to run when someone clicks on a row.
tableReset #function to run when the table mounts / dismounts.
Optional:
sortedBy: #string to denote what header data should be sorted by
sortedAscending: #boolean to denote initital sorting type of data
sortingFunctions: #object of required sorting functions
onHeaderClick: #function to run when someone clicks on a header
onHeaderClickTrigger: #string for determining conditions for onHeaderClick
The rowData and headers props require spefific formatting. Please view the example usage of this package contained in the example folder.
Specifically view the ordersTransformData() and getOrdersHeaders() functions in example/tableDataFormatter.js. The returns of these functions should show you how to format your rowData and headers props.
Example
To view an example of react-sortable-table:
npm run build-example
This will required a global install of webpack. If you encounter an error regarding webpack, you should probably:
npm install -g webpack
Once the example is built, open up index.html in the example folder.