From e90edc03f6f6dfcfa3a3e1c25e8900797db35991 Mon Sep 17 00:00:00 2001
From: Amir Hadzic <amir.hadzic@randomshouting.com>
Date: Wed, 2 Nov 2016 12:50:48 +0100
Subject: [PATCH] [#3]: Add instructions for filterable functionality

---
 README.md | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/README.md b/README.md
index 9dd1515..f084687 100644
--- a/README.md
+++ b/README.md
@@ -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
@@ -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 },
+]));
+```