8000 Add support for custom filter functions · leetcode/reactable@ebfa8dd · GitHub
[go: up one dir, main page]
Skip to content

Commit ebfa8dd

Browse files
dis-aster-ousdis-aster-ous
committed
Add support for custom filter functions
1 parent ce4f988 commit ebfa8dd

File tree

6 files changed

+331
-22
lines changed

6 files changed

+331
-22
lines changed

‎README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -446,6 +446,32 @@ var table = ReactDOM.render(
446446
These can be useful if you want to roll your own filtering input field
447447
outside of Reactable.
448448

449+
You can also provide your own custom filtering functions:
450+
451+
```jsx
452+
<Table className="table" id="table" data={[
453+
{'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},
454+
{'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},
455+
{'State': 'Colorado',
456+
'Description': 'new description that shouldn\'t match filter',
457+
'Tag': 'old'},
458+
{'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},
459+
]}
460+
filterable={[
461+
{
462+
column: 'State',
463+
filterFunction: function(contents, filter) {
464+
// case-sensitive filtering
465+
return (contents.indexOf(filter) > -1);
466+
}
467+
},
468+
'Tag'
469+
]} />
470+
```
471+
472+
Your filter function must return a boolean. Refraining from specifying a custom
473+
filter function will default to case-insensitive filtering.
474+
449475
### Empty Data Sets
450476

451477
If the table is initialized without any `<Tr>`s or with an empty array for

‎build/reactable.js

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1136,6 +1136,38 @@ window.ReactDOM["default"] = window.ReactDOM;
11361136
this.tfoot = tfoot;
11371137

11381138
this.initializeSorts(props);
1139+
this.initializeFilters(props);
1140+
}
1141+
}, {
1142+
key: 'initializeFilters',
1143+
value: function initializeFilters() {
1144+
this._filterable = {};
1145+
// Transform filterable properties into a more friendly list
1146+
for (var i in this.props.filterable) {
1147+
var column = this.props.filterable[i];
1148+
var columnName = undefined,
1149+
filterFunction = undefined;
1150+
1151+
if (column instanceof Object) {
1152+
if (typeof column.column !== 'undefined') {
1153+
columnName = column.column;
1154+
} else {
1155+
console.warn('Filterable column specified without column name');
1156+
continue;
1157+
}
1158+
1159+
if (typeof column.filterFunction === 'function') {
1160+
filterFunction = column.filterFunction;
1161+
} else {
1162+
filterFunction = 'default';
1163+
}
1164+
} else {
1165+
columnName = column;
1166+
filterFunction = 'default';
1167+
}
1168+
1169+
this._filterable[columnName] = filterFunction;
1170+
}
11391171
}
11401172
}, {
11411173
key: 'initializeSorts',
@@ -1239,12 +1271,21 @@ window.ReactDOM["default"] = window.ReactDOM;
12391271
for (var i = 0; i < children.length; i++) {
12401272
var data = children[i].props.data;
12411273

1242-
for (var j = 0; j < this.props.filterable.length; j++) {
1243-
var filterColumn = this.props.filterable[j];
1244-
1245-
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(filter) > -1) {
1246-
matchedChildren.push(children[i]);
1247-
break;
1274+
for (var filterColumn in this._filterable) {
1275+
if (typeof data[filterColumn] !== 'undefined') {
1276+
// Default filter
1277+
if (typeof this._filterable[filterColumn] === 'undefined' || this._filterable[filterColumn] === 'default') {
1278+
if ((0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(filter) > -1) {
1279+
matchedChildren.push(children[i]);
1280+
break;
1281+
}
1282+
} else {
1283+
// Apply custom filter
1284+
if (this._filterable[filterColumn]((0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString(), filter)) {
1285+
matchedChildren.push(children[i]);
1286+
break;
1287+
}
1288+
}
12481289
}
12491290
}
12501291
}

0 commit comments

Comments
 (0)
0