From a985b107fb17aa81361854fe24250b7cbddd51d8 Mon Sep 17 00:00:00 2001 From: Gabriel Liwerant Date: Mon, 25 Nov 2019 16:15:58 -0500 Subject: [PATCH] Improve documentation - 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.