Merge branch 'master' of https://github.com/gregnb/mui-datatables int…

…o set-props # Conflicts: # README.md # src/MUIDataTable.js
gregnb · Nov 21, 2019 · a9ee3a3 · a9ee3a3
2 parents 3b99949 + 4f9f2a4
commit a9ee3a3
Show file tree

Hide file tree

Showing 28 changed files with 2,304 additions and 547 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,11 @@
 logs
 *.log
 npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # sublime project
 *.sublime-project
@@ -20,13 +25,15 @@ npm-debug.log*
 pids
 *.pid
 *.seed
+*.pid.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
 .nyc_output/
+*.lcov
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
@@ -37,6 +44,9 @@ node_modules
 # Optional npm cache directory
 .npm
 
+# Optional eslint cache
+.eslintcache
+
 # Build Data
 dist/*
 es/*
@@ -49,3 +59,15 @@ docs/export/*
 
 # Optional REPL history
 .node_repl_history
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+
+# Yarn Integrity file
+.yarn-integrity
+
+# Yarn lock
+# Note: 
+# Remove the line below when we switched to Yarn
+yarn.lock
diff --git a/README.md b/README.md
@@ -126,7 +126,7 @@ The component accepts the following props:
 |:--:|:-----|:-----|
 |**`title`**|array|Title used to caption table
 |**`columns`**|array|Columns used to describe table. Must be either an array of simple strings or objects describing a column
-|**`data`**|array|Data used to describe table. Must be an array containing objects. (Arrays containing just strings or numbers also supported)
+|**`data`**|array|Data used to describe table. Must be either an array containing objects of key/value pairs with values that are strings or numbers, or arrays of strings or numbers (Ex: data: [{"Name": "Joe", "Job Title": "Plumber", "Age": 30}, {"Name": "Jane", "Job Title": "Electrician", "Age": 45}] or data: [["Joe", "Plumber", 30], ["Jane", "Electrician", 45]])
 |**`options`**|object|Options used to describe table
 
 #### Options:
@@ -135,14 +135,17 @@ 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.
-|**`isRowSelectable`**|function||Enable/disable selection on certain rows with custom function. Returns true if not provided. `function(dataIndex: number, selectedRows: object(lookup: {[dataindex]: boolean}, data: arrayOfObjects: {index: number, dataIndex: number})) => boolean`.
+|**`disableToolbarSelect`**|boolean|false|Enable/disable the Select Toolbar that appears when a row is selected.
+|**`isRowSelectable`**|function||Enable/disable selection on certain rows with custom function. Returns true if not provided. `function(dataIndex: number, selectedRows: object(lookup: {dataindex: boolean}, data: arrayOfObjects: {index, dataIndex})) => boolean`.
+|**`isRowExpandable`**|function||Enable/disable expansion or collapse on certain expandable rows with custom function. Will be considered true if not provided. `function(dataIndex: number, expandedRows: object(lookup: {dataIndex: number}, data: arrayOfObjects: {index: number, dataIndex: number})) => boolean`.
 |**`selectableRowsHeader`**|boolean|true|Show/hide the select all/deselect all checkbox header for selectable rows
 |**`expandableRows`**|boolean|false|Enable/disable expandable rows
 |**`expandableRowsOnClick`**|boolean|false|Enable/disable expand trigger when row is clicked. When False, only expand icon will trigger this action.
@@ -155,6 +158,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)
@@ -166,6 +170,7 @@ The component accepts the following props:
 |**`sort`**|boolean|true|Enable/disable sort on all columns
 |**`filter`**|boolean|true|Show/hide filter icon from toolbar
 |**`search`**|boolean|true|Show/hide search icon from toolbar
+|**`searchOpen`**|boolean|false|Initially displays search bar  
 |**`searchText`**|string||Initial search text
 |**`searchPlaceholder`**|string||Search text placeholder. [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-search/index.js)
 |**`print`**|boolean|true|Show/hide print	 icon from toolbar
@@ -174,15 +179,18 @@ The component accepts the following props:
 |**`onDownload`**|function||A callback function that triggers when the user downloads the CSV file. In the callback, you can control what is written to the CSV file. `function(buildHead: (columns) => string, buildBody: (data) => string, columns, data) => string`. Return `false` to cancel download of file.
 |**`viewColumns`**|boolean|true|Show/hide viewColumns icon from toolbar
 |**`onRowsSelect`**|function||Callback function that triggers when row(s) are selected. `function(currentRowsSelected: array, allRowsSelected: array) => void`
+|**`onRowsExpand`**|function||Callback function that triggers when row(s) are expanded. `function(currentRowsExpanded: array, allRowsExpanded: array) => void`
 |**`onRowsDelete`**|function||Callback function that triggers when row(s) are deleted. `function(rowsDeleted: object(lookup: {[dataIndex]: boolean}, data: arrayOfObjects: {index: number, dataIndex: number})) => void OR false` (Returning `false` prevents row deletion.)
 |**`onRowClick`**|function||Callback function that triggers when a row is clicked. `function(rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }) => void`
 |**`onCellClick`**|function||Callback function that triggers when a cell is clicked. `function(colData: any, cellMeta: { colIndex: number, rowIndex: number, dataIndex: number }) => void`
 |**`onChangePage`**|function||Callback function that triggers when a page has changed. `function(currentPage: number) => void`
 |**`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`
@@ -223,7 +231,8 @@ const columns = [
 |**`viewColumns`**|boolean|true|Allow user to toggle column visibility through 'View Column' list
 |**`filterList`**|array||Filter value list [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-filters/index.js)
 |**`filterOptions`**|{names, logic, display}||With filter options, it's possible to use custom names for the filter fields [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-filters/index.js), custom filter logic [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-filter/index.js), and custom rendering [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-filter/index.js)
-|**`customFilterListRender`**|function||Function that returns a string used as the chip label. `function(value) => string` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-filters/index.js)
+|**`customFilterListRender` DEPRECATED **|function||Function that returns a string or array of strings used as the chip label(s). `function(value) => string | arrayOfStrings` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-filters/index.js)
+|**`customFilterListOptions` **|{render: function, update: function}|| `render` returns a string or array of strings used as the chip label(s). `function(value) => string | arrayOfStrings`, `update` returns a `filterList (see above)` allowing for custom filter updates when removing the filter chip [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-filters/index.js)
 |**`filter`**|boolean|true|Display column in filter list
 |**`filterType `**|string|'dropdown'|Choice of filtering view. Takes priority over global filterType option.`enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom')` Use 'custom' if you are supplying your own rendering via `filterOptions`.
 |**`sort`**|boolean|true|Enable/disable sorting on column

diff --git a/examples/column-filters/index.js b/examples/column-filters/index.js
@@ -12,7 +12,7 @@ class Example extends React.Component {
         options: {
           filter: true,
           filterList: ['Franky Miles'],
-          customFilterListRender: v => `Name: ${v}`,
+          customFilterListOptions: { render: v => `Name: ${v}` },
           filterOptions: {
             names: ['a', 'b', 'c', 'Business Analyst']
           },
@@ -23,7 +23,7 @@ class Example extends React.Component {
         options: {
           filter: true,
           filterList: ['Business Analyst'],
-          customFilterListRender: v => `Title: ${v}`,
+          customFilterListOptions: { render: v => `Title: ${v}` },
           filterType: 'textField' // set filterType's at the column level
         }
       },
@@ -37,14 +37,14 @@ class Example extends React.Component {
         name: "Age",
         options: {
           filter: true,
-          customFilterListRender: v => `Age: ${v}`,
+          customFilterListOptions: { render: v => `Age: ${v}` },
         }
       },
       {
         name: "Salary",
         options: {
           filter: true,
-          customFilterListRender: v => `Salary: ${v}`,
+          customFilterListOptions: { render: v => `Salary: ${v}` },
           sort: false
         }
       }
@@ -87,7 +87,7 @@ class Example extends React.Component {
       onFilterChange: (changedColumn, filterList) => {
         console.log(changedColumn, filterList);
       },
-      selectableRows: true,
+      selectableRows: 'multiple',
       filterType: 'dropdown',
       responsive: 'stacked',
       rowsPerPage: 10,

diff --git a/examples/column-options-update/index.js b/examples/column-options-update/index.js
@@ -73,7 +73,7 @@ class Example extends React.Component {
           filter: true,
           display: this.state.display[0],
           filterList: filterList[0].length ? filterList[0] : null,
-          customFilterListRender: v => `Name: ${v}`,
+          customFilterListOptions: { render: v => `Name: ${v}` },
           filterOptions: {
             names: filterOptions
           },
@@ -85,7 +85,7 @@ class Example extends React.Component {
           display: this.state.display[1],
           filter: true,
           filterList: filterList[1].length ? filterList[1] : null,
-          customFilterListRender: v => `Title: ${v}`,
+          customFilterListOptions: { render: v => `Title: ${v}` },
           filterType: 'textField' // set filterType's at the column level
         }
       },
@@ -103,7 +103,7 @@ class Example extends React.Component {
           display: this.state.display[3],
           filter: true,
           filterList: filterList[3].length ? filterList[3] : null,
-          customFilterListRender: v => `Age: ${v}`,
+          customFilterListOptions: { render: v => `Age: ${v}` },
         }
       },
       {
@@ -112,7 +112,7 @@ class Example extends React.Component {
           display: this.state.display[4],
           filter: true,
           filterList: filterList[4].length ? filterList[4] : null,
-          customFilterListRender: v => `Salary: ${v}`,
+          customFilterListOptions: { render: v => `Salary: ${v}` },
           sort: false
         }
       }

diff --git a/examples/customize-filter/index.js b/examples/customize-filter/index.js
@@ -1,8 +1,12 @@
-import { FormGroup, FormLabel, TextField } from '@material-ui/core';
+import { FormGroup, FormLabel, TextField, Checkbox, FormControlLabel, Grid } from '@material-ui/core';
 import React from 'react';
 import MUIDataTable from '../../src';
 
 class Example extends React.Component {
+  state = {
+    ageFilterChecked: false
+  };
+
   render() {
     const columns = [
       {
@@ -32,15 +36,32 @@ class Example extends React.Component {
           filter: true,
           filterType: 'custom',
           filterList: [25, 50],
-          customFilterListRender: v => {
-            if (v[0] && v[1]) {
-              return `Min Age: ${v[0]}, Max Age: ${v[1]}`;
-            } else if (v[0]) {
-              return `Min Age: ${v[0]}`;
-            } else if (v[1]) {
-              return `Max Age: ${v[1]}`;
-            }
-            return false;
+          customFilterListOptions: {
+            render: v => {
+              if (v[0] && v[1] && this.state.ageFilterChecked) {
+                return [`Min Age: ${v[0]}`, `Max Age: ${v[1]}`];
+              } else if (v[0] && v[1] && !this.state.ageFilterChecked) {
+                return `Min Age: ${v[0]}, Max Age: ${v[1]}`;
+              } else if (v[0]) {
+                return `Min Age: ${v[0]}`;
+              } else if (v[1]) {
+                return `Max Age: ${v[1]}`;
+              }
+              return false;
+            },
+            update: (filterList, filterPos, index) => {
+              console.log('customFilterListOnDelete: ', filterList, filterPos, index);
+
+              if (filterPos === 0) {
+                filterList[index].splice(filterPos, 1, '');
+              } else if (filterPos === 1) {
+                filterList[index].splice(filterPos, 1);
+              } else if (filterPos === -1) {
+                filterList[index] = [];
+              }
+
+              return filterList;
+            },
           },
           filterOptions: {
             names: [],
@@ -76,6 +97,16 @@ class Example extends React.Component {
                     }}
                     style={{ width: '45%' }}
                   />
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={this.state.ageFilterChecked}
+                        onChange={event => this.setState({ ageFilterChecked: event.target.checked })}
+                      />
+                    }
+                    label="Separate Values"
+                    style={{ marginLeft: '0px' }}
+                  />
                 </FormGroup>
               </div>
             ),
@@ -139,7 +170,7 @@ class Example extends React.Component {
 
     const options = {
       filter: true,
-      filterType: 'dropdown',
+      filterType: 'multiselect',
       responsive: 'scrollMaxHeight',
     };