Skip to content
This repository was archived by the owner on Jan 15, 2022. It is now read-only.

Commit 7ecfa5e

Browse files
committed
Allow to filter by column: value
This Branch improves the way filterBy workes, by allowing it to be set with and hash like {'Column': 'search query'} programatically. Another improvement, that still needs to be touched is the ability to do the same from the search box in a form of 'Column: search query' that will be split by the ':' and use each side as column to filter, and value.
1 parent 0acc184 commit 7ecfa5e

File tree

8 files changed

+453
-2389
lines changed

8 files changed

+453
-2389
lines changed

Gruntfile.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,4 +131,3 @@ module.exports = function(grunt) {
131131
grunt.registerTask('build', ['babel:common', 'buildBrowser']);
132132
grunt.registerTask('default', ['build', 'watch:build']);
133133
};
134-

build/reactable.js

Lines changed: 90 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -239,10 +239,20 @@ window.ReactDOM["default"] = window.ReactDOM;
239239
}, {
240240
key: 'render',
241241
value: function render() {
242+
var value = '';
243+
if (typeof this.props.value != 'string') {
244+
for (var key in this.props.value) {
245+
value += key + ': ' + this.props.value[key] + ', ';
246+
}
247+
value = value.slice(0, -2);
248+
} else {
249+
value = this.props.value;
250+
}
251+
value = value.trim();
242252
return _react['default'].createElement('input', { type: 'text',
243253
className: 'reactable-filter-input',
244254
placeholder: this.props.placeholder,
245-
value: this.props.value,
255+
value: value,
246256
onKeyUp: this.onChange.bind(this),
247257
onChange: this.onChange.bind(this) });
248258
}
@@ -1204,24 +1214,90 @@ window.ReactDOM["default"] = window.ReactDOM;
12041214
}, {
12051215
key: 'applyFilter',
12061216
value: function applyFilter(filter, children) {
1207-
// Helper function to apply filter text to a list of table rows
1208-
filter = filter.toLowerCase();
1209-
var matchedChildren = [];
1217+
if (typeof filter === 'string') {
1218+
// Helper function to apply filter text to a list of table rows
1219+
filter = filter.toLowerCase();
1220+
var matchedChildren = [];
12101221

1211-
for (var i = 0; i < children.length; i++) {
1212-
var data = children[i].props.data;
1222+
for (var i = 0; i < children.length; i++) {
1223+
var data = children[i].props.data;
12131224

1214-
for (var j = 0; j < this.props.filterable.length; j++) {
1215-
var filterColumn = this.props.filterable[j];
1225+
for (var j = 0; j < this.props.filterable.length; j++) {
1226+
var filterColumn = this.props.filterable[j];
12161227

1217-
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(filter) > -1) {
1218-
matchedChildren.push(children[i]);
1219-
break;
1228+
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(filter) > -1) {
1229+
matchedChildren.push(children[i]);
1230+
break;
1231+
}
12201232
}
12211233
}
1234+
1235+
return matchedChildren;
1236+
} else {
1237+
var _ret = (function () {
1238+
1239+
var filterCount = Object.keys(filter).length;
1240+
var matchedChildren = [];
1241+
1242+
for (var filterColumn in filter) {
1243+
var val = filter[filterColumn].toLowerCase();
1244+
for (var i = 0; i < children.length; i++) {
1245+
var data = children[i].props.data;
1246+
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(val) > -1) {
1247+
matchedChildren.push(children[i]);
1248+
}
1249+
}
1250+
}
1251+
1252+
if (filterCount > 1) {
1253+
var result = [];
1254+
return {
1255+
v: matchedChildren.map(function (children) {
1256+
var occurrences = matchedChildren.filter(function (value) {
1257+
return value.key === children.key;
1258+
}).length;
1259+
if (occurrences == filterCount) {
1260+
return children;
1261+
}
1262+
})
1263+
};
1264+
} else {
1265+
return {
1266+
v: matchedChildren
1267+
};
1268+
}
1269+
})();
1270+
1271+
if (typeof _ret === 'object') return _ret.v;
1272+
}
1273+
}
1274+
}, {
1275+
key: 'onFilter',
1276+
value: function onFilter(filters) {
1277+
if (typeof filters === 'string' && filters.indexOf(':') != -1) {
1278+
(function () {
1279+
var filterObj = {};
1280+
filters = filters.trim();
1281+
var col = '';
1282+
var val = '';
1283+
filters = filters.split(',');
1284+
1285+
filters.map(function (filter) {
1286+
filter = filter.split(':');
1287+
if (filter[0]) {
1288+
col = filter[0].trim();
1289+
}
1290+
if (filter[1]) {
1291+
val = filter[1].trim();
1292+
}
1293+
filterObj[col] = val;
1294+
});
1295+
1296+
filters = filterObj;
1297+
})();
12221298
}
12231299

1224-
return matchedChildren;
1300+
this.setState({ filter: filters });
12251301
}
12261302
}, {
12271303
key: 'sortByCurrentSort',
@@ -1284,7 +1360,7 @@ window.ReactDOM["default"] = window.ReactDOM;
12841360
this.setState({ currentSort: currentSort });
12851361
this.sortByCurrentSort();
12861362

1287-
if (this.props.onSort) {
1363+
if (typeof this.props.onSort === 'function') {
12881364
this.props.onSort(currentSort);
12891365
}
12901366
}
@@ -1410,9 +1486,7 @@ window.ReactDOM["default"] = window.ReactDOM;
14101486
props,
14111487
columns && columns.length > 0 ? _react['default'].createElement(_thead.Thead, { columns: columns,
14121488
filtering: filtering,
1413-
onFilter: function (filter) {
1414-
_this.setState({ filter: filter });
1415-
},
1489+
onFilter: this.onFilter.bind(this),
14161490
filterPlaceholder: this.props.filterPlaceholder,
14171491
currentFilter: this.state.filter,
14181492
sort: this.state.currentSort,

0 commit comments

Comments
 (0)