A simple sortable table with filter option and pagination
npm install react-filter-tablesA simple sortable table with filter option and pagination.
- Simple design
- Funnel icon allows to filter data
- Multiple filters can be applied at same time
- Funnel icon color changes on applying filter to indicate presence of filter
- Clear all filters button present ( clears all applied filters )
- Click anywhere on the column headder to sort it in alphabetical order
- Click anywhere on column headder to toggle sort in ascending and descending order
- Click on a row to get all details of that row ( can be used to integrate with API calls )
- Number of records shown per page configurable ( Default is 4 records per page )
- Pagination with left and right arrows to move one page and dropdown to move to specific page
- User specified inline styles and CSS classes can be applied by passing props
Run:
npm install react-filter-tables --save
Step 2: Import the module
Add following line to import the module:
import FilterTable from 'react-filter-tables';
Step 3: Use the module
To use the module, you must pass your data to the module.
Data is a JSON array of objects where each object represent a row of the table.
#### Example
``
import React from 'react';
import ReactDOM from 'react-dom';
import FilterTable from 'react-filter-tables'
let data = [
{
'Id': 1,
'type': 'test',
'name': 'alan',
'username': 'abcd123'
},
{
'Id': 2,
'type': 'xyz',
'name': 'diana',
'username': 'userd1'
},
{
'Id': 3,
'type': 'abc',
'name': 'tessa',
'username': 'tez45'
}
]
ReactDOM.render(
`
``
onClick = { ( rowObject ) => {
console.log( rowObject );
}}
recordsPerPage = { 8 }
style = {{ position:'absolute', minWidth: '50%' }},
classNames = {["your_css_class_1", "your_css_class_2"]} />
data = { [
{
id : 1,
name: 'alan'
},
{
id: 2,
name: 'diana'
}
]}|onClick = { (rowObject) => {
console.log(rowObject);
this.makeApiCall(rowObject.id);
}}|style = {{
position:'absolute',
top: '0',
left: '0'
}}|classNames = {[
"my-class-1",
"my-class-2"
]}|- Dependency on libraries :- fontawesome-actions and classnames removed