Skip to content

Commit

Permalink
[#3]: Add instructions for filterable functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
amir-hadzic committed Nov 2, 2016
1 parent 4b2aa83 commit e90edc0
Showing 1 changed file with 41 additions and 0 deletions.
41 changes: 41 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,17 @@ Columns definitions have the following properties:
- _primaryKey_ defines if this column is the primary key
- _hidden_ defines if we should hide this column (useful if you don't want to show primary key column)
- _Component_ defines which component should be used to render cell contents
- _filterable_ defines if user should be able to filter rows by distinct values of this column
- _filterValues_ can be provided to define distinct filter values for this
column. If not provided, unique values will be extracted from provided data.
- _getFilterTitle_ is a function with `(value)` signature that can be provided to customize the filter title
- _getFilterLabel_ is a function with `(value)` signature that can be provided to customize the filter label
- _getFilterClassName_ is a function with `(value)` signature that can be provided to customize the filter css class

At least one column definition should have `primaryKey: true`.

Check out `stories/UsersTable.js` to see how these properties can be used.

## Advanced Usage

If you just need to show tabular data, with some actions for each row, you can
Expand Down Expand Up @@ -249,9 +257,42 @@ You can use the below actions to alter the state of the table:
- `tableDestroyState(tableName)` resets/destroys the current state of the
table. This can be used in `componentWillUnmount()` to reset the related
redux state.
- `tableSetFilter(tableName, filterValue)` sets the table filters where
`filterValue` is an array of filter objects.

You can import actions from the sematable module like this:

```javascript
import { tableDestroyState } from 'sematable';
```

## Filters

You can set the list of filters by passing `filterValue` to your sematable
component, or by using the `tableSetFilter` action. In either case, the
provided value should be an array of two types of objects:

- text filter defined simply as a string
- value filter defined as object with properties `key` and `value`, where
`key` is the column key you want to filter, and `value` is the value you
want to filter by.

For example:

```javascript
<UsersTable
data={users}
filterValue={[
'Bob',
{ key: 'confirmed', value: true },
]}
/>
```
Or with `tableSetFilter`:

```javascript
dispatch(tableSetFilter('usersTable', [
'Bob',
{ key: 'confirmed', value: true },
]));
```

0 comments on commit e90edc0

Please sign in to comment.