fix misaligned columns when customized filter option turned on

gregnb · Mar 18, 2018 · fb54a64 · fb54a64
1 parent b9a0ebf
commit fb54a64
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -135,6 +135,7 @@ The component accepts the following props:
 |**`rowsPerPage`**|number|10|Number of rows allowed per page
 |**`rowsPerPageOptions`**|array|[10,15,20]|Options to provide in pagination for number of rows a user can select
 |**`rowHover`**|boolean|true|Enable/disable hover style over rows
+|**`sortFilterList`**|boolean|true|Enable/disable filter list sort
 |**`sort`**|boolean|true|Enable/disable sort on all columns
 |**`filter`**|boolean|true|Show/hide filter icon from toolbar
 |**`search`**|boolean|true|Show/hide search icon from toolbar

diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -116,6 +116,7 @@ class MUIDataTable extends React.Component {
       rowsPerPage: 10,
       rowsPerPageOptions: [10, 15, 100],
       filter: true,
+      sortFilterList: true,
       sort: true,
       search: true,
       print: true,
@@ -146,7 +147,7 @@ class MUIDataTable extends React.Component {
    */
 
   setTableData(props) {
-    const { options, data, columns } = props;
+    const { data, columns } = props;
 
     let columnData = [],
       filterData = [],
@@ -180,6 +181,10 @@ class MUIDataTable extends React.Component {
 
         if (filterData[colIndex].indexOf(value) < 0) filterData[colIndex].push(value);
       }
+
+      if (this.options.sortFilterList) {
+        filterData[colIndex].sort();
+      }
     });
 
     /* set source data and display Data set source set */

diff --git a/src/MUIDataTableFilter.js b/src/MUIDataTableFilter.js
@@ -38,69 +38,78 @@ class MUIDataTableFilter extends React.Component {
   renderCheckbox(columns) {
     const { filterStyles, filterData, filterList } = this.props;
 
-    return columns.map((column, index) => (
-      <div className={filterStyles.checkboxList} key={index}>
-        <FormGroup>
-          <Typography type="caption" className={filterStyles.checkboxListTitle}>
-            {column.name}
-          </Typography>
-          {filterData[index].map((filterColumn, filterIndex) => (
-            <FormControlLabel
-              key={filterIndex}
-              classes={{
-                root: filterStyles.checkboxFormControl,
-                label: filterStyles.checkboxFormControlLabel,
-              }}
-              control={
-                <Checkbox
-                  className={filterStyles.checkboxIcon}
-                  onChange={this.handleCheckboxChange.bind(null, index, filterColumn)}
-                  checked={filterList[index].indexOf(filterColumn) >= 0 ? true : false}
+    return columns.map(
+      (column, index) =>
+        column.filter ? (
+          <div className={filterStyles.checkboxList} key={index}>
+            <FormGroup>
+              <Typography type="caption" className={filterStyles.checkboxListTitle}>
+                {column.name}
+              </Typography>
+              {filterData[index].map((filterColumn, filterIndex) => (
+                <FormControlLabel
+                  key={filterIndex}
                   classes={{
-                    checked: filterStyles.checked,
+                    root: filterStyles.checkboxFormControl,
+                    label: filterStyles.checkboxFormControlLabel,
                   }}
-                  value={filterColumn}
+                  control={
+                    <Checkbox
+                      className={filterStyles.checkboxIcon}
+                      onChange={this.handleCheckboxChange.bind(null, index, filterColumn)}
+                      checked={filterList[index].indexOf(filterColumn) >= 0 ? true : false}
+                      classes={{
+                        checked: filterStyles.checked,
+                      }}
+                      value={filterColumn}
+                    />
+                  }
+                  label={filterColumn}
                 />
-              }
-              label={filterColumn}
-            />
-          ))}
-        </FormGroup>
-      </div>
-    ));
+              ))}
+            </FormGroup>
+          </div>
+        ) : (
+          false
+        ),
+    );
   }
 
   renderSelect(columns) {
     const { filterStyles, filterData, filterList } = this.props;
 
     return (
       <div className={filterStyles.selectRoot}>
-        {columns.map((column, index) => (
-          <FormControl className={filterStyles.selectFormControl} key={index}>
-            <InputLabel htmlFor={column.name}>{column.name}</InputLabel>
-            <Select
-              value={filterList[index] && filterList[index][0] ? filterList[index][0] : "All"}
-              name={column.name}
-              onChange={event => this.handleDropdownChange(event, index)}
-              input={<Input name={column.name} id={column.name} />}>
-              <MenuItem value="All" key={0}>
-                All
-              </MenuItem>
-              {filterData[index].map((filterColumn, filterIndex) => (
-                <MenuItem value={filterColumn} key={filterIndex + 1}>
-                  {filterColumn}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        ))}
+        {columns.map(
+          (column, index) =>
+            column.filter ? (
+              <FormControl className={filterStyles.selectFormControl} key={index}>
+                <InputLabel htmlFor={column.name}>{column.name}</InputLabel>
+                <Select
+                  value={filterList[index] && filterList[index][0] ? filterList[index][0] : "All"}
+                  name={column.name}
+                  onChange={event => this.handleDropdownChange(event, index)}
+                  input={<Input name={column.name} id={column.name} />}>
+                  <MenuItem value="All" key={0}>
+                    All
+                  </MenuItem>
+                  {filterData[index].map((filterColumn, filterIndex) => (
+                    <MenuItem value={filterColumn} key={filterIndex + 1}>
+                      {filterColumn}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            ) : (
+              false
+            ),
+        )}
       </div>
     );
   }
 
   render() {
     const { columns, options, filterStyles, onFilterReset } = this.props;
-    const dislayColumns = columns.filter(item => item.filter);
 
     return (
       <div className={filterStyles.root}>
@@ -120,7 +129,7 @@ class MUIDataTableFilter extends React.Component {
           </div>
           <div className={filterStyles.filtersSelected} />
         </div>
-        {options.filterType === "checkbox" ? this.renderCheckbox(dislayColumns) : this.renderSelect(dislayColumns)}
+        {options.filterType === "checkbox" ? this.renderCheckbox(columns) : this.renderSelect(columns)}
       </div>
     );
   }

diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
@@ -102,10 +102,10 @@ describe("<MUIDataTable />", function() {
     const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
     const state = shallowWrapper.state();
     const expectedResult = [
-      ["Joe James", "John Walsh", "Bob Herm", "James Houston"],
+      ["Bob Herm", "James Houston", "Joe James", "John Walsh"],
       ["Test Corp"],
-      ["Yonkers", "Hartford", "Tampa", "Dallas"],
-      ["NY", "CT", "FL", "TX"],
+      ["Dallas", "Hartford", "Tampa", "Yonkers"],
+      ["CT", "FL", "NY", "TX"],
     ];
 
     assert.deepEqual(state.filterData, expectedResult);