Merge pull request #1340 from gregnb/filterFullWidth

Added filterOptions.fullWidth

README.md

@@ -269,7 +269,7 @@ const columns = [
 |**`empty`**|boolean|false|This denotes whether the column has data or not (for use with intentionally empty columns).
 |**`filter`**|boolean|true|Display column in filter list.
 |**`filterList`**|array||Filter value list [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, filterData), renderValue}||(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.
+|**`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/gregnb/mui-datatables/blob/master/examples/column-filters/index.js)</li><li>logic: custom filter logic [Example](https://github.com/gregnb/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/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.</li><li>renderValue: A function to customize filter choices [Example](https://github.com/gregnb/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>
 |**`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`.
 |**`hint`**|string||Display hint icon with string as tooltip on hover.
 |**`print`**|boolean|true|Display column when printing.

examples/column-options-update/index.js

@@ -12,7 +12,7 @@ class Example extends React.Component {
       [],
       []
     ],
-    filterOptions: ['this', 'test', 'is', 'working'],
+    filterOptions: ['Franky Miles', 'this', 'test', 'is', 'working'],
     display: ['true', 'true', 'true', 'true', 'true'],
     data: [
       ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
@@ -93,7 +93,10 @@ class Example extends React.Component {
         name: "Location",
         options: {
           display: this.state.display[2],
-          filter: false,
+          filter: true,
+          filterOptions: {
+            fullWidth: true,
+          },
           filterList: filterList[2].length ? filterList[2] : null,
         }
       },

src/components/TableFilter.js

@@ -213,9 +213,10 @@ class TableFilter extends React.Component {
       column.filterOptions && column.filterOptions.renderValue
         ? column.filterOptions.renderValue
         : v => (v != null ? v.toString() : '');
+    const cols = (column.filterOptions && column.filterOptions.fullWidth) === true ? 2 : 1;
 
     return (
-      <GridListTile key={index} cols={1} classes={{ tile: classes.gridListTile }}>
+      <GridListTile key={index} cols={cols} classes={{ tile: classes.gridListTile }}>
         <FormControl key={index} fullWidth>
           <InputLabel htmlFor={column.name}>{column.label}</InputLabel>
           <Select
@@ -244,9 +245,10 @@ class TableFilter extends React.Component {
     if (column.filterOptions && column.filterOptions.renderValue) {
       console.warn('Custom renderValue not supported for textField filters');
     }
+    const cols = (column.filterOptions && column.filterOptions.fullWidth) === true ? 2 : 1;
 
     return (
-      <GridListTile key={index} cols={1} classes={{ tile: classes.gridListTile }}>
+      <GridListTile key={index} cols={cols} classes={{ tile: classes.gridListTile }}>
         <FormControl key={index} fullWidth>
           <TextField
             fullWidth
@@ -265,8 +267,9 @@ class TableFilter extends React.Component {
     const { filterList } = this.state;
     const renderItem =
       column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : v => v;
+    const cols = (column.filterOptions && column.filterOptions.fullWidth) === true ? 2 : 1;
     return (
-      <GridListTile key={index} cols={1} classes={{ tile: classes.gridListTile }}>
+      <GridListTile key={index} cols={cols} classes={{ tile: classes.gridListTile }}>
         <FormControl key={index} fullWidth>
           <InputLabel htmlFor={column.name}>{column.label}</InputLabel>
           <Select
@@ -300,6 +303,7 @@ class TableFilter extends React.Component {
   renderCustomField(column, index) {
     const { classes, filterData, options } = this.props;
     const { filterList } = this.state;
+    const cols = (column.filterOptions && column.filterOptions.fullWidth) === true ? 2 : 1;
     const display =
       (column.filterOptions && column.filterOptions.display) ||
       (options.filterOptions && options.filterOptions.display);
@@ -313,7 +317,7 @@ class TableFilter extends React.Component {
     }
 
     return (
-      <GridListTile key={index} cols={1} classes={{ tile: classes.gridListTile }}>
+      <GridListTile key={index} cols={cols} classes={{ tile: classes.gridListTile }}>
         <FormControl key={index} fullWidth>
           {display(filterList, this.handleCustomChange, index, column, filterData)}
         </FormControl>