v3.3.0 updates

README.md

@@ -212,13 +212,13 @@ The component accepts the following props:
 |**`rowsExpanded`**|array||User provided expanded rows.
 |**`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.
-|**`rowsSelected`**|array||User provided selected rows (must be provided an array of numbers only)
+|**`rowsSelected`**|array||User provided array of numbers (dataIndexes) which indicates the selected rows.
 |**`search`**|boolean|true|Show/hide search icon from toolbar.
 |**`searchPlaceholder`**|string||Search text placeholder. [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-search/index.js)
 |**`searchProps`**|object|{}|Props applied to the search text box. You can set method callbacks like onBlur, onKeyUp, etc, this way. [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-search/index.js)
 |**`searchOpen`**|boolean|false|Initially displays search bar.
-|**`searchText`**|string||Initial search text.
-|**`selectableRows`**|string|'multiple'|Numbers of rows that can be selected. Options are "multiple", "single", "none".
+|**`searchText`**|string||Search text for the table.
+|**`selectableRows`**|string|'multiple'|Indicates if rows can be selected. Options are "multiple", "single", "none".
 |**`selectableRowsHeader`**|boolean|true|Show/hide the select all/deselect all checkbox header for selectable rows.
 |**`selectableRowsHideCheckboxes`**|boolean|false|Hides the checkboxes that appear when selectableRows is set to "multiple" or "single". Can provide a more custom UX, especially when paired with selectableRowsOnClick.
 |**`selectableRowsOnClick`**|boolean|false|Enable/disable select toggle when row is clicked. When False, only checkbox will trigger this action.
@@ -283,6 +283,7 @@ const columns = [
 |**`setCellProps`**|function||Is called for each cell and allows to you return custom props for this cell based on its data. `function(cellValue: string, rowIndex: number, columnIndex: number) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
 |**`sort`**|boolean|true|Enable/disable sorting on column.
 |**`sortCompare`**|function||Custom sort function for the column. Takes in an order string and returns a function that compares the two column values. If this method and options.customSort are both defined, this method will take precedence. `(order) => ({data: val1}, {data: val2}) => number` 
+|**`sortDescFirst`**|boolean|false|Causes the first click on a column to sort by desc rather than asc. [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-columns/index.js)
 |**`sortThirdClickReset`**|boolean|false|Allows for a third click on a column header to undo any sorting on the column. [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-columns/index.js)
 [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-sort/index.js). Note: currently doesn't work with table `customSort`
 |**`viewColumns`**|boolean|true|Allow user to toggle column visibility through 'View Column' list.

examples/column-sort/index.js

@@ -27,8 +27,8 @@ class Example extends React.Component {
           sortCompare: (order) => {
             return (obj1, obj2) => {
               console.log(order);
-              var val1 = parseInt(obj1.data, 10);
-              var val2 = parseInt(obj2.data, 10);
+              let val1 = parseInt(obj1.data, 10);
+              let val2 = parseInt(obj2.data, 10);
               return (val1 - val2) * (order === 'asc' ? 1 : -1);
             };
           }

examples/customize-columns/index.js

@@ -11,8 +11,9 @@ class Example extends React.Component {
         name: "Name",
         options: {
           filter: true,
-          display: 'excluded',
+          //display: 'excluded',
           sortThirdClickReset: true,
+          sortDescFirst: true,
         }
       },      
       {
@@ -46,8 +47,16 @@ class Example extends React.Component {
         name: "Salary",
         options: {
           filter: true,
-          sort: false,
+          sort: true,
           sortThirdClickReset: true,
+          sortDescFirst: true,
+          sortCompare: (order) => {
+            return (obj1, obj2) => {
+              var val1 = parseInt(obj1.data.substr(1).replace(/,/g,''), 10);
+              var val2 = parseInt(obj2.data.substr(1).replace(/,/g,''), 10);
+              return (val1 - val2) * (order === 'asc' ? 1 : -1);
+            };
+          }
         }
       }      
     ];

examples/customize-sorting/index.js

@@ -20,7 +20,7 @@ class Example extends React.Component {
       filter: true,
       filterType: 'dropdown',
       responsive: 'vertical',
-      customSort: (data, colIndex, order) => {
+      customSort: (data, colIndex, order, meta) => {
         return data.sort((a, b) => {
           return (a.data[colIndex].length < b.data[colIndex].length ? -1: 1 ) * (order === 'desc' ? 1 : -1);
         });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [

src/MUIDataTable.js

@@ -152,6 +152,7 @@ class MUIDataTable extends React.Component {
             setCellProps: PropTypes.func,
             setCellHeaderProps: PropTypes.func,
             sortThirdClickReset: PropTypes.bool,
+            sortDescFirst: PropTypes.bool,
           }),
         }),
       ]),
@@ -586,6 +587,7 @@ class MUIDataTable extends React.Component {
         viewColumns: true,
         sortCompare: null,
         sortThirdClickReset: false,
+        sortDescFirst: false,
       };
 
       columnOrder.push(colIndex);
@@ -1181,19 +1183,22 @@ class MUIDataTable extends React.Component {
       prevState => {
         let columns = cloneDeep(prevState.columns);
         let data = prevState.data;
-        let newOrder = 'asc'; // default
+        let newOrder = columns[index].sortDescFirst ? 'desc' : 'asc'; // default
+
+        let sequenceOrder = ['asc', 'desc'];
+        if (columns[index].sortDescFirst) {
+          sequenceOrder = ['desc', 'asc'];
+        }
+        if (columns[index].sortThirdClickReset) {
+          sequenceOrder.push('none');
+        }
 
         if (columns[index].name === this.state.sortOrder.name) {
-          switch (this.state.sortOrder.direction) {
-            case 'desc':
-              newOrder = columns[index].sortThirdClickReset ? 'none' : 'asc';
-              break;
-            case 'asc':
-              newOrder = 'desc';
-              break;
-            case 'none':
-              newOrder = 'asc';
-              break;
+          let pos = sequenceOrder.indexOf(this.state.sortOrder.direction);
+          if (pos !== -1) {
+            pos++;
+            if (pos >= sequenceOrder.length) pos = 0;
+            newOrder = sequenceOrder[pos];
           }
         }
 
@@ -1243,7 +1248,7 @@ class MUIDataTable extends React.Component {
       },
       () => {
         this.setTableAction('sort');
-
+        
         if (this.options.onColumnSortChange) {
           this.options.onColumnSortChange(this.state.sortOrder.name, this.state.sortOrder.direction);
         }
@@ -1723,7 +1728,8 @@ class MUIDataTable extends React.Component {
 
   sortTable(data, col, order, columnSortCompare = null) {
     let hasCustomTableSort = this.options.customSort && !columnSortCompare;
-    let dataSrc = hasCustomTableSort ? this.options.customSort(data, col, order || 'desc') : data;
+    let meta = {selectedRows: this.state.selectedRows}; // meta for customSort    
+    let dataSrc = hasCustomTableSort ? this.options.customSort(data, col, order || (this.options.sortDescFirst ? 'desc' : 'asc'), meta ) : data;
 
     // reset the order by index
     let noSortData;

src/components/Popover.js

@@ -69,7 +69,7 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
           aria-label="Close"
           onClick={handleRequestClose}
           className={closeIconClass}
-          style={{ position: 'absolute', right: '4px', top: '4px' }}>
+          style={{ position: 'absolute', right: '4px', top: '4px',zIndex:'1000' }}>
           <CloseIcon />
         </IconButton>
         {content}

src/components/TableFilter.js

@@ -342,7 +342,6 @@ class TableFilter extends React.Component {
   };
 
   resetFilters = () => {
-    console.log('resetFilters');
     this.setState({
       filterList: this.props.columns.map(() => []),
     });