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

Commit

Permalink
Allow to filter by column: value
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@jpserra
jpserra committed Dec 16, 2015
1 parent 0acc184 commit 38045b8
Show file tree
Hide file tree
Showing 10 changed files with 601 additions and 2,393 deletions.
4 changes: 3 additions & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ module.exports = function(grunt) {
'tmp/reactable/lib/filter_props_from.js': 'src/reactable/lib/filter_props_from.jsx',
'tmp/reactable/lib/extract_data_from.js': 'src/reactable/lib/extract_data_from.jsx',
'tmp/reactable/lib/is_react_component.js': 'src/reactable/lib/is_react_component.jsx',
'tmp/reactable/lib/array_intersect.js': 'src/reactable/lib/array_intersect.jsx',
'tmp/reactable/lib/stringable.js': 'src/reactable/lib/stringable.jsx',
'tmp/reactable/filterer.js': 'src/reactable/filterer.jsx',
'tmp/reactable/sort.js': 'src/reactable/sort.jsx',
Expand All @@ -59,6 +60,7 @@ module.exports = function(grunt) {
'lib/reactable/lib/filter_props_from.js': 'src/reactable/lib/filter_props_from.jsx',
'lib/reactable/lib/extract_data_from.js': 'src/reactable/lib/extract_data_from.jsx',
'lib/reactable/lib/is_react_component.js': 'src/reactable/lib/is_react_component.jsx',
'lib/reactable/lib/array_intersect.js': 'src/reactable/lib/array_intersect.jsx',
'lib/reactable/lib/stringable.js': 'src/reactable/lib/stringable.jsx',
'lib/reactable/filterer.js': 'src/reactable/filterer.jsx',
'lib/reactable/sort.js': 'src/reactable/sort.jsx',
Expand All @@ -82,6 +84,7 @@ module.exports = function(grunt) {
dist: {
src: [
'tmp/reactable/lib/filter_props_from.js',
'tmp/reactable/lib/array_intersect.js',
'tmp/reactable/lib/to_array.js',
'tmp/reactable/lib/stringable.js',
'tmp/reactable/lib/extract_data_from.js',
Expand Down Expand Up @@ -131,4 +134,3 @@ module.exports = function(grunt) {
grunt.registerTask('build', ['babel:common', 'buildBrowser']);
grunt.registerTask('default', ['build', 'watch:build']);
};

173 changes: 153 additions & 20 deletions build/reactable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,65 @@ window.ReactDOM["default"] = window.ReactDOM;
}
});

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports"], factory);
} else if (typeof exports !== "undefined") {
factory(exports);
} else {
var mod = {
exports: {}
};
factory(mod.exports);
global.array_intersect = mod.exports;
}
})(this, function (exports) {
"use strict";

exports.array_intersect = array_intersect;

function array_intersect() {
var i,
all,
shortest,
nShortest,
n,
len,
ret = [],
obj = {},
nOthers;
nOthers = arguments.length - 1;
nShortest = arguments[0].length;
shortest = 0;
for (i = 0; i <= nOthers; i++) {
n = arguments[i].length;
if (n < nShortest) {
shortest = i;
nShortest = n;
}
}

for (i = 0; i <= nOthers; i++) {
n = i === shortest ? 0 : i || shortest; //Read the shortest array first. Read the first array instead of the shortest
len = arguments[n].length;
for (var j = 0; j < len; j++) {
var elem = arguments[n][j];
if (obj[elem] === i - 1) {
if (i === nOthers) {
ret.push(elem);
obj[elem] = 0;
} else {
obj[elem] = i;
}
} else if (i === 0) {
obj[elem] = 0;
}
}
}
return ret;
}
});

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports"], factory);
Expand Down Expand Up @@ -239,10 +298,20 @@ window.ReactDOM["default"] = window.ReactDOM;
}, {
key: 'render',
value: function render() {
var value = '';
if (typeof this.props.value != 'string') {
for (var key in this.props.value) {
value += key + ': ' + this.props.value[key] + ', ';
}
value = value.slice(0, -2);
} else {
value = this.props.value;
}
value = value.trim();
return _react['default'].createElement('input', { type: 'text',
className: 'reactable-filter-input',
placeholder: this.props.placeholder,
value: this.props.value,
value: value,
onKeyUp: this.onChange.bind(this),
onChange: this.onChange.bind(this) });
}
Expand Down Expand Up @@ -960,17 +1029,17 @@ window.ReactDOM["default"] = window.ReactDOM;

(function (global, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports', 'react', './lib/filter_props_from', './lib/extract_data_from', './unsafe', './thead', './th', './tr', './tfoot', './paginator'], factory);
define(['exports', 'react', './lib/filter_props_from', './lib/extract_data_from', './lib/array_intersect', './unsafe', './thead', './th', './tr', './tfoot', './paginator'], factory);
} else if (typeof exports !== 'undefined') {
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'));
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'));
} else {
var mod = {
exports: {}
};
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);
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);
global.table = mod.exports;
}
})(this, function (exports, _react, _libFilter_props_from, _libExtract_data_from, _unsafe, _thead, _th, _tr, _tfoot, _paginator) {
})(this, function (exports, _react, _libFilter_props_from, _libExtract_data_from, _libArray_intersect, _unsafe, _thead, _th, _tr, _tfoot, _paginator) {
'use strict';

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; };
Expand Down Expand Up @@ -1204,24 +1273,90 @@ window.ReactDOM["default"] = window.ReactDOM;
}, {
key: 'applyFilter',
value: function applyFilter(filter, children) {
// Helper function to apply filter text to a list of table rows
filter = filter.toLowerCase();
var matchedChildren = [];
if (typeof filter === 'string') {
// Helper function to apply filter text to a list of table rows
filter = filter.toLowerCase();
var matchedChildren = [];

for (var i = 0; i < children.length; i++) {
var data = children[i].props.data;
for (var i = 0; i < children.length; i++) {
var data = children[i].props.data;

for (var j = 0; j < this.props.filterable.length; j++) {
var filterColumn = this.props.filterable[j];
for (var j = 0; j < this.props.filterable.length; j++) {
var filterColumn = this.props.filterable[j];

if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(filter) > -1) {
matchedChildren.push(children[i]);
break;
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(filter) > -1) {
matchedChildren.push(children[i]);
break;
}
}
}

return matchedChildren;
} else {
var _ret = (function () {

var filterCount = Object.keys(filter).length;
var matchedChildren = [];

for (var filterColumn in filter) {
var val = filter[filterColumn];
for (var i = 0; i < children.length; i++) {
var data = children[i].props.data;
if (typeof data[filterColumn] !== 'undefined' && (0, _libExtract_data_from.extractDataFrom)(data, filterColumn).toString().toLowerCase().indexOf(val) > -1) {
matchedChildren.push(children[i]);
}
}
}

if (filterCount > 1) {
var result = [];
return {
v: matchedChildren.map(function (children) {
var occurrences = matchedChildren.filter(function (value) {
return value.key === children.key;
}).length;
if (occurrences == filterCount) {
return children;
}
})
};
} else {
return {
v: matchedChildren
};
}
})();

if (typeof _ret === 'object') return _ret.v;
}
}
}, {
key: 'onFilter',
value: function onFilter(filters) {
if (typeof filters === 'string' && filters.indexOf(':') != -1) {
(function () {
var filterObj = {};
filters = filters.trim();
var col = '';
var val = '';
filters = filters.split(',');

filters.map(function (filter) {
filter = filter.split(':');
if (filter[0]) {
col = filter[0].trim();
}
if (filter[1]) {
val = filter[1].trim();
}
filterObj[col] = val;
});

filters = filterObj;
})();
}

return matchedChildren;
this.setState({ filter: filters });
}
}, {
key: 'sortByCurrentSort',
Expand Down Expand Up @@ -1284,7 +1419,7 @@ window.ReactDOM["default"] = window.ReactDOM;
this.setState({ currentSort: currentSort });
this.sortByCurrentSort();

if (this.props.onSort) {
if (typeof this.props.onSort === 'function') {
this.props.onSort(currentSort);
}
}
Expand Down Expand Up @@ -1410,9 +1545,7 @@ window.ReactDOM["default"] = window.ReactDOM;
props,
columns && columns.length > 0 ? _react['default'].createElement(_thead.Thead, { columns: columns,
filtering: filtering,
onFilter: function (filter) {
_this.setState({ filter: filter });
},
onFilter: this.onFilter.bind(this),
filterPlaceholder: this.props.filterPlaceholder,
currentFilter: this.state.filter,
sort: this.state.currentSort,
Expand Down
Loading

0 comments on commit 38045b8

Please sign in to comment.