# react-table-sortable

> A React Component for creating sortable tables.

Latest version **1.0.1** (published 2017-12-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-table-sortable
pnpm add react-table-sortable
yarn add react-table-sortable
bun add react-table-sortable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-12-22 |
| First published | 2017-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | leizmonk, costolo, lisaveras |
| Keywords | react |

## Links

- npm: https://www.npmjs.com/package/react-table-sortable
- npm.io page: https://npm.io/package/react-table-sortable

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.0.0
- [date-fns](https://npm.io/package/date-fns.md) ^2.0.0-alpha.7
- [react-dom](https://npm.io/package/react-dom.md) ^16.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2017-12-22
- 1.0.0 — 2017-11-28

## README

### 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](https://github.com/phido-eng/react-sortable-table).


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

---
_Source: https://npm.io/package/react-table-sortable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._