+# Table of contents
+* [Install](#install)
+* [Demo](#demo)
+* [Usage](#usage)
+* [API](#api)
+* [Customize Columns](#customize-columns)
+* [Plug-ins](#plug-ins)
+* [Customize Styling](#customize-styling)
+* [Remote Data](#remote-data)
+* [Localization](#localization)
+* [Contributing](#contributing)
+* [License](#licence)
+* [Thanks](#thanks)
+
## Install
`npm install mui-datatables --save`
+If your project doesn't already use them, you need to install `@material-ui/core` and `@material-ui/icons` as well.
+
## Demo
[](https://codesandbox.io/s/wy2rl1nyzl)
@@ -126,7 +142,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 +157,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 +177,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), 'scrollFullHeightFullWidth' (same as 'scrollFullHeight' except that paper container wraps the table and the width takes the full browser window), 'stackedFullWidth' (same as stacked with the addition of the paper container changes with 'scrollFullHeightFullWidth') **('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 +247,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(filterList, onChange(filterList, index, column), index, column)}||(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). `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.
+|**`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.
@@ -292,6 +308,15 @@ function(value: any, tableMeta: {
}, updateValue: function)
```
+## Plug-ins
+
+The table lends itself to plug-ins in many areas, especially in the customRender functions. Many use cases for these render functions are common, so a set of plug-ins are available that you can use.
+
+#### Available Plug-ins:
+|Name|Type|Default|Description
+|:--:|:-----|:--|:-----|
+|**`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/gregnb/mui-datatables/blob/master/examples/large-data-set/index.js)
+
## Customize Styling
Using Material-UI theme overrides will allow you to customize styling to your liking. First, determine which component you would want to target and then lookup the override classname. Let's start with a simple example where we will change the background color of a body cell to be red:
diff --git a/examples/Router/ExamplesGrid.js b/examples/Router/ExamplesGrid.js
index e90f149f3..67b0db654 100644
--- a/examples/Router/ExamplesGrid.js
+++ b/examples/Router/ExamplesGrid.js
@@ -3,6 +3,7 @@ import {Card, CardContent, Grid, Typography} from "@material-ui/core";
import React from "react";
import examples from "../examples";
import {withStyles} from "@material-ui/core/styles/index";
+import TextField from '@material-ui/core/TextField';
const styles = {
container: {
@@ -30,8 +31,20 @@ const styles = {
}
};
-function ExamplesGrid(props) {
- const {classes} = props;
+class ExamplesGrid extends React.Component {
+
+ state = {
+ searchVal: ''
+ }
+
+ setSearchVal = (val) => {
+ this.setState({
+ searchVal: val
+ });
+ }
+
+ render() {
+ const {classes} = this.props;
// Sort Examples alphabetically
const examplesSorted = {};
@@ -39,25 +52,37 @@ function ExamplesGrid(props) {
examplesSorted[key] = examples[key];
});
- const examplesSortedKeys = Object.keys(examplesSorted);
+ const examplesSortedKeys = Object.keys(examplesSorted).filter((item) => {
+ if (this.state.searchVal === '') return true;
+ console.dir(item);
+ return item.toLowerCase().indexOf( this.state.searchVal.toLowerCase() ) !== -1 ? true : false;
+ });
- return
-
+class Examples extends React.Component {
+
+ returnHome = () => {
+ this.props.history.push('/');
+ };
+
+ render() {
+ const {classes} = this.props;
+
+ var returnHomeStyle = {padding:'0px', margin:'20px 0 20px 0'};
+
+ return
+
}/>
{Object.keys(examples).map((label, index) => (
))}
-
-
- ;
+
+
+ {this.props.location.pathname !== '/' && (
+
+
+
+
+ )}
+