Skip to content

Commit 590afb3

Browse files
aaronschwartzaaronschwartz
committed
Add column filtering.
1 parent 4c11248 commit 590afb3

File tree

12 files changed

+519
-74
lines changed

12 files changed

+519
-74
lines changed

‎.storybook/config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import FunctionalRendering from '../stories/FunctionalRendering.js'
2424
import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
2525
import NoDataText from '../stories/NoDataText.js'
2626
import Footers from '../stories/Footers.js'
27+
import Filtering from '../stories/Filtering.js'
2728
//
2829
configure(() => {
2930
storiesOf('1. Docs')
@@ -53,4 +54,5 @@ configure(() => {
5354
.add('Custom Expander Position', CustomExpanderPosition)
5455
.add('Custom "No Data" Text', NoDataText)
5556
.add('Footers', Footers)
57+
.add('Custom Filtering', Filtering)
5658
}, module)

‎.storybook/fonts.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,7 @@ h1 {
1111
margin-bottom: 15px;
1212
margin-top: 5px;
1313
}
14+
15+
p {
16+
margin-bottom: 15px;
17+
}

‎README.md

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,9 @@ These are all of the available props (and their default values) for the main `<R
143143
collapseOnDataChange: true,
144144
freezeWhenExpanded: false,
145145
defaultSorting: [],
146+
showFilters: false,
147+
defaultFiltering: [],
148+
defaultFilterMethod: (filter, row) => (row[filter.id] == filter.value),
146149

147150
// Controlled State Overrides (see Fully Controlled Component section)
148151
page: undefined,
@@ -154,6 +157,7 @@ These are all of the available props (and their default values) for the main `<R
154157
onPageChange: undefined,
155158
onPageSizeChange: undefined,
156159
onSortingChange: undefined,
160+
onFilteringChange: undefined,
157161

158162
// Pivoting
159163
pivotBy: undefined,
@@ -184,6 +188,9 @@ These are all of the available props (and their default values) for the main `<R
184188
getTheadProps: () => ({}),
185189
getTheadTrProps: () => ({}),
186190
getTheadThProps: () => ({}),
191+
getTheadFilterProps: () => ({}),
192+
getTheadFilterTrProps: () => ({}),
193+
getTheadFilterThProps: () => ({}),
187194
getTbodyProps: () => ({}),
188195
getTrGroupProps: () => ({}),
189196
getTrProps: () => ({}),
@@ -215,7 +222,8 @@ These are all of the available props (and their default values) for the main `<R
215222
footer: undefined,
216223
footerClassName: '',
217224
footerStyle: {},
218-
getFooterProps: () => ({})
225+
getFooterProps: () => ({}),
226+
filterMethod: undefined
219227
},
220228

221229
// Text
@@ -292,8 +300,13 @@ Or just define them as props
292300
footer: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
293301
footerClassName: '', // Set the classname of the `td` element of the column's footer
294302
footerStyle: {}, // Set the style of the `td` element of the column's footer
295-
getFooterProps: (state, rowInfo, column, instance) => ({}) // a function that returns props to decorate the `td` element of the column's footer
303+
getFooterProps: (state, rowInfo, column, instance) => ({}) // A function that returns props to decorate the `td` element of the column's footer
296304

305+
// Filtering
306+
filterMethod: (filter, row, column) => {return true} // A function returning a boolean that specifies the filtering logic for the column
307+
// filter == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field]}
308+
// row == the row of data supplied to the table
309+
// column == the column that the filter is on
297310
}]
298311
```
299312

@@ -532,7 +545,7 @@ By adding a `SubComponent` props, you can easily add an expansion level to all r
532545

533546

534547
## Server-side Data
535-
If you want to handle pagination, and sorting on the server, `react-table` makes it easy on you.
548+
If you want to handle pagination, sorting, and filtering on the server, `react-table` makes it easy on you.
536549

537550
1. Feed React Table `data` from somewhere dynamic. eg. `state`, a redux store, etc...
538551
1. Add `manual` as a prop. This informs React Table that you'll be handling sorting and pagination server-side
@@ -555,7 +568,8 @@ If you want to handle pagination, and sorting on the server, `react-table` makes
555568
Axios.post('mysite.com/data', {
556569
page: state.page,
557570
pageSize: state.pageSize,
558-
sorting: state.sorting
571+
sorting: state.sorting,
572+
filtering: state.filtering
559573
})
560574
.then((res) => {
561575
// Update react-table
@@ -601,6 +615,7 @@ Here are the props and their corresponding callbacks that control the state of t
601615
onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data
602616
onSortingChange={(column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns
603617
onExpandRow={(index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`
618+
onFilteringChange={(column, event) => {...}} // Called when a user enters a value into a filter input field. The event is the onChange event of the input field.
604619
/>
605620
```
606621

‎src/defaultProps.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ export default {
2121
collapseOnDataChange: true,
2222
freezeWhenExpanded: false,
2323
defaultSorting: [],
24+
showFilters: false,
25+
defaultFiltering: [],
26+
defaultFilterMethod: (filter, row, column) => (row[filter.id] == filter.value),
2427

2528
// Controlled State Overrides
2629
// page: undefined,
@@ -32,6 +35,7 @@ export default {
3235
onPageChange: undefined,
3336
onPageSizeChange: undefined,
3437
onSortingChange: undefined,
38+
onFilteringChange: undefined,
3539

3640
// Pivoting
3741
pivotBy: undefined,
@@ -62,6 +66,9 @@ export default {
6266
getTheadProps: emptyObj,
6367
getTheadTrProps: emptyObj,
6468
getTheadThProps: emptyObj,
69+
getTheadFilterProps: emptyObj,
70+
getTheadFilterTrProps: emptyObj,
71+
getTheadFilterThProps: emptyObj,
6572
getTbodyProps: emptyObj,
6673
getTrGroupProps: emptyObj,
6774
getTrProps: emptyObj,
@@ -92,7 +99,8 @@ export default {
9299
footer: undefined,
93100
footerClassName: '',
94101
footerStyle: {},
95-
getFooterProps: emptyObj
102+
getFooterProps: emptyObj,
103+
filterMethod: undefined
96104
},
97105

98106
// Text
@@ -142,7 +150,7 @@ export default {
142150
{'-active': loading},
143151
className
144152
)}
145-
{...rest}
153+
{...rest}
146154
>
147155
<div className='-loading-inner'>
148156
{loadingText}

0 commit comments

Comments
 (0)