@sistent/mui-datatables 5.0.0 → 5.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -62
- package/dist/index.js +4 -3
- package/dist/index.js.map +1 -1
- package/package.json +11 -8
package/README.md
CHANGED
|
@@ -1,21 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
<img src="https://user-images.githubusercontent.com/19170080/34070522-e15d32e2-e235-11e7-8af5-fa704cdcad56.png" />
|
|
3
|
-
</div>
|
|
1
|
+
# MUI-Datatables
|
|
4
2
|
|
|
5
|
-
# MUI-Datatables - Datatables for MUI (formerly Material-UI)
|
|
6
|
-
|
|
7
|
-
[](https://travis-ci.org/gregnb/mui-datatables)
|
|
8
3
|
[](https://npmcharts.com/compare/mui-datatables?minimal=true)
|
|
9
|
-
[](https://coveralls.io/github/leecalcote/mui-datatables?branch=master)
|
|
10
5
|
[](https://badge.fury.io/js/mui-datatables)
|
|
11
6
|
|
|
12
|
-
MUI-Datatables is a responsive datatables component built on [Material-UI](https://www.material-ui.com). It comes with features like filtering,
|
|
13
|
-
|
|
14
|
-
Version 3 has been released! You can read about the [updates here](https://github.com/gregnb/mui-datatables/blob/master/docs/v2_to_v3_guide.md)!
|
|
15
|
-
|
|
16
|
-
<div align="center">
|
|
17
|
-
<img src="https://user-images.githubusercontent.com/19170080/38026128-eac9d506-3258-11e8-92a7-b0d06e5faa82.gif" />
|
|
18
|
-
</div>
|
|
7
|
+
MUI-Datatables is a responsive datatables component built on [Material-UI](https://www.material-ui.com). It comes with features like filtering, resizable columns, view/hide columns, draggable columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are three responsive modes "vertical", "standard", and "simple" for mobile/tablet devices.
|
|
19
8
|
|
|
20
9
|
# Table of contents
|
|
21
10
|
- [MUI-Datatables - Datatables for MUI (formerly Material-UI)](#mui-datatables---datatables-for-mui-formerly-material-ui)
|
|
@@ -55,13 +44,8 @@ If your project doesn't already use them, you need to install MUI v7 and its ico
|
|
|
55
44
|
| ^3.0.0 | ^4.10.0 | `@material-ui/core`,`@material-ui/icons` |
|
|
56
45
|
| ^3.8.0 | ^4.12.0 | `@material-ui/core`,`@material-ui/icons` |
|
|
57
46
|
| ^4.0.0 | ^5.9.3 | `@mui/material`,`@mui/icons-material` |
|
|
58
|
-
|
|
|
59
|
-
|
|
60
|
-
## Demo
|
|
47
|
+
| ^5.0.0 | ^7.3.7 | `@mui/material`,`@mui/icons-material` |
|
|
61
48
|
|
|
62
|
-
[](https://codesandbox.io/s/muidatatables-custom-toolbar-forked-j002q?file=/index.js)
|
|
63
|
-
|
|
64
|
-
Browse live demos of all examples in this repo in [here](https://codesandbox.io/s/github/gregnb/mui-datatables)!
|
|
65
49
|
|
|
66
50
|
## Usage
|
|
67
51
|
|
|
@@ -174,43 +158,43 @@ The component accepts the following props:
|
|
|
174
158
|
|Name|Type|Default|Description
|
|
175
159
|
|:--:|:-----|:--|:-----|
|
|
176
160
|
|**`caseSensitive `**|boolean|false|Enable/disable case sensitivity for search.
|
|
177
|
-
|**`confirmFilters`**|boolean|false|Works in conjunction with the **customFilterDialogFooter** option and makes it so filters have to be confirmed before being applied to the table. When this option is true, the customFilterDialogFooter callback will receive an applyFilters function which, when called, will apply the filters to the table. [Example](https://github.com/
|
|
161
|
+
|**`confirmFilters`**|boolean|false|Works in conjunction with the **customFilterDialogFooter** option and makes it so filters have to be confirmed before being applied to the table. When this option is true, the customFilterDialogFooter callback will receive an applyFilters function which, when called, will apply the filters to the table. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/serverside-filters/index.js)
|
|
178
162
|
|**`columnOrder`**|array||An array of numbers (column indices) indicating the order the columns should be displayed in. Defaults to the order provided by the Columns prop. This option is useful if you'd like certain columns to swap positions (see draggableColumns option).
|
|
179
163
|
|**`count`**|number||User provided override for total number of rows.
|
|
180
164
|
|**`customFilterDialogFooter `**|function||Add a custom footer to the filter dialog. `customFilterDialogFooter(curentFilterList: array, applyFilters: function) => React Component`
|
|
181
|
-
|**`customFooter`**|function||Render a custom table footer. `function(count, page, rowsPerPage, changeRowsPerPage, changePage, `[`textLabels: object`](https://github.com/
|
|
165
|
+
|**`customFooter`**|function||Render a custom table footer. `function(count, page, rowsPerPage, changeRowsPerPage, changePage, `[`textLabels: object`](https://github.com/leecalcote/mui-datatables/blob/master/src/textLabels.js)`) => string`|` React Component` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-footer/index.js)
|
|
182
166
|
|**`customRowRender `**|function||Override default row rendering with custom function. `customRowRender(data, dataIndex, rowIndex) => React Component`
|
|
183
167
|
|**`customSearch `**|function||Override default search with custom function. `customSearch(searchQuery: string, currentRow: array, columns: array) => boolean`
|
|
184
168
|
|**`customSearchRender `**|function||Render a custom table search. `customSearchRender(searchText: string, handleSearch, hideSearch, options) => React Component`
|
|
185
|
-
|**`customSort`**|function||Override default sorting with custom function. If you just need to override the sorting for a particular column, see the sortCompare method in the [column options](https://github.com/
|
|
186
|
-
|**`customTableBodyFooterRender`**|function||Render a footer under the table body but above the table's standard footer. This is useful for creating footers for individual columns. [Example](https://github.com/
|
|
169
|
+
|**`customSort`**|function||Override default sorting with custom function. If you just need to override the sorting for a particular column, see the sortCompare method in the [column options](https://github.com/leecalcote/mui-datatables#column-options). `function(data: array, colIndex: number, order: string) => array` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-sorting/index.js)
|
|
170
|
+
|**`customTableBodyFooterRender`**|function||Render a footer under the table body but above the table's standard footer. This is useful for creating footers for individual columns. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-footer/index.js)
|
|
187
171
|
|**`customToolbar`**|function||Render a custom toolbar `function({displayData}) => React Component`
|
|
188
172
|
|**`customToolbarSelect`**|function||Render a custom selected rows toolbar. `function(selectedRows, displayData, setSelectedRows) => void`
|
|
189
173
|
|**`download`**|boolean or string|true|Show/hide download icon from toolbar. Possible values:<p><ul><li>true: Button is visible and clickable.</li><li>false: Button is not visible.</li><li>disabled: Button is visible, but not clickable.</li></ul></p>
|
|
190
174
|
|**`downloadOptions`**|object|see ->|An object of options to change the output of the CSV file:<p><ul><li>`filename`: string</li><li>`separator`: string</li><li>`filterOptions`: object<ul><li>`useDisplayedColumnsOnly`: boolean</li><li>`useDisplayedRowsOnly`: boolean</li></ul></li></ul></p><p>Default Value:`{filename: 'tableDownload.csv', separator: ','}`</p>
|
|
191
175
|
|**`draggableColumns`**|object|{}|An object of options describing how dragging columns should work. The options are: <p><ul><li>`enabled:boolean`: Indicates if draggable columns are enabled. Defaults to false.</li><li>`transitionTime:number`: The time in milliseconds it takes for columns to swap positions. Defaults to 300.</li></ul></p>To disable the dragging of a particular column, see the "draggable" option in the columns options. Dragging a column to a new position updates the columnOrder array and triggers the onColumnOrderChange callback.
|
|
192
176
|
|**`elevation`**|number|4|Shadow depth applied to Paper component.
|
|
193
|
-
|**`enableNestedDataAccess`**|string|""|If provided a non-empty string (ex: "."), it will use that value in the column's names to access nested data. For example, given a enableNestedDataAccess value of "." and a column name of "phone.cell", the column would use the value found in `phone:{cell:"555-5555"}`. Any amount of nesting will work. [Example](https://github.com/
|
|
194
|
-
|**`expandableRows`**|boolean|false|Enable/disable expandable rows. [Example](https://github.com/
|
|
177
|
+
|**`enableNestedDataAccess`**|string|""|If provided a non-empty string (ex: "."), it will use that value in the column's names to access nested data. For example, given a enableNestedDataAccess value of "." and a column name of "phone.cell", the column would use the value found in `phone:{cell:"555-5555"}`. Any amount of nesting will work. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/data-as-objects/index.js) demonstrates the functionality.
|
|
178
|
+
|**`expandableRows`**|boolean|false|Enable/disable expandable rows. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/expandable-rows/index.js)
|
|
195
179
|
|**`expandableRowsHeader`**|boolean|true|Show/hide the expand all/collapse all row header for expandable rows.
|
|
196
180
|
|**`expandableRowsOnClick`**|boolean|false|Enable/disable expand trigger when row is clicked. When False, only expand icon will trigger this action.
|
|
197
181
|
|**`filter`**|boolean or string|true|Show/hide filter icon from toolbar. Possible values:<p><ul><li>true: Button is visiable and clickable.</li><li>false: Button is not visible.</li><li>disabled: Button is visible, but not clickable.</li></ul></p>
|
|
198
182
|
|**`filterArrayFullMatch`**|boolean|true|For array values, default checks if all the filter values are included in the array. If false, checks if at least one of the filter values is in the array.
|
|
199
183
|
|**`filterType`**|string||Choice of filtering view. `enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom')`
|
|
200
|
-
|**`fixedHeader`**|boolean|true|Enable/disable a fixed header for the table [Example](https://github.com/
|
|
201
|
-
|**`fixedSelectColumn`**|boolean|true|Enable/disable fixed select column. [Example](https://github.com/
|
|
184
|
+
|**`fixedHeader`**|boolean|true|Enable/disable a fixed header for the table [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/fixed-header/index.js)
|
|
185
|
+
|**`fixedSelectColumn`**|boolean|true|Enable/disable fixed select column. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/fixed-header/index.js)
|
|
202
186
|
|**`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`.
|
|
203
187
|
|**`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`.
|
|
204
|
-
|**`jumpToPage`**|boolean|false|When true, this option adds a dropdown to the table's footer that allows a user to navigate to a specific page. [Example](https://github.com/
|
|
188
|
+
|**`jumpToPage`**|boolean|false|When true, this option adds a dropdown to the table's footer that allows a user to navigate to a specific page. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/large-data-set/index.js)
|
|
205
189
|
|**`onCellClick`**|function||Callback function that triggers when a cell is clicked. `function(colData: any, cellMeta: { colIndex: number, rowIndex: number, dataIndex: number }) => void`
|
|
206
190
|
|**`onChangePage`**|function||Callback function that triggers when a page has changed. `function(currentPage: number) => void`
|
|
207
191
|
|**`onChangeRowsPerPage`**|function||Callback function that triggers when the number of rows per page has changed. `function(numberOfRows: number) => void`
|
|
208
192
|
|**`onColumnOrderChange`**|function||Callback function that triggers when a column has been dragged to a new location. `function(newColumnOrder:array, columnIndex:number, newPosition:number) => void`
|
|
209
193
|
|**`onColumnSortChange`**|function||Callback function that triggers when a column has been sorted. `function(changedColumn: string, direction: string) => void`
|
|
210
|
-
|**`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. This method can be used to add the Excel specific BOM character (see this [example](https://github.com/
|
|
194
|
+
|**`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. This method can be used to add the Excel specific BOM character (see this [example](https://github.com/leecalcote/mui-datatables/pull/722#issuecomment-526346440)). `function(buildHead: (columns) => string, buildBody: (data) => string, columns, data) => string`. Return `false` to cancel download of file.
|
|
211
195
|
|**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumn: string, filterList: array, type: enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom', 'chip', 'reset'), changedColumnIndex, displayData) => void`
|
|
212
|
-
|**`onFilterChipClose`**|function||Callback function that is triggered when a user clicks the "X" on a filter chip. `function(index : number, removedFilter : string, filterList : array) => void` [Example](https://github.com/
|
|
213
|
-
|**`onFilterConfirm`**|function||Callback function that is triggered when a user presses the "confirm" button on the filter popover. This occurs only if you've set **confirmFilters** option to true. `function(filterList: array) => void` [Example](https://github.com/
|
|
196
|
+
|**`onFilterChipClose`**|function||Callback function that is triggered when a user clicks the "X" on a filter chip. `function(index : number, removedFilter : string, filterList : array) => void` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/serverside-filters/index.js)
|
|
197
|
+
|**`onFilterConfirm`**|function||Callback function that is triggered when a user presses the "confirm" button on the filter popover. This occurs only if you've set **confirmFilters** option to true. `function(filterList: array) => void` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/serverside-filters/index.js)
|
|
214
198
|
|**`onFilterDialogClose`**|function||Callback function that triggers when the filter dialog closes. `function() => void`
|
|
215
199
|
|**`onFilterDialogOpen`**|function||Callback function that triggers when the filter dialog opens. `function() => void`
|
|
216
200
|
|**`onRowClick`**|function||Callback function that triggers when a row is clicked. `function(rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }) => void`
|
|
@@ -226,17 +210,17 @@ The component accepts the following props:
|
|
|
226
210
|
|**`page`**|number||User provided page for pagination.
|
|
227
211
|
|**`pagination`**|boolean|true|Enable/disable pagination.
|
|
228
212
|
|**`print`**|boolean or string|true|Show/hide print icon from toolbar. Possible values:<p><ul><li>true: Button is visiable and clickable.</li><li>false: Button is not visible.</li><li>disabled: Button is visible, but not clickable.</li></ul></p>
|
|
229
|
-
|**`renderExpandableRow`**|function||Render expandable row. `function(rowData, rowMeta) => React Component` [Example](https://github.com/
|
|
213
|
+
|**`renderExpandableRow`**|function||Render expandable row. `function(rowData, rowMeta) => React Component` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/expandable-rows/index.js)
|
|
230
214
|
|**`resizableColumns`**|boolean|false|Enable/disable resizable columns.
|
|
231
|
-
|**`responsive`**|string|'stacked'|Enable/disable responsive table views. Options: <p><ul><li>"vertical" (default value): In smaller views the table cells will collapse such that the heading is to the left of the cell value.</li><li>"standard": Table will stay in the standard mode but make small changes to better fit the allocated space.<li>"simple": On very small devices the table rows will collapse into simple display.</li></ul></p>[Example](https://github.com/
|
|
215
|
+
|**`responsive`**|string|'stacked'|Enable/disable responsive table views. Options: <p><ul><li>"vertical" (default value): In smaller views the table cells will collapse such that the heading is to the left of the cell value.</li><li>"standard": Table will stay in the standard mode but make small changes to better fit the allocated space.<li>"simple": On very small devices the table rows will collapse into simple display.</li></ul></p>[Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/simple/index.js)
|
|
232
216
|
|**`rowHover`**|boolean|true|Enable/disable hover style over rows.
|
|
233
217
|
|**`rowsExpanded`**|array||User provided expanded rows.
|
|
234
218
|
|**`rowsPerPage`**|number|10|Number of rows allowed per page.
|
|
235
219
|
|**`rowsPerPageOptions`**|array|[10,15,100]|Options to provide in pagination for number of rows a user can select.
|
|
236
220
|
|**`rowsSelected`**|array||User provided array of numbers (dataIndexes) which indicates the selected rows.
|
|
237
221
|
|**`search`**|boolean or string|true|Show/hide search icon from toolbar. Possible values:<p><ul><li>true: Button is visiable and clickable.</li><li>false: Button is not visible.</li><li>disabled: Button is visible, but not clickable.</li></ul></p>
|
|
238
|
-
|**`searchPlaceholder`**|string||Search text placeholder. [Example](https://github.com/
|
|
239
|
-
|**`searchProps`**|object|{}|Props applied to the search text box. You can set method callbacks like onBlur, onKeyUp, etc, this way. [Example](https://github.com/
|
|
222
|
+
|**`searchPlaceholder`**|string||Search text placeholder. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-search/index.js)
|
|
223
|
+
|**`searchProps`**|object|{}|Props applied to the search text box. You can set method callbacks like onBlur, onKeyUp, etc, this way. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-search/index.js)
|
|
240
224
|
|**`searchOpen`**|boolean|false|Initially displays search bar.
|
|
241
225
|
|**`searchAlwaysOpen`**|boolean|false|Always displays search bar, and hides search icon in toolbar.
|
|
242
226
|
|**`searchText`**|string||Search text for the table.
|
|
@@ -246,12 +230,12 @@ The component accepts the following props:
|
|
|
246
230
|
|**`selectableRowsOnClick`**|boolean|false|Enable/disable select toggle when row is clicked. When False, only checkbox will trigger this action.
|
|
247
231
|
|**`selectToolbarPlacement`**|string|'replace'|Controls the visibility of the Select Toolbar, options are 'replace' (select toolbar replaces default toolbar when a row is selected), 'above' (select toolbar will appear above default toolbar when a row is selected) and 'none' (select toolbar will never appear)
|
|
248
232
|
|**`serverSide`**|boolean|false|Enable remote data source.
|
|
249
|
-
|**`setFilterChipProps`**|function||Is called for each filter chip and allows you to place custom props on a filter chip. `function(colIndex: number, colName: string, filterValue: string) => object` [Example](https://github.com/
|
|
250
|
-
|**`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, rowIndex: number) => object` [Example](https://github.com/
|
|
251
|
-
|**`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/
|
|
233
|
+
|**`setFilterChipProps`**|function||Is called for each filter chip and allows you to place custom props on a filter chip. `function(colIndex: number, colName: string, filterValue: string) => object` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-filter/index.js)
|
|
234
|
+
|**`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, rowIndex: number) => object` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-styling/index.js)
|
|
235
|
+
|**`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/leecalcote/mui-datatables/blob/master/examples/customize-styling/index.js)
|
|
252
236
|
|**`sort`**|boolean|true|Enable/disable sort on all columns.
|
|
253
237
|
|**`sortFilterList`**|boolean|true|Enable/disable alphanumeric sorting of filter lists.
|
|
254
|
-
|**`sortOrder`**|object|{}|Sets the column to sort by and its sort direction. To remove/reset sorting, input in an empty object. The object options are the column name and the direction: `name: string, direction: enum('asc', 'desc')` [Example](https://github.com/
|
|
238
|
+
|**`sortOrder`**|object|{}|Sets the column to sort by and its sort direction. To remove/reset sorting, input in an empty object. The object options are the column name and the direction: `name: string, direction: enum('asc', 'desc')` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-columns/index.js)
|
|
255
239
|
|**`tableId`**|string|auto generated|A string that is used internally for identifying the table. It's auto-generated, however, if you need it set to a custom value (ex: server-side rendering), you can set it via this property.
|
|
256
240
|
|**`tableBodyHeight`**|string|'auto'|CSS string for the height of the table (ex: '500px', '100%', 'auto').
|
|
257
241
|
|**`tableBodyMaxHeight`**|string||CSS string for the height of the table (ex: '500px', '100%', 'auto').
|
|
@@ -287,28 +271,28 @@ const columns = [
|
|
|
287
271
|
#### Column Options:
|
|
288
272
|
|Name|Type|Default|Description
|
|
289
273
|
|:--:|:-----|:--|:-----|
|
|
290
|
-
|**`customBodyRender`**|function||Function that returns a string or React component. Used to display data within all table cells of a given column. The value returned from this function will be used for filtering in the filter dialog. If this isn't need, you may want to consider customBodyRenderLite instead. `function(value, tableMeta, updateValue) => string`|` React Component` [Example](https://github.com/
|
|
291
|
-
|**`customBodyRenderLite`**|function||Function that returns a string or React component. Used to display data within all table cells of a given column. This method performs better than customBodyRender but has the following caveats: <p><ul><li>The value returned from this function is **not** used for filtering, so the filter dialog will use the raw data from the data array.</li><li>This method only gives you the dataIndex and rowIndex, leaving you to lookup the column value.</li></ul></p>`function(dataIndex, rowIndex) => string`|` React Component` [Example](https://github.com/
|
|
274
|
+
|**`customBodyRender`**|function||Function that returns a string or React component. Used to display data within all table cells of a given column. The value returned from this function will be used for filtering in the filter dialog. If this isn't need, you may want to consider customBodyRenderLite instead. `function(value, tableMeta, updateValue) => string`|` React Component` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/component/index.js)
|
|
275
|
+
|**`customBodyRenderLite`**|function||Function that returns a string or React component. Used to display data within all table cells of a given column. This method performs better than customBodyRender but has the following caveats: <p><ul><li>The value returned from this function is **not** used for filtering, so the filter dialog will use the raw data from the data array.</li><li>This method only gives you the dataIndex and rowIndex, leaving you to lookup the column value.</li></ul></p>`function(dataIndex, rowIndex) => string`|` React Component` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/large-data-set/index.js)
|
|
292
276
|
|**`customHeadLabelRender`**|function||Function that returns a string or React component. Used for creating a custom header to a column. This method only affects the display in the table's header, other areas of the table (such as the View Columns popover), will use the column's label. `function(columnMeta : object) => string`|` React Component`
|
|
293
|
-
|**`customFilterListOptions`**|object|| (These options only affect the filter chips that display after filters are selected. To modify the filters themselves, see `filterOptions`) <p><ul><li>`render`: function that returns a string or array of strings used as the chip label(s). `function(value) => string OR arrayOfStrings` [Example](https://github.com/
|
|
277
|
+
|**`customFilterListOptions`**|object|| (These options only affect the filter chips that display after filters are selected. To modify the filters themselves, see `filterOptions`) <p><ul><li>`render`: function that returns a string or array of strings used as the chip label(s). `function(value) => string OR arrayOfStrings` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-filter/index.js)</li><li>`update`: function that returns a `filterList (see above)` allowing for custom filter updates when removing the filter chip. filterType must be set to "custom". `function(filterList, filterPos, index) => filterList` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-filter/index.js)</li></ul></p>
|
|
294
278
|
|**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(columnMeta, handleToggleColumn, sortOrder) => string`|` React Component`
|
|
295
279
|
|**`display`**|boolean or string|true|Display column in table. Possible values:<p><ul><li>true: Column is visible and toggleable via the View Columns popover in the Toolbar.</li><li>false: Column is not visible but can be made visible via the View Columns popover in the Toolbar.</li><li>excluded: Column is not visible and not toggleable via the View Columns popover in the Toolbar.</li></ul></p><p>See also: `viewColumns` and `filter` options.</p>
|
|
296
280
|
|**`download`**|boolean|true|Display column in CSV download file.
|
|
297
281
|
|**`draggable`**|boolean|true|Determines if a column can be dragged. The draggableColumns.enabled option must also be true.
|
|
298
282
|
|**`empty`**|boolean|false|This denotes whether the column has data or not (for use with intentionally empty columns).
|
|
299
283
|
|**`filter`**|boolean|true|Display column in filter list.
|
|
300
|
-
|**`filterList`**|array||Filter value list [Example](https://github.com/
|
|
301
|
-
|**`filterOptions`**|object||<p><i>These options affect the filter display and functionality from the filter dialog. To modify the filter chips that display after selecting filters, see `customFilterListOptions`</i></p><p>This option is an object of several options for customizing the filter display and how filtering works.</p><p><ul><li>names: custom names for the filter fields [Example](https://github.com/
|
|
284
|
+
|**`filterList`**|array||Filter value list [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/column-filters/index.js)
|
|
285
|
+
|**`filterOptions`**|object||<p><i>These options affect the filter display and functionality from the filter dialog. To modify the filter chips that display after selecting filters, see `customFilterListOptions`</i></p><p>This option is an object of several options for customizing the filter display and how filtering works.</p><p><ul><li>names: custom names for the filter fields [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/column-filters/index.js)</li><li>logic: custom filter logic [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-filter/index.js)</li><li>display(filterList, onChange(filterList, index, column), index, column, filterData): Custom rendering inside the filter dialog [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-filter/index.js). `filterList` must be of the same type in the main column options, that is an array of arrays, where each array corresponds to the filter list for a given column.</li><li>renderValue: A function to customize filter choices [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-filter/index.js). Example use case: changing empty strings to "(empty)" in a dropdown.</li><li>fullWidth (boolean): Will force a filter option to take up the grid's full width.</li></ul></p>
|
|
302
286
|
|**`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`.
|
|
303
287
|
|**`hint`**|string||Display hint icon with string as tooltip on hover.
|
|
304
288
|
|**`print`**|boolean|true|Display column when printing.
|
|
305
289
|
|**`searchable`**|boolean|true|Exclude/include column from search results.
|
|
306
|
-
|**`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/
|
|
307
|
-
|**`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/
|
|
290
|
+
|**`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/leecalcote/mui-datatables/blob/master/examples/customize-styling/index.js)
|
|
291
|
+
|**`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/leecalcote/mui-datatables/blob/master/examples/customize-styling/index.js)
|
|
308
292
|
|**`sort`**|boolean|true|Enable/disable sorting on column.
|
|
309
|
-
|**`sortCompare`**|function||Custom sort function for the column. Takes in an order string and returns a function that compares the two column values. If this method and options.customSort are both defined, this method will take precedence. `(order) => ({data: val1}, {data: val2}) => number` [Example](https://github.com/
|
|
310
|
-
|**`sortDescFirst`**|boolean|false|Causes the first click on a column to sort by desc rather than asc. [Example](https://github.com/
|
|
311
|
-
|**`sortThirdClickReset`**|boolean|false|Allows for a third click on a column header to undo any sorting on the column. [Example](https://github.com/
|
|
293
|
+
|**`sortCompare`**|function||Custom sort function for the column. Takes in an order string and returns a function that compares the two column values. If this method and options.customSort are both defined, this method will take precedence. `(order) => ({data: val1}, {data: val2}) => number` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/column-sort/index.js)
|
|
294
|
+
|**`sortDescFirst`**|boolean|false|Causes the first click on a column to sort by desc rather than asc. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-columns/index.js)
|
|
295
|
+
|**`sortThirdClickReset`**|boolean|false|Allows for a third click on a column header to undo any sorting on the column. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-columns/index.js)
|
|
312
296
|
|**`viewColumns`**|boolean|true|Allow user to toggle column visibility through 'View Column' list.
|
|
313
297
|
|
|
314
298
|
`customHeadRender` is called with these arguments:
|
|
@@ -363,7 +347,7 @@ The table lends itself to plug-ins in many areas, especially in the customRender
|
|
|
363
347
|
#### Available Plug-ins:
|
|
364
348
|
|Name|Type|Default|Description
|
|
365
349
|
|:--:|:-----|:--|:-----|
|
|
366
|
-
|**`debounceSearchRender`**|function||Function that returns a function for the customSearchRender method. This plug-in allows you to create a debounced search which can be useful for server-side tables and tables with large data sets. `function(debounceWait) => function` [Example](https://github.com/
|
|
350
|
+
|**`debounceSearchRender`**|function||Function that returns a function for the customSearchRender method. This plug-in allows you to create a debounced search which can be useful for server-side tables and tables with large data sets. `function(debounceWait) => function` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/large-data-set/index.js)
|
|
367
351
|
|
|
368
352
|
## Customize Styling
|
|
369
353
|
|
|
@@ -439,8 +423,8 @@ class CustomDataTable extends React.Component {
|
|
|
439
423
|
}
|
|
440
424
|
```
|
|
441
425
|
Supported customizable components:
|
|
442
|
-
* `Checkbox` - A special 'data-description' prop lets you differentiate checkboxes [Example](https://github.com/
|
|
443
|
-
* `ExpandButton` [Example](https://github.com/
|
|
426
|
+
* `Checkbox` - A special 'data-description' prop lets you differentiate checkboxes [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/custom-components/index.js). Valid values: ['row-select', 'row-select-header', 'table-filter', 'table-view-col'].The dataIndex is also passed via the "data-index" prop.
|
|
427
|
+
* `ExpandButton` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/expandable-rows/index.js)
|
|
444
428
|
* `DragDropBackend`
|
|
445
429
|
* `TableBody`
|
|
446
430
|
* `TableViewCol` - The component that displays the view/hide list of columns on the toolbar.
|
|
@@ -452,14 +436,14 @@ Supported customizable components:
|
|
|
452
436
|
* `TableToolbarSelect`
|
|
453
437
|
* `Tooltip`
|
|
454
438
|
* `icons` - An object containing optional replacement icon classes for the actions
|
|
455
|
-
toolbar. [Example](https://github.com/
|
|
439
|
+
toolbar. [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/customize-toolbar-icons/index.js)
|
|
456
440
|
* `SearchIcon`
|
|
457
441
|
* `DownloadIcon`
|
|
458
442
|
* `PrintIcon`
|
|
459
443
|
* `ViewColumnIcon`
|
|
460
444
|
* `FilterIcon`
|
|
461
445
|
|
|
462
|
-
For more information, please see this [example](https://github.com/
|
|
446
|
+
For more information, please see this [example](https://github.com/leecalcote/mui-datatables/blob/master/examples/custom-components/index.js). Additionally, all examples can be viewed [live](https://codesandbox.io/s/github/leecalcote/mui-datatables) at our CodeSandbox.
|
|
463
447
|
|
|
464
448
|
## Remote Data
|
|
465
449
|
|
|
@@ -476,7 +460,7 @@ const options = {
|
|
|
476
460
|
};
|
|
477
461
|
```
|
|
478
462
|
|
|
479
|
-
To see an example **[Click Here](https://github.com/
|
|
463
|
+
To see an example **[Click Here](https://github.com/leecalcote/mui-datatables/blob/master/examples/serverside-pagination/index.js)**
|
|
480
464
|
|
|
481
465
|
## Localization
|
|
482
466
|
|
|
@@ -538,9 +522,3 @@ After you make your changes locally, you can run the test suite with `npm test`.
|
|
|
538
522
|
|
|
539
523
|
## License
|
|
540
524
|
The files included in this repository are licensed under the MIT license.
|
|
541
|
-
|
|
542
|
-
## Thanks
|
|
543
|
-
|
|
544
|
-
[<img src="https://www.browserstack.com/images/mail/browserstack-logo-footer.png" width="120">](https://www.browserstack.com/)
|
|
545
|
-
|
|
546
|
-
Thank you to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers.
|