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} - }> - - All - - {filterData[index].map((filterColumn, filterIndex) => ( - - {filterColumn} - - ))} - - - ))} + {columns.map( + (column, index) => + column.filter ? ( + + {column.name} + }> + + All + + {filterData[index].map((filterColumn, filterIndex) => ( + + {filterColumn} + + ))} + + + ) : ( + 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);