From 029d7fa1d83b1d480bcd58352a2d92f09468894f Mon Sep 17 00:00:00 2001 From: Gabriel Liwerant Date: Tue, 26 Nov 2019 18:25:56 -0500 Subject: [PATCH 1/4] Improve documentation (#1081) - Fix formatting errors in docs - Add additional deprecation information - Provide data mapping example - Improve clarity around what some options do --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index c60bb780d..c67e5a925 100644 --- 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 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]]) +|**`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]]) **Use of arbitrary objects as data is not supported, and is deprecated. Consider using ids and mapping to external object data in custom renderers instead e.g. `const data = [{"Name": "Joe", "ObjectData": 123}] --> const dataToMapInCustomRender = { 123: { foo: 'bar', baz: 'qux', ... } }`** |**`options`**|object|Options used to describe table #### Options: @@ -141,7 +141,7 @@ The component accepts the following props: |**`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". +|**`selectableRows`**|string|'multiple'|Numbers of rows that can be selected. Options are "multiple", "single", "none". **(Boolean options have been deprecated.)** |**`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`. @@ -161,11 +161,11 @@ The component accepts the following props: |**`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) +|**`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) **('scroll' option has been deprecated in favor of `scrollMaxHeight`)** |**`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` DEPRECATED**|boolean|true|Enable/disable fixed header columns +|**`fixedHeader` DEPRECATED (use `fixedHeaderOptions`)**|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 @@ -231,14 +231,14 @@ const columns = [ |**`empty`**|boolean|false|This denotes whether the column has data or not (for use with intentionally empty 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` 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) +|**`filterOptions`**|{names, logic, display}||(These options affect the filter display and functionality from the filter dialog. To modify the filter chips that display after selecting filters, see `customFilterListOptions`) 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` DEPRECATED (use `customFilterListOptions`)**|function||Function that returns a string or array of strings used as the chip label(s). `function(value) => string OR arrayOfStrings` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-filters/index.js) +|**`customFilterListOptions`**|{render: function, update: function}|| (These options only affect the filter chips that display after filters are selected. To modify the filters themselves, see `filterOptions`) `render` returns a string or array of strings used as the chip label(s). `function(value) => string OR 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 |**`searchable`**|boolean|true|Exclude/include column from search results -|**`sortDirection`**|string||Set default sort order `enum('asc', 'desc', 'none')` +|**`sortDirection`**|string||Set default sort order `enum('asc', 'desc', 'none')` **(`null` option has been deprecated, use 'none' instead)** |**`print`**|boolean|true|Display column when printing |**`download`**|boolean|true|Display column in CSV download file |**`hint`**|string||Display hint icon with string as tooltip on hover. From e63291c93102dd1f61efc66e18ad794846d5f7c4 Mon Sep 17 00:00:00 2001 From: Gabriel Liwerant Date: Tue, 26 Nov 2019 18:26:08 -0500 Subject: [PATCH 2/4] Improve deprecation warnings and defaults for fixed header (#1084) Should prevent deprecation warnings from appearing frivolously based on default options, and should allows smoother transition in the next major version update. --- src/MUIDataTable.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index dc38aaf5c..7705afada 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -277,9 +277,6 @@ class MUIDataTable extends React.Component { updateOptions(options, props) { this.options = assignwith(options, props.options, (objValue, srcValue, key) => { - // If we have the new fixed header options, remove the deprecated one so we avoid unnecessary warnings - if (props.options.fixedHeaderOptions) delete options.fixedHeader; - // Merge any default options that are objects, as they will be overwritten otherwise if (key === 'textLabels' || key === 'downloadOptions') return merge(objValue, srcValue); return; @@ -312,11 +309,14 @@ class MUIDataTable extends React.Component { disableToolbarSelect: false, serverSide: false, rowHover: true, - fixedHeader: true, elevation: 4, rowsPerPage: 10, rowsPerPageOptions: [10, 15, 100], filter: true, + fixedHeaderOptions: { + xAxis: true, + yAxis: true + }, sortFilterList: true, sort: true, search: true, @@ -345,7 +345,7 @@ class MUIDataTable extends React.Component { if (this.options.responsive === 'scroll') { console.error('The "scroll" responsive option has been deprecated. It is being replaced by "scrollMaxHeight"'); } - if (this.options.fixedHeader) { + if (this.options.fixedHeader === false || this.options.fixedHeader) { console.error( 'fixedHeader has been deprecated in favor of fixedHeaderOptions: { xAxis: boolean, yAxis: boolean }. Once removed, the new options will be set by default to render like the old fixedHeader. However, if you are setting the fixedHeader value manually, it will no longer work in the next major version.', ); From 0011f0a6849a052800de00ab127e9800673b0187 Mon Sep 17 00:00:00 2001 From: Gabriel Liwerant Date: Tue, 26 Nov 2019 18:27:47 -0500 Subject: [PATCH 3/4] Prettify files --- src/MUIDataTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index 7705afada..38a5d346f 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -315,7 +315,7 @@ class MUIDataTable extends React.Component { filter: true, fixedHeaderOptions: { xAxis: true, - yAxis: true + yAxis: true, }, sortFilterList: true, sort: true, From a0e9385c0c85170977219c838e42ebd176edcfcc Mon Sep 17 00:00:00 2001 From: Gabriel Liwerant Date: Tue, 26 Nov 2019 18:27:53 -0500 Subject: [PATCH 4/4] 2.13.1 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index d45039b10..1875d0a9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "mui-datatables", - "version": "2.13.0", + "version": "2.13.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 86951f874..b6d995f92 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mui-datatables", - "version": "2.13.0", + "version": "2.13.1", "description": "Datatables for React using Material-UI", "main": "dist/index.js", "files": [