Skip to content

Commit

Permalink
Partially working filterByColumn example
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryanlanciaux
ryanlanciaux committed Mar 12, 2016
1 parent 74be928 commit 00f2210
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 10 deletions.
54 changes: 53 additions & 1 deletion build/Griddle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ return /******/ (function(modules) { // webpackBootstrap
var omit = __webpack_require__(57);
var map = __webpack_require__(7);
var sortBy = __webpack_require__(16);
var extend = __webpack_require__(29);
var _filter = __webpack_require__(11);

var Griddle = React.createClass({
Expand Down Expand Up @@ -226,6 +227,49 @@ return /******/ (function(modules) { // webpackBootstrap
return false;
});
},

filterByColumnFilters: function filterByColumnFilters(columnFilters) {
var filteredResults = _filter(this.props.results, function (item) {
for (var column in columnFilters) {
if (deep.getAt(item, column || "").toString().toLowerCase().indexOf(columnFilters[column].toLowerCase()) >= 0) {
return true;
}
}

return false;
});

var newState = {
columnFilters: columnFilters
};

if (filteredResults.length > 0) {
newState.filteredResults = filteredResults;
} else if (this.state.filter) {
newState.filteredResults = this.props.useCustomFilterer ? this.props.customFilterer(this.props.results, filter) : this.defaultFilter(this.props.results, filter);
} else {
newState.filteredResults = null;
}

this.setState(newState);
},

filterByColumn: function filterByColumn(filter, column) {
//else the column and the filter to an object and pass it to the filterByColumnFilters
var columnFilters = this.state.columnFilters;

//if filter is "" remove it from the columnFilters object
if (columnFilters.hasOwnProperty(column) && !filter) {
columnFilters = omit(columnFilters, column);
} else {
var newObject = {};
newObject[column] = filter;
columnFilters = extend({}, columnFilters, newObject);
}

this.filterByColumnFilters(columnFilters);
},

/* if we have a filter display the max page and results accordingly */
setFilter: function setFilter(filter) {
if (this.props.useExternal) {
Expand Down Expand Up @@ -410,6 +454,10 @@ return /******/ (function(modules) { // webpackBootstrap
filteredResults: null,
filteredColumns: [],
filter: "",
//this sets the individual column filters
//should be in the format of:
// [ {columnName: 'columnFilter'}, ...]
columnFilters: {},
resultsPerPage: this.props.resultsPerPage || 5,
sortColumn: this.props.initialSort,
sortAscending: this.props.initialSortAscending,
Expand Down Expand Up @@ -761,6 +809,7 @@ return /******/ (function(modules) { // webpackBootstrap
rowSettings: this.rowSettings,
sortSettings: sortProperties,
multipleSelectionSettings: multipleSelectionProperties,
filterByColumn: this.filterByColumn,
isSubGriddle: this.props.isSubGriddle,
useGriddleIcons: this.props.useGriddleIcons,
useFixedLayout: this.props.useFixedLayout,
Expand Down Expand Up @@ -894,6 +943,7 @@ return /******/ (function(modules) { // webpackBootstrap
"useFixedLayout": true,
"paddingHeight": null,
"rowHeight": null,
"filterByColumn": null,
"infiniteScrollLoadTreshold": null,
"bodyHeight": null,
"useGriddleStyles": true,
Expand Down Expand Up @@ -1109,6 +1159,7 @@ return /******/ (function(modules) { // webpackBootstrap
sortSettings: this.props.sortSettings,
multipleSelectionSettings: this.props.multipleSelectionSettings,
columnSettings: this.props.columnSettings,
filterByColumn: this.props.filterByColumn,
rowSettings: this.props.rowSettings }) : undefined;

//check to see if any of the rows have children... if they don't wrap everything in a tbody so the browser doesn't auto do this
Expand Down Expand Up @@ -1180,6 +1231,7 @@ return /******/ (function(modules) { // webpackBootstrap
getDefaultProps: function getDefaultProps() {
return {
"columnSettings": null,
"filterByColumn": function filterByColumn() {},
"rowSettings": null,
"sortSettings": null,
"multipleSelectionSettings": null,
Expand Down Expand Up @@ -1250,7 +1302,7 @@ return /******/ (function(modules) { // webpackBootstrap
};
}

return React.createElement('th', { onClick: columnIsSortable ? that.sort(col) : null, 'data-title': col, className: columnSort, key: displayName, style: titleStyles }, React.createElement(HeaderComponent, _extends({ columnName: col, displayName: displayName }, headerProps)), sortComponent);
return React.createElement('th', { onClick: columnIsSortable ? that.sort(col) : null, 'data-title': col, className: columnSort, key: displayName, style: titleStyles }, React.createElement(HeaderComponent, _extends({ columnName: col, displayName: displayName, filterByColumn: that.props.filterByColumn }, headerProps)), sortComponent);
});

if (nodes && this.props.multipleSelectionSettings.isMultipleSelection) {
Expand Down
11 changes: 10 additions & 1 deletion examples/customization/customColumn.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,17 @@
});

var HeaderComponent = React.createClass({
filterText: function(e) {
this.props.filterByColumn(e.target.value, this.props.columnName)
},

render: function(){
return <strong style={{color: this.props.color}}>{this.props.displayName}</strong>
return (
<span>
<strong style={{color: this.props.color}}>{this.props.displayName}</strong>
<input type='text' onChange={this.filterText} />
</span>
);
}
});

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"react": "^0.14.3"
},
"dependencies": {
"lodash.assign": "^4.0.0",
"lodash.assign": "^4.0.6",
"lodash.defaults": "^4.0.0",
"lodash.difference": "^4.0.1",
"lodash.drop": "^4.0.0",
Expand Down
2 changes: 2 additions & 0 deletions scripts/gridTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ var GridTable = React.createClass({
"useFixedLayout": true,
"paddingHeight": null,
"rowHeight": null,
"filterByColumn": null,
"infiniteScrollLoadTreshold": null,
"bodyHeight": null,
"useGriddleStyles": true,
Expand Down Expand Up @@ -244,6 +245,7 @@ var GridTable = React.createClass({
sortSettings={this.props.sortSettings}
multipleSelectionSettings={this.props.multipleSelectionSettings}
columnSettings={this.props.columnSettings}
filterByColumn={this.props.filterByColumn}
rowSettings={this.props.rowSettings}/>
: undefined);

Expand Down
3 changes: 2 additions & 1 deletion scripts/gridTitle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var GridTitle = React.createClass({
getDefaultProps: function(){
return {
"columnSettings" : null,
"filterByColumn": function() {},
"rowSettings" : null,
"sortSettings": null,
"multipleSelectionSettings": null,
Expand Down Expand Up @@ -86,7 +87,7 @@ var GridTitle = React.createClass({
}

return (<th onClick={columnIsSortable ? that.sort(col) : null} data-title={col} className={columnSort} key={displayName} style={titleStyles}>
<HeaderComponent columnName={col} displayName={displayName} {...headerProps}/>
<HeaderComponent columnName={col} displayName={displayName} filterByColumn={that.props.filterByColumn} {...headerProps}/>
{sortComponent}
</th>);
});
Expand Down
53 changes: 47 additions & 6 deletions scripts/griddle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ var isUndefined = require('lodash.isundefined');
var omit = require('lodash.omit');
var map = require('lodash.map');
var sortBy = require('lodash.sortby');
var extend = require('lodash.assign');
var _filter = require('lodash.filter');

var Griddle = React.createClass({
Expand Down Expand Up @@ -154,16 +155,51 @@ var Griddle = React.createClass({
});
},

filterByColumn: function(results, filter, column) {
return _filter(results,
filterByColumnFilters(columnFilters) {
var filteredResults = _filter(
this.props.results,
function(item) {
if ((deep.getAt(item, column)||"").toString().toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
return true;
for(var column in columnFilters) {
if(deep.getAt(item, column||"").toString().toLowerCase().indexOf(columnFilters[column].toLowerCase()) >= 0) {
return true;
}
}

return false;
}
)
);

var newState = {
columnFilters: columnFilters
};

if(filteredResults.length > 0) {
newState.filteredResults = filteredResults;
} else if(this.state.filter) {
newState.filteredResults = this.props.useCustomFilterer ?
this.props.customFilterer(this.props.results, filter) :
this.defaultFilter(this.props.results, filter);
} else {
newState.filteredResults = null;
}

this.setState(newState);
},

filterByColumn: function(filter, column) {
//else the column and the filter to an object and pass it to the filterByColumnFilters
var columnFilters = this.state.columnFilters;

//if filter is "" remove it from the columnFilters object
if(columnFilters.hasOwnProperty(column) && !filter) {
columnFilters = omit(columnFilters, column);
} else {
var newObject = {};
newObject[column] = filter;
columnFilters = extend({}, columnFilters, newObject);
}

this.filterByColumnFilters(columnFilters);
},

/* if we have a filter display the max page and results accordingly */
Expand Down Expand Up @@ -349,6 +385,10 @@ var Griddle = React.createClass({
filteredResults: null,
filteredColumns: [],
filter: "",
//this sets the individual column filters
//should be in the format of:
// [ {columnName: 'columnFilter'}, ...]
columnFilters: {},
resultsPerPage: this.props.resultsPerPage || 5,
sortColumn: this.props.initialSort,
sortAscending: this.props.initialSortAscending,
Expand Down Expand Up @@ -734,7 +774,8 @@ var Griddle = React.createClass({
columnSettings={this.columnSettings}
rowSettings = {this.rowSettings}
sortSettings={sortProperties}
multipleSelectionSettings={multipleSelectionProperties}
multipleSelectionSettings={multipleSelectionProperties}
filterByColumn={this.filterByColumn}
isSubGriddle={this.props.isSubGriddle}
useGriddleIcons={this.props.useGriddleIcons}
useFixedLayout={this.props.useFixedLayout}
Expand Down

0 comments on commit 00f2210

Please sign in to comment.