diff --git a/README.md b/README.md
index 3fbd6c258..1edaefc6e 100644
--- 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
index fa78436c5..bd77f3a9f 100644
--- 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
index 9e169ab19..48a8b8f22 100644
--- a/src/MUIDataTableFilter.js
+++ b/src/MUIDataTableFilter.js
@@ -38,36 +38,41 @@ class MUIDataTableFilter extends React.Component {
renderCheckbox(columns) {
const { filterStyles, filterData, filterList } = this.props;
- return columns.map((column, index) => (
-
-
-
- {column.name}
-
- {filterData[index].map((filterColumn, filterIndex) => (
- = 0 ? true : false}
+ return columns.map(
+ (column, index) =>
+ column.filter ? (
+
+
+
+ {column.name}
+
+ {filterData[index].map((filterColumn, filterIndex) => (
+ = 0 ? true : false}
+ classes={{
+ checked: filterStyles.checked,
+ }}
+ value={filterColumn}
+ />
+ }
+ label={filterColumn}
/>
- }
- label={filterColumn}
- />
- ))}
-
-
- ));
+ ))}
+
+
+ ) : (
+ false
+ ),
+ );
}
renderSelect(columns) {
@@ -75,32 +80,36 @@ class MUIDataTableFilter extends React.Component {
return (
- {columns.map((column, index) => (
-
- {column.name}
-
-
- ))}
+ {columns.map(
+ (column, index) =>
+ column.filter ? (
+
+ {column.name}
+
+
+ ) : (
+ false
+ ),
+ )}
);
}
render() {
const { columns, options, filterStyles, onFilterReset } = this.props;
- const dislayColumns = columns.filter(item => item.filter);
return (
@@ -120,7 +129,7 @@ class MUIDataTableFilter extends React.Component {
- {options.filterType === "checkbox" ? this.renderCheckbox(dislayColumns) : this.renderSelect(dislayColumns)}
+ {options.filterType === "checkbox" ? this.renderCheckbox(columns) : this.renderSelect(columns)}
);
}
diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
index bb018fb30..814ed500e 100644
--- a/test/MUIDataTable.test.js
+++ b/test/MUIDataTable.test.js
@@ -102,10 +102,10 @@ describe("", function() {
const shallowWrapper = shallow();
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);