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

Commit 2cfcbe6

Browse files
jpserrajpserra
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 2cfcbe6

File tree

10 files changed

+599
-2392
lines changed

10 files changed

+599
-2392
lines changed

‎Gruntfile.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ module.exports = function(grunt) {
3535
'tmp/reactable/lib/filter_props_from.js': 'src/reactable/lib/filter_props_from.jsx',
3636
'tmp/reactable/lib/extract_data_from.js': 'src/reactable/lib/extract_data_from.jsx',
3737
'tmp/reactable/lib/is_react_component.js': 'src/reactable/lib/is_react_component.jsx',
38+
'tmp/reactable/lib/array_intersect.js': 'src/reactable/lib/array_intersect.jsx',
3839
'tmp/reactable/lib/stringable.js': 'src/reactable/lib/stringable.jsx',
3940
'tmp/reactable/filterer.js': 'src/reactable/filterer.jsx',
4041
'tmp/reactable/sort.js': 'src/reactable/sort.jsx',
@@ -59,6 +60,7 @@ module.exports = function(grunt) {
5960
'lib/reactable/lib/filter_props_from.js': 'src/reactable/lib/filter_props_from.jsx',
6061
'lib/reactable/lib/extract_data_from.js': 'src/reactable/lib/extract_data_from.jsx',
6162
'lib/reactable/lib/is_react_component.js': 'src/reactable/lib/is_react_component.jsx',
63+
'lib/reactable/lib/array_intersect.js': 'src/reactable/lib/array_intersect.jsx',
6264
'lib/reactable/lib/stringable.js': 'src/reactable/lib/stringable.jsx',
6365
'lib/reactable/filterer.js': 'src/reactable/filterer.jsx',
6466
'lib/reactable/sort.js': 'src/reactable/sort.jsx',
@@ -82,6 +84,7 @@ module.exports = function(grunt) {
8284
dist: {
8385
src: [
8486
'tmp/reactable/lib/filter_props_from.js',
87+
'tmp/reactable/lib/array_intersect.js',
8588
'tmp/reactable/lib/to_array.js',
8689
'tmp/reactable/lib/stringable.js',
8790
'tmp/reactable/lib/extract_data_from.js',
@@ -131,4 +134,3 @@ module.exports = function(grunt) {
131134
grunt.registerTask('build', ['babel:common', 'buildBrowser']);
132135
grunt.registerTask('default', ['build', 'watch:build']);
133136
};
134-

‎build/reactable.js

Lines changed: 153 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,65 @@ window.ReactDOM["default"] = window.ReactDOM;
4242
}
4343
});
4444

45+
(function (global, factory) {
46+
if (typeof define === "function" && define.amd) {
47+
define(["exports"], factory);
48+
} else if (typeof exports !== "undefined") {
49+
factory(exports);
50+
} else {
51+
var mod = {
52+
exports: {}
53+
};
54+
factory(mod.exports);
55+
global.array_intersect = mod.exports;
56+
}
57+
})(this, function (exports) {
58+
"use strict";
59+
60+
exports.array_intersect = array_intersect;
61+
62+
function array_intersect() {
63+
var i,
64+
all,
65+
shortest,
66+
nShortest,
67+
n,
68+
len,
69+
ret = [],
70+
obj = {},
71+
nOthers;
72+
nOthers = arguments.length - 1;
73+
nShortest = arguments[0].length;
74+
shortest = 0;
75+
for (i = 0; i <= nOthers; i++) {
76+
n = arguments[i].length;
77+
if (n < nShortest) {
78+
shortest = i;
79+
nShortest = n;
80+
}
81+
}
82+
83+
for (i = 0; i <= nOthers; i++) {
84+
n = i === shortest ? 0 : i || shortest; //Read the shortest array first. Read the first array instead of the shortest
85+
len = arguments[n].length;
86+
for (var j = 0; j < len; j++) {
87+
var elem = arguments[n][j];
88+
if (obj[elem] === i - 1) {
89+
if (i === nOthers) {
90+
ret.push(elem);
91+
obj[elem] = 0;
92+
} else {
93+
obj[elem] = i;
94+
}
95+
} else if (i === 0) {
96+
obj[elem] = 0;
97+
}
98+
}
99+
}
100+
return ret;
101+
}
102+
});
103+
45104
(function (global, factory) {
46105
if (typeof define === "function" && define.amd) {
47106
define(["exports"], factory);
@@ -239,10 +298,20 @@ window.ReactDOM["default"] = window.ReactDOM;
239298
}, {
240299
key: 'render',
241300
value: function render() {
301+
var value = '';
302+
if (typeof this.props.value != 'string') {
303+
for (var key in this.props.value) {
304+
value += key + ': ' + this.props.value[key] + ', ';
305+
}
306+
value = value.slice(0, -2);
307+
} else {
308+
value = this.props.value;
309+
}
310+
value = value.trim();
242311
return _react['default'].createElement('input', { type: 'text',
243312
className: 'reactable-filter-input',
244313
placeholder: this.props.placeholder,
245-
value: this.props.value,
314+
value: value,
246315
onKeyUp: this.onChange.bind(this),
247316
onChange: this.onChange.bind(this) });
248317
}
@@ -960,17 +1029,17 @@ window.ReactDOM["default"] = window.ReactDOM;
9601029

9611030
(function (global, factory) {
9621031
if (typeof define === 'function' && define.amd) {
963-
define(['exports', 'react', './lib/filter_props_from', './lib/extract_data_from', './unsafe', './thead', './th', './tr', './tfoot', './paginator'], factory);
1032+
define(['exports', 'react', './lib/filter_props_from', './lib/extract_data_from', './lib/array_intersect', './unsafe', './thead', './th', './tr', './tfoot', './paginator'], factory);
9641033
} else if (typeof exports !== 'undefined') {
965-
factory(exports, require('react'), require('./lib/filter_props_from'), require('./lib/extract_data_from'), require('./unsafe'), require('./thead'), require('./th'), require('./tr'), require('./tfoot'), require('./paginator'));
1034+
factory(exports, require('react'), require('./lib/filter_props_from'), require('./lib/extract_data_from'), require('./lib/array_intersect'), require('./unsafe'), require('./thead'), require('./th'), require('./tr'), require('./tfoot'), require('./paginator'));
9661035
} else {
9671036
var mod = {
9681037
exports: {}
9691038
};
970-
factory(mod.exports, global.React, global.filter_props_from, global.extract_data_from, global.unsafe, global.thead, global.th, global.tr, global.tfoot, global.paginator);
1039+
factory(mod.exports, global.React, global.filter_props_from, global.extract_data_from, global.array_intersect, global.unsafe, global.thead, global.th, global.tr, global.tfoot, global.paginator);
9711040
global.table = mod.exports;
9721041
}
973-
})(this, function (exports, _react, _libFilter_props_from, _libExtract_data_from, _unsafe, _thead, _th, _tr, _tfoot, _paginator) {
1042+
})(this, function (exports, _react, _libFilter_props_from, _libExtract_data_from, _libArray_intersect, _unsafe, _thead, _th, _tr, _tfoot, _paginator) {
9741043
'use strict';
9751044

9761045
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -1204,24 +1273,90 @@ window.ReactDOM["default"] = window.ReactDOM;
12041273
}, {
12051274
key: 'applyFilter',
12061275
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 = [];
1276+
if (typeof filter === 'string') {
1277+
// Helper function to apply filter text to a list of table rows
1278+
filter = filter.toLowerCase();
1279+
var matchedChildren = [];
12101280

1211-
for (var i = 0; i < children.length; i++) {
1212-
var data = children[i].props.data;
1281+
for (var i = 0; i < children.length; i++) {
1282+
var data = children[i].props.data;
12131283

1214-
for (var j = 0; j < this.props.filterable.length; j++) {
1215-
var filterColumn = this.props.filterable[j];
1284+
for (var j = 0; j < this.props.filterable.length; j++) {
1285+
var filterColumn = this.props.filterable[j];
12161286

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;
1287+
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(filter) > -1) {
1288+
matchedChildren.push(children[i]);
1289+
break;
1290+
}
12201291
}
12211292
}
1293+
1294+
return matchedChildren;
1295+
} else {
1296+
var _ret = (function () {
1297+
1298+
var filterCount = Object.keys(filter).length;
1299+
var matchedChildren = [];
1300+
1301+
for (var filterColumn in filter) {
1302+
var val = filter[filterColumn];
1303+
for (var i = 0; i < children.length; i++) {
1304+
var data = children[i].props.data;
1305+
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(val) > -1) {
1306+
matchedChildren.push(children[i]);
1307+
}
1308+
}
1309+
}
1310+
1311+
if (filterCount > 1) {
1312+
var result = [];
1313+
return {
1314+
v: matchedChildren.map(function (children) {
1315+
var occurrences = matchedChildren.filter(function (value) {
1316+
return value.key === children.key;
1317+
}).length;
1318+
if (occurrences == filterCount) {
1319+
return children;
1320+
}
1321+
})
1322+
};
1323+
} else {
1324+
return {
1325+
v: matchedChildren
1326+
};
1327+
}
1328+
})();
1329+
1330+
if (typeof _ret === 'object') return _ret.v;
1331+
}
1332+
}
1333+
}, {
1334+
key: 'onFilter',
1335+
value: function onFilter(filters) {
1336+
if (typeof filters === 'string' && filters.indexOf(':') != -1) {
1337+
(function () {
1338+
var filterObj = {};
1339+
filters = filters.trim();
1340+
var col = '';
1341+
var val = '';
1342+
filters = filters.split(',');
1343+
1344+
filters.map(function (filter) {
1345+
filter = filter.split(':');
1346+
if (filter[0]) {
1347+
col = filter[0].trim();
1348+
}
1349+
if (filter[1]) {
1350+
val = filter[1].trim();
1351+
}
1352+
filterObj[col] = val;
1353+
});
1354+
1355+
filters = filterObj;
1356+
})();
12221357
}
12231358

1224-
return matchedChildren;
1359+
this.setState({ filter: filters });
12251360
}
12261361
}, {
12271362
key: 'sortByCurrentSort',
@@ -1284,7 +1419,7 @@ window.ReactDOM["default"] = window.ReactDOM;
12841419
this.setState({ currentSort: currentSort });
12851420
this.sortByCurrentSort();
12861421

1287-
if (this.props.onSort) {
1422+
if (typeof this.props.onSort === 'function') {
12881423
this.props.onSort(currentSort);
12891424
}
12901425
}
@@ -1410,9 +1545,7 @@ window.ReactDOM["default"] = window.ReactDOM;
14101545
props,
14111546
columns && columns.length > 0 ? _react['default'].createElement(_thead.Thead, { columns: columns,
14121547
filtering: filtering,
1413-
onFilter: function (filter) {
1414-
_this.setState({ filter: filter });
1415-
},
1548+
onFilter: this.onFilter.bind(this),
14161549
filterPlaceholder: this.props.filterPlaceholder,
14171550
currentFilter: this.state.filter,
14181551
sort: this.state.currentSort,

0 commit comments

Comments
 (0)