# table-filter-multiselect

## Install
You need to have react and react-dom as dependencies in your project.

1. With [npm](https://npmjs.org/) installed, run

```
$ npm install table-filter-multiselect --save
```

2. At this point you can import table-filter-multiselect and its styles in your application as follows:

```js
import TableFilterMultiselect from 'table-filter-multiselect';

// Be sure to include styles at some point, probably during your bootstraping
// In JS
import table-filter-multiselect/lib/styles.css;

// In SCSS
@import "path-to-node_modules/table-filter-multiselect/lib/styles.css";

// Or directly import css
<link href="path-to-table-filter-multiselect/lib/styles.css" rel="stylesheet" />

```

## Usage

1. Wrap header columns (th / td) with TableFilterMultiselect as shown below.
```
<TableFilterMultiselect 
  rows={data} 
  onFilterUpdate={this._filterUpdated}>
  <th filterkey="name">
    Name
  </th>
  <th filterkey="season">
    Season
  </th>
  <th filterkey="number">
    Number
  </th>
</TableFilterMultiselect>
```
Required Props on TableFilterMultiselect

rows - Initial Array of Items

onFilterUpdate - Function called with updated filtered data when filters are added/removed. This function is used to show updated data by your application. Ex:

```
filterUpdated = (newData, filterConfiguration) => {
		this.setState({
			"upddatedData": newData
		});
	}
```
```
Arguments Detail:
newData - Filtered Data to be used to show on UI
filterConfiguration - Current filters configuration.
```
**filterConfiguration** can be saved and be passed as prop(initialFilters) to **TableFilterMultiselect** to maintain filter state while initializing the component.(In case user navigates away and comes back etc.)

Required Props on th/td (Header columns)

filterkey - The key by which that column is to be filtered(key as present in rows data)

Only the Columns with "filterkey" prop present will be considered for filtering.

## Reset Items after Initialization

If you want to reset Items after component mount. Make a reference to **TableFilterMultiselect** node and call **reset** method as shown below.

```
<TableFilterMultiselect 
  rows={data} 
  onFilterUpdate={this._filterUpdated}
  initialFilters={this.state.filterConfiguration}
  ref={ (node) => {this.tableFilterNode = node;}>
  
this.tableFilterNode.reset(newData, resetFilters);
```

```
Arguments Detail:
newData - Data to reset
resetFilters(Default: true) - Boolean tells component to maintain/reset existing filters
```
## API

### Properties

#### TableFilterMultiselect

Name | Type | Default | Required | Description 
:--- | :--- | :------ | :------- | :----------
rows | array | | true | Items for the Filter
onFilterUpdate | function(updatedData, filterConfiguration) | | true | Function called with filtered data and updated filter configuration
rowClass | string | | false | Any additional class to be added to table row contaning header columns
initialFilters | Array | | false | Initial Filter configuration to be applied. Configuration is received as second argument for **onFilterUpdate** function

#### TableFilterMultiselect Ref Methods

Name | Type | Description 
:--- | :--- | :----------
reset | function(items, resetFilters=true) | Function called to reset items after component has been mounted. You can choose to either reset current filters or not.


#### Cloumn Headers(td/th)

Name | Type | Default | Required | Description 
:--- | :--- | :------ | :------- | :----------
filterkey | string | | false | Key by which the Column should be filtered(Key as present in single Item)
itemDisplayValueFunc | function(itemValue) | | false | Optional Function that returns the Value that is displayed in the filter list for each item(Default is the item value - Item[key])
itemSortValueFunc | function(itemValue) | | false | Optional Function that returns the Value that is used while sorting (Default is the item value - Item[key])
alignleft | boolean | false | false | Decides while side filter list should be aligned w.r.t Column
caseSensitive | boolean | false | false | Case Sensitivity during sort
showSearch | boolean | true | false | Display/Hide the search input

## License

MIT