Merge branch 'master' of github.com:gregnb/mui-datatables into bugfix…

…/activeIcon-for-search-not-reset-on-toggle * 'master' of github.com:gregnb/mui-datatables: 2.13.0 Prettify files Feature/issue 1036 fixed header (gregnb#1071) Update webpack dev server and related dependencies (gregnb#1069) Feature/issue 871 (setCellHeaderProps) and Feature/issue 714 (setTableProps) (gregnb#889) Feature/issue 937 array and custom update filter support (gregnb#1067) Bugfix/issue 1052 csv download issues (gregnb#1064) Hide toggle button when the row is not expandable (gregnb#1025) add test case to verify reset type (gregnb#1006) Update .gitignore and adding yarn.lock (gregnb#1004) Serverside sorting example (gregnb#986) No Pointer style cursor for table head when no hint or sorting (gregnb#910) Added disableToolbarSelect option (gregnb#874) Add table properties option (gregnb#670)
pgoforth · Nov 25, 2019 · 663a412 · 663a412
2 parents 40e22ae + f2468e2
commit 663a412
Show file tree

Hide file tree

Showing 26 changed files with 20,849 additions and 12,073 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
@@ -143,6 +143,7 @@ The component accepts the following props:
 |**`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.
+|**`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
@@ -164,7 +165,8 @@ The component accepts the following props:
 |**`rowsPerPage`**|number|10|Number of rows allowed per page
 |**`rowsPerPageOptions`**|array|[10,15,100]|Options to provide in pagination for number of rows a user can select
 |**`rowHover`**|boolean|true|Enable/disable hover style over rows
-|**`fixedHeader`**|boolean|true|Enable/disable fixed header columns
+|**`fixedHeader` DEPRECATED**|boolean|true|Enable/disable fixed header columns
+|**`fixedHeaderOptions`**|object|`{xAxis: true, yAxis: true}`|Enable/disable fixed header columns according to axis in any combination desired [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/fixed-header/index.js)
 |**`sortFilterList`**|boolean|true|Enable/disable alphanumeric sorting of filter lists
 |**`sort`**|boolean|true|Enable/disable sort on all columns
 |**`filter`**|boolean|true|Show/hide filter icon from toolbar
@@ -194,7 +196,8 @@ The component accepts the following props:
 |**`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`
 |**`onTableInit`**|function||Callback function that triggers when table state has been initialized. `function(action: string, tableState: object) => void`
-|**`setRowProps`**|function||Is called for each row and allows to return custom props for this row based on its data. `function(row: array, dataIndex: number) => object`
+|**`setRowProps`**|function||Is called for each row and allows you to return custom props for this row based on its data. `function(row: array, dataIndex: number) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
+|**`setTableProps`**|function||Is called for the table and allows you to return custom props for the table based on its data. `function() => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
 
 ## Customize Columns
 
@@ -229,7 +232,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
@@ -240,7 +244,8 @@ const columns = [
 |**`hint`**|string||Display hint icon with string as tooltip on hover.
 |**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(columnMeta, handleToggleColumn) => string`&#124;` React Component`
 |**`customBodyRender`**|function||Function that returns a string or React component. Used as display data within all table cells of a given column. `function(value, tableMeta, updateValue) => string`&#124;` React Component` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js)
-|**`setCellProps`**|function||Is called for each cell and allows to return custom props for this cell based on its data. `function(cellValue: string, rowIndex: number, columnIndex: number) => object`
+|**`setCellProps`**|function||Is called for each cell and allows to you return custom props for this cell based on its data. `function(cellValue: string, rowIndex: number, columnIndex: number) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
+|**`setCellHeaderProps`**|function||Is called for each header cell and allows you to return custom props for the header cell based on its data. `function(columnMeta: object) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
 
 `customHeadRender` is called with these arguments:
 

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',
     };