Issue-857 Server Side Filters

README.md

@@ -135,10 +135,11 @@ The component accepts the following props:
 |**`page`**|number||User provided starting page for pagination
 |**`count`**|number||User provided override for total number of rows
 |**`serverSide`**|boolean|false|Enable remote data source
+|**`serverSideFilterList`**|array|[]|Sets the filter list display when using serverSide: true
 |**`rowsSelected`**|array||User provided selected rows
 |**`rowsExpanded`**|array||User provided expanded rows
-|**`filterType `**|string||Choice of filtering view. `enum('checkbox', 'dropdown', 'multiselect', 'textField')`
-|**`textLabels `**|object||User provided labels to localize text
+|**`filterType`**|string||Choice of filtering view. `enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom')`
+|**`textLabels`**|object||User provided labels to localize text
 |**`pagination`**|boolean|true|Enable/disable pagination
 |**`selectableRows`**|string|'multiple'|Numbers of rows that can be selected. Options are "multiple", "single", "none".
 |**`selectableRowsOnClick`**|boolean|false|Enable/disable select toggle when row is clicked. When False, only checkbox will trigger this action.
@@ -155,6 +156,7 @@ The component accepts the following props:
 |**`customSort`**|function||Override default sorting with custom function. `function(data: array, colIndex: number, order: string) => array`
 |**`customSearch `**|function||Override default search with custom function. `customSearch(searchQuery: string, currentRow: array, columns: array) => boolean`
 |**`customSearchRender `**|function||Render a custom table search. `customSearchRender(searchText: string, handleSearch, hideSearch, options) => React Component`
+|**`customFilterDialogFooter `**|function||Add a custom footer to the filter dialog. `customFilterDialogFooter(filterList: array) => React Component`
 |**`elevation`**|number|4|Shadow depth applied to Paper component
 |**`caseSensitive `**|boolean|false|Enable/disable case sensitivity for search
 |**`responsive`**|string|'stacked'|Enable/disable responsive table views. Options: 'stacked', 'scrollMaxHeight' (limits height of table), 'scrollFullHeight' (table takes on as much height as needed to display all rows set in rowsPerPage)
@@ -181,8 +183,10 @@ The component accepts the following props:
 |**`onChangeRowsPerPage`**|function||Callback function that triggers when the number of rows per page has changed. `function(numberOfRows: number) => void`
 |**`onSearchChange`**|function||Callback function that triggers when the search text value has changed. `function(searchText: string) => void`
 |**`onSearchOpen`**|function||Callback function that triggers when the searchbox opens. `function() => void`
+|**`onFilterDialogOpen`**|function||Callback function that triggers when the filter dialog opens. `function() => void`
+|**`onFilterDialogClose`**|function||Callback function that triggers when the filter dialog closes. `function() => void`
+|**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumn: string, filterList: array, type: enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom', 'chip', 'reset')) => void`
 |**`onSearchClose`**|function||Callback function that triggers when the searchbox closes. `function() => void`
-|**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumn: string, filterList: array) => void`
 |**`onColumnSortChange`**|function||Callback function that triggers when a column has been sorted. `function(changedColumn: string, direction: string) => void`
 |**`onColumnViewChange`**|function||Callback function that triggers when a column view has been changed. `function(changedColumn: string, action: string) => void`
 |**`onTableChange`**|function||Callback function that triggers when table state has changed. `function(action: string, tableState: object) => void`

examples/examples.js

@@ -22,6 +22,7 @@ import OnDownload from "./on-download";
 import OnTableInit from "./on-table-init";
 import ResizableColumns from "./resizable-columns";
 import SelectableRows from "./selectable-rows";
+import ServerSideFilters from "./serverside-filters";
 import ServerSideOptions from "./serverside-options";
 import ServerSidePagination from "./serverside-pagination";
 import Simple from "./simple";
@@ -57,6 +58,7 @@ export default {
     'OnTableInit': OnTableInit,
     'resizableColumns': ResizableColumns,
     'selectableRows': SelectableRows,
+    'ServerSide Filters': ServerSideFilters,
     'serverSide Options': ServerSideOptions,
     'serverSide Pagination': ServerSidePagination,
     'Simple': Simple,

examples/serverside-filters/index.js

@@ -0,0 +1,196 @@
+import { Button, CircularProgress } from '@material-ui/core';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import MUIDataTable from '../../src';
+
+class Example extends React.Component {
+  state = {
+    serverSideFilterList: [],
+    filters: [[], [], [], [], []],
+    isLoading: false,
+    data: [
+      ['Gabby George', 'Business Analyst', 'Minneapolis', 30, '$100,000'],
+      ['Aiden Lloyd', 'Business Consultant', 'Dallas', 55, '$200,000'],
+      ['Jaden Collins', 'Attorney', 'Santa Ana', 27, '$500,000'],
+      ['Franky Rees', 'Business Analyst', 'St. Petersburg', 22, '$50,000'],
+      ['Aaren Rose', 'Business Consultant', 'Toledo', 28, '$75,000'],
+      ['Blake Duncan', 'Business Management Analyst', 'San Diego', 65, '$94,000'],
+      ['Frankie Parry', 'Agency Legal Counsel', 'Jacksonville', 71, '$210,000'],
+      ['Lane Wilson', 'Commercial Specialist', 'Chicago', 19, '$65,000'],
+      ['Robin Duncan', 'Business Analyst', 'Los Angeles', 20, '$77,000'],
+      ['Mel Brooks', 'Business Consultant', 'Oklahoma City', 37, '$135,000'],
+      ['Harper White', 'Attorney', 'Pittsburgh', 52, '$420,000'],
+      ['Kris Humphrey', 'Agency Legal Counsel', 'Laredo', 30, '$150,000'],
+      ['Frankie Long', 'Industrial Analyst', 'Austin', 31, '$170,000'],
+      ['Brynn Robbins', 'Business Analyst', 'Norfolk', 22, '$90,000'],
+      ['Justice Mann', 'Business Consultant', 'Chicago', 24, '$133,000'],
+      ['Addison Navarro', 'Business Management Analyst', 'New York', 50, '$295,000'],
+      ['Jesse Welch', 'Agency Legal Counsel', 'Seattle', 28, '$200,000'],
+      ['Eli Mejia', 'Commercial Specialist', 'Long Beach', 65, '$400,000'],
+      ['Gene Leblanc', 'Industrial Analyst', 'Hartford', 34, '$110,000'],
+      ['Danny Leon', 'Computer Scientist', 'Newark', 60, '$220,000'],
+      ['Lane Lee', 'Corporate Counselor', 'Cincinnati', 52, '$180,000'],
+      ['Jesse Hall', 'Business Analyst', 'Baltimore', 44, '$99,000'],
+      ['Danni Hudson', 'Agency Legal Counsel', 'Tampa', 37, '$90,000'],
+      ['Terry Macdonald', 'Commercial Specialist', 'Miami', 39, '$140,000'],
+      ['Justice Mccarthy', 'Attorney', 'Tucson', 26, '$330,000'],
+      ['Silver Carey', 'Computer Scientist', 'Memphis', 47, '$250,000'],
+      ['Franky Miles', 'Industrial Analyst', 'Buffalo', 49, '$190,000'],
+      ['Glen Nixon', 'Corporate Counselor', 'Arlington', 44, '$80,000'],
+      ['Gabby Strickland', 'Business Process Consultant', 'Scottsdale', 26, '$45,000'],
+      ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, '$142,000'],
+    ]
+  };
+
+  // mock async function
+  xhrRequest = (url, filterList) => {
+    return new Promise(resolve => {
+      window.setTimeout(
+        () => {
+          const data = [
+            ['Gabby George', 'Business Analyst', 'Minneapolis', 30, '$100,000'],
+            ['Aiden Lloyd', 'Business Consultant', 'Dallas', 55, '$200,000'],
+            ['Jaden Collins', 'Attorney', 'Santa Ana', 27, '$500,000'],
+            ['Franky Rees', 'Business Analyst', 'St. Petersburg', 22, '$50,000'],
+            ['Aaren Rose', 'Business Consultant', 'Toledo', 28, '$75,000'],
+            ['Blake Duncan', 'Business Management Analyst', 'San Diego', 65, '$94,000'],
+            ['Frankie Parry', 'Agency Legal Counsel', 'Jacksonville', 71, '$210,000'],
+            ['Lane Wilson', 'Commercial Specialist', 'Chicago', 19, '$65,000'],
+            ['Robin Duncan', 'Business Analyst', 'Los Angeles', 20, '$77,000'],
+            ['Mel Brooks', 'Business Consultant', 'Oklahoma City', 37, '$135,000'],
+            ['Harper White', 'Attorney', 'Pittsburgh', 52, '$420,000'],
+            ['Kris Humphrey', 'Agency Legal Counsel', 'Laredo', 30, '$150,000'],
+            ['Frankie Long', 'Industrial Analyst', 'Austin', 31, '$170,000'],
+            ['Brynn Robbins', 'Business Analyst', 'Norfolk', 22, '$90,000'],
+            ['Justice Mann', 'Business Consultant', 'Chicago', 24, '$133,000'],
+            ['Addison Navarro', 'Business Management Analyst', 'New York', 50, '$295,000'],
+            ['Jesse Welch', 'Agency Legal Counsel', 'Seattle', 28, '$200,000'],
+            ['Eli Mejia', 'Commercial Specialist', 'Long Beach', 65, '$400,000'],
+            ['Gene Leblanc', 'Industrial Analyst', 'Hartford', 34, '$110,000'],
+            ['Danny Leon', 'Computer Scientist', 'Newark', 60, '$220,000'],
+            ['Lane Lee', 'Corporate Counselor', 'Cincinnati', 52, '$180,000'],
+            ['Jesse Hall', 'Business Analyst', 'Baltimore', 44, '$99,000'],
+            ['Danni Hudson', 'Agency Legal Counsel', 'Tampa', 37, '$90,000'],
+            ['Terry Macdonald', 'Commercial Specialist', 'Miami', 39, '$140,000'],
+            ['Justice Mccarthy', 'Attorney', 'Tucson', 26, '$330,000'],
+            ['Silver Carey', 'Computer Scientist', 'Memphis', 47, '$250,000'],
+            ['Franky Miles', 'Industrial Analyst', 'Buffalo', 49, '$190,000'],
+            ['Glen Nixon', 'Corporate Counselor', 'Arlington', 44, '$80,000'],
+            ['Gabby Strickland', 'Business Process Consultant', 'Scottsdale', 26, '$45,000'],
+            ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, '$142,000'],
+          ];
+          const newData = [
+            ['Lane Wilson', 'Commercial Specialist', 'Chicago', 19, '$65,000'],
+            ['Justice Mann', 'Business Consultant', 'Chicago', 24, '$133,000']
+          ];
+
+          if (
+            !filterList[0].length
+            && !filterList[1].length
+            && !filterList[2].length
+            && !filterList[3].length
+            && !filterList[4].length
+          ) {
+            resolve({ data });
+          } else {
+            resolve({ data: newData });
+          }
+        },
+        2000
+      );
+    });
+  }
+
+  handleFilterSubmit = filterList => () => {
+    console.log('Submitting filters: ', filterList);
+
+    this.setState({ isLoading: true, filters: filterList });
+
+    // fake async request
+    this.xhrRequest(`/myApiServer?filters=${filterList}`, filterList).then(res => {
+      this.setState({ isLoading: false, data: res.data, serverSideFilterList: filterList });
+    });
+  };
+
+  render() {
+    const columns = [
+      {
+        name: 'Name',
+        options: {
+          filter: true,
+          filterList: this.state.filters[0],
+        },
+      },
+      {
+        label: 'Title',
+        name: 'Title',
+        options: {
+          filter: true,
+          filterList: this.state.filters[1],
+        },
+      },
+      {
+        name: 'Location',
+        options: {
+          filter: true,
+          filterList: this.state.filters[2],
+        },
+      },
+      {
+        name: 'Age',
+        options: {
+          filter: true,
+          filterList: this.state.filters[3],
+        },
+      },
+      {
+        name: 'Salary',
+        options: {
+          filter: true,
+          filterList: this.state.filters[4],
+        },
+      },
+    ];
+
+    const options = {
+      filter: true,
+      serverSideFilterList: this.state.serverSideFilterList,
+      filterType: 'dropdown',
+      responsive: 'scrollMaxHeight',
+      serverSide: true,
+      onFilterDialogOpen: () => {
+        console.log('filter dialog opened');
+      },
+      onFilterDialogClose: () => {
+        console.log('filter dialog closed');
+      },
+      onFilterChange: (column, filterList, type) => {
+        if (type === 'chip') {
+          console.log('updating filters via chip');
+          this.handleFilterSubmit(filterList)();
+        }
+      },
+      customFilterDialogFooter: filterList => {
+        return (
+          <div style={{ marginTop: '40px' }}>
+            <Button variant="contained" onClick={this.handleFilterSubmit(filterList)}>Apply Filters*</Button>
+            <p><em>*(Simulates selecting "Chicago" from "Location")</em></p>
+          </div>
+        );
+      }
+    };
+
+    return (
+      <React.Fragment>
+        {this.state.isLoading && (
+          <div style={{ position: 'absolute', top: '50%', left: '50%' }}>
+            <CircularProgress />
+          </div>
+        )}
+        <MUIDataTable title={'ACME Employee list'} data={this.state.data} columns={columns} options={options} />
+      </React.Fragment>
+    );
+  }
+}
+
+export default Example;

src/MUIDataTable.js

@@ -142,6 +142,7 @@ class MUIDataTable extends React.Component {
       customFooter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
       customSearchRender: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
       customRowRender: PropTypes.func,
+      customFilterDialogFooter: PropTypes.func,
       onRowClick: PropTypes.func,
       onRowsSelect: PropTypes.func,
       resizableColumns: PropTypes.bool,
@@ -150,6 +151,9 @@ class MUIDataTable extends React.Component {
       isRowSelectable: PropTypes.func,
       selectableRowsHeader: PropTypes.bool,
       serverSide: PropTypes.bool,
+      onFilterChange: PropTypes.func,
+      onFilterDialogOpen: PropTypes.func,
+      onFilterDialogClose: PropTypes.func,
       onTableChange: PropTypes.func,
       onTableInit: PropTypes.func,
       caseSensitive: PropTypes.bool,
@@ -278,6 +282,7 @@ class MUIDataTable extends React.Component {
     filterType: 'dropdown',
     pagination: true,
     textLabels,
+    serverSideFilterList: [],
     expandableRows: false,
     expandableRowsOnClick: false,
     resizableColumns: false,
@@ -946,7 +951,7 @@ class MUIDataTable extends React.Component {
       () => {
         this.setTableAction('resetFilters');
         if (this.options.onFilterChange) {
-          this.options.onFilterChange(null, this.state.filterList);
+          this.options.onFilterChange(null, this.state.filterList, 'reset');
         }
       },
     );
@@ -962,6 +967,9 @@ class MUIDataTable extends React.Component {
           case 'checkbox':
             filterPos >= 0 ? filterList[index].splice(filterPos, 1) : filterList[index].push(value);
             break;
+          case 'chip':
+            filterPos >= 0 ? filterList[index].splice(filterPos, 1) : filterList[index].push(value);
+            break;
           case 'multiselect':
             filterList[index] = value === '' ? [] : value;
             break;
@@ -987,7 +995,7 @@ class MUIDataTable extends React.Component {
       () => {
         this.setTableAction('filterChange');
         if (this.options.onFilterChange) {
-          this.options.onFilterChange(column, this.state.filterList);
+          this.options.onFilterChange(column, this.state.filterList, type);
         }
       },
     );
@@ -1223,6 +1231,7 @@ class MUIDataTable extends React.Component {
       previousSelectedRow,
       expandedRows,
       searchText,
+      serverSideFilterList,
     } = this.state;
 
     const rowCount = this.state.count || displayData.length;
@@ -1282,6 +1291,7 @@ class MUIDataTable extends React.Component {
         )}
         <TableFilterList
           options={this.options}
+          serverSideFilterList={this.props.options.serverSideFilterList || []}
           filterListRenderers={columns.map(c => {
             return c.customFilterListRender ? c.customFilterListRender : f => f;
           })}

src/components/Popover.js

@@ -78,7 +78,8 @@ class Popover extends React.Component {
           ref={el => this.popoverEl}
           anchorOrigin={anchorOriginSpecs}
           transformOrigin={transformOriginSpecs}
-          {...providedProps}>
+          {...providedProps}
+        >
           {content}
         </MuiPopover>
         {triggerEl}

src/components/TableFilter.js

@@ -266,7 +266,7 @@ class TableFilter extends React.Component {
   }
 
   render() {
-    const { classes, columns, options, onFilterReset } = this.props;
+    const { classes, columns, options, onFilterReset, customFooter, filterList } = this.props;
     const textLabels = options.textLabels.filter;
     const filterGridColumns = columns.filter(col => col.filter).length === 1 ? 1 : 2;
 
@@ -309,6 +309,7 @@ class TableFilter extends React.Component {
             }
           })}
         </GridList>
+        {customFooter ? customFooter(filterList) : ''}
       </div>
     );
   }