hook refactor, doc updates, bug fix, example updates, test adjustment…

…s, enhanced callback parameters for several methods

.eslintrc

@@ -38,6 +38,7 @@
     "no-tabs": 2,
     "react/self-closing-comp": 2,
     "react/no-typos": 2,
+    "react/jsx-no-duplicate-props": "warn",
     "jsx-a11y/no-autofocus": [ 2, {
       "ignoreNonDOM": true
     }]

examples/ExamplesGrid.js

@@ -1,8 +1,9 @@
 import {Link} from "react-router-dom";
 import {Card, CardContent, Grid, Typography} from "@material-ui/core";
-import React from "react";
+import React, {useState} from "react";
 import examples from "./examples";
 import {makeStyles} from "@material-ui/core/styles";
+import TextField from '@material-ui/core/TextField';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -34,19 +35,33 @@ const useStyles = makeStyles(theme => ({
 
 function ExamplesGrid(props) {
   const classes = useStyles();
+  const [searchVal, setSearchVal] = useState('');
 
   // Sort Examples alphabetically
   const examplesSorted = {};
-  Object.keys(examples).sort().forEach(function (key) {
+  Object.keys(examples).sort((a,b) => {
+    var aa = a.toLowerCase();
+    var bb =b.toLowerCase();
+    return aa < bb ? -1 : (aa > bb ? 1 : 0);
+  }).forEach(function (key) {
       examplesSorted[key] = examples[key];
   });
 
-  const examplesSortedKeys = Object.keys(examplesSorted);
+  const examplesSortedKeys = Object.keys(examplesSorted).filter((item) => {
+    if (searchVal === '') return true;
+    console.dir(item);
+    return item.toLowerCase().indexOf( searchVal.toLowerCase() ) !== -1 ? true : false;
+  });
 
   return (
       <React.Fragment>
         <Typography variant="h5" align="center">Choose an Example</Typography>
         <Typography variant="subtitle2" align="center">({examplesSortedKeys.length}) Examples</Typography>
+
+        <Typography variant="subtitle2" align="center" style={{margin:'10px'}}>
+          <TextField placeholder="Search Examples" value={searchVal} onChange={(e) => setSearchVal(e.target.value)} />
+        </Typography>
+
         <Grid container className={classes.container} spacing={2}>
           {examplesSortedKeys.map((label, index) => (
             <Grid key={index} item md={2}>

examples/csv-export/index.js

@@ -86,8 +86,8 @@ class Example extends React.Component {
 
         return false;
       },
-      onRowsSelect: (rowsSelected, allRows) => {
-        console.log(rowsSelected, allRows);
+      onRowsSelect: (newRowsSelected, allRows, rowsSelected) => {
+        console.log(newRowsSelected, allRows, rowsSelected);
       },
       onRowsDelete: rowsDeleted => {
         console.log(rowsDeleted, 'were deleted!');

examples/customize-filter/index.js

@@ -144,6 +144,12 @@ class Example extends React.Component {
       filter: true,
       filterType: 'dropdown',
       responsive: 'scrollMaxHeight',
+      onFilterChange: (name, filterList, index) => {
+        console.log('onFilterChange callback');
+        console.log('Col Name:'+name);
+        console.log('Col Index:'+index);
+        console.log(filterList);
+      }
     };
 
     return (

examples/customize-search/index.js

@@ -4,7 +4,7 @@ import MUIDataTable from '../../src/';
 
 class Example extends React.Component {
   state = {
-    searchText: 'Computer'
+    searchText: ''
   };
 
   render() {
@@ -91,6 +91,7 @@ class Example extends React.Component {
           console.log('onKeyUp!');
         }
       },
+      showSearch: true,
       customSearch: (searchQuery, currentRow, columns) => {
         let isFound = false;
         currentRow.forEach(col => {

examples/examples.js

@@ -57,7 +57,7 @@ export default {
     'OnTableInit': OnTableInit,
     'resizableColumns': ResizableColumns,
     'selectableRows': SelectableRows,
-    'serverSide Options': ServerSideOptions,
+    //'serverSide Options': ServerSideOptions, // this example does not do what it says it does, commenting it out
     'serverSide Pagination': ServerSidePagination,
     'Simple': Simple,
     'Simple No Toolbar': SimpleNoToolbar,

examples/expandable-rows/index.js

@@ -88,6 +88,12 @@ class Example extends React.Component {
         return true;
       },
       rowsExpanded: [0, 1],
+      onRowsExpand: (rowExpanded, allRowsExpanded, rowsExpanded) => {
+        console.log('onRowsExpand');
+        console.dir(rowExpanded);
+        console.dir(allRowsExpanded);
+        console.dir(rowsExpanded);
+      },
       renderExpandableRow: (rowData, rowMeta) => {
         const colSpan = rowData.length + 1;
         return (
@@ -98,7 +104,6 @@ class Example extends React.Component {
           </TableRow>
         );
       },
-      onRowsExpand: (curExpanded, allExpanded) => console.log(curExpanded, allExpanded)
     };
 
     return (

examples/index.js

@@ -4,6 +4,8 @@ import {HashRouter as Router, Route, Switch} from 'react-router-dom';
 import {makeStyles} from "@material-ui/core/styles";
 import ExamplesGrid from "./ExamplesGrid";
 import examples from "./examples";
+import Button from "@material-ui/core/Button";
+import {withRouter} from 'react-router-dom';
 
 const useStyles = makeStyles({
   root: {
@@ -15,22 +17,42 @@ const useStyles = makeStyles({
   },
 });
 
-function Examples(props) {
+let Examples = withRouter(function(props) {
   const classes = useStyles();
-  return (
+
+  const returnHome = () => {
+    props.history.push('/');
+  };
+
+  var myStyle = {padding:'0px', marginTop:'20px'};
+
+  return (    
     <main className={classes.root}>
       <div className={classes.contentWrapper}>
-        <Router hashType="noslash">
-          <Switch>
-            <Route path="/" exact render={() => <ExamplesGrid examples={examples}/>} />
-              {Object.keys(examples).map((label, index) => (
-                <Route key={index} path={`/${label.replace(/\s+/g, '-').toLowerCase()}`} exact component={examples[label]}/>
-              ))}
-          </Switch>
-        </Router>
+
+        <Switch>
+          <Route path="/" exact render={() => <ExamplesGrid examples={examples}/>} />
+            {Object.keys(examples).map((label, index) => (
+              <Route key={index} path={`/${label.replace(/\s+/g, '-').toLowerCase()}`} exact component={examples[label]}/>
+            ))}
+        </Switch>
+
+        {props.location.pathname !== '/' && (
+          <div style={myStyle}>
+            <Button color="primary" onClick={returnHome}>Back to Example Index</Button>
+          </div>
+        )}
       </div>
     </main>
   );
+});
+
+function App() {
+  return (
+    <Router hashType="noslash">
+      <Examples />
+    </Router>
+  );
 }
 
- ReactDOM.render(<Examples/>, document.getElementById('app-root'));
+ ReactDOM.render(<App/>, document.getElementById('app-root'));

examples/selectable-rows/index.js

@@ -58,9 +58,9 @@ class Example extends React.Component {
       responsive: 'stacked',
       rowsPerPage: 10,
       rowsSelected: this.state.rowsSelected,
-      onRowsSelect: (rowsSelected, allRows) => {
-        console.log(rowsSelected, allRows);
-        this.setState({ rowsSelected: allRows.map(row => row.dataIndex) });
+      onRowsSelect: (newRowSelected, allRows, rowsSelected) => {
+        console.log(newRowSelected, allRows, rowsSelected);
+        this.setState({ rowsSelected: rowsSelected });
       },
       onRowsDelete: (rowsDeleted) => {
         if (rowsDeleted.data[0].dataIndex === 0) {

examples/serverside-pagination/index.js

@@ -22,6 +22,7 @@ class Example extends React.Component {
             // Here you can render a more complex display.
             // You're given access to tableMeta, which has
             // the rowData (as well as the original object data).
+            // See the console for a detailed look at this object.
 
             console.log('customBodyRender');
             console.dir(tableMeta);
@@ -174,7 +175,6 @@ class Example extends React.Component {
       responsive: 'scrollMaxHeight',
       serverSide: true,
       count: count,
-      page: page,
       rowsPerPage: rowsPerPage,
       rowsPerPageOptions: [],
       onTableChange: (action, tableState) => {

package.json

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

rollup.config.js

@@ -27,7 +27,7 @@ export default {
         ],
       ],
       plugins: [
-        '@babel/plugin-external-helpers',
+        //'@babel/plugin-external-helpers',
         '@babel/plugin-proposal-object-rest-spread',
         '@babel/plugin-proposal-class-properties',
         'transform-react-remove-prop-types',
@@ -54,6 +54,6 @@ export default {
     file: 'dist/index.js',
     format: 'cjs',
     exports: 'named',
+    sourcemap: true,
   },
-  sourcemap: true,
 };

src/MUIDataTable.js

@@ -973,7 +973,7 @@ class MUIDataTable extends React.Component {
       () => {
         this.setTableAction('resetFilters');
         if (this.options.onFilterChange) {
-          this.options.onFilterChange(null, this.state.filterList);
+          this.options.onFilterChange(null, this.state.filterList, null);
         }
       },
     );
@@ -1013,7 +1013,7 @@ class MUIDataTable extends React.Component {
       () => {
         this.setTableAction('filterChange');
         if (this.options.onFilterChange) {
-          this.options.onFilterChange(column, this.state.filterList);
+          this.options.onFilterChange(column, this.state.filterList, index);
         }
       },
     );
@@ -1080,7 +1080,11 @@ class MUIDataTable extends React.Component {
       () => {
         this.setTableAction('expandRow');
         if (this.options.onRowsExpand) {
-          this.options.onRowsExpand(curExpandedRows, this.state.expandedRows.data);
+          this.options.onRowsExpand(
+            curExpandedRows,
+            this.state.expandedRows.data,
+            this.state.expandedRows.data.map(item => item.dataIndex),
+          );
         }
       },
     );
@@ -1141,7 +1145,11 @@ class MUIDataTable extends React.Component {
         () => {
           this.setTableAction('rowsSelect');
           if (this.options.onRowsSelect) {
-            this.options.onRowsSelect(this.state.curSelectedRows, this.state.selectedRows.data);
+            this.options.onRowsSelect(
+              this.state.curSelectedRows,
+              this.state.selectedRows.data,
+              this.state.selectedRows.data.map(item => item.dataIndex),
+            );
           }
         },
       );
@@ -1199,7 +1207,11 @@ class MUIDataTable extends React.Component {
         () => {
           this.setTableAction('rowsSelect');
           if (this.options.onRowsSelect) {
-            this.options.onRowsSelect([value], this.state.selectedRows.data);
+            this.options.onRowsSelect(
+              [value],
+              this.state.selectedRows.data,
+              this.state.selectedRows.data.map(item => item.dataIndex),
+            );
           }
         },
       );
@@ -1217,7 +1229,11 @@ class MUIDataTable extends React.Component {
         () => {
           this.setTableAction('rowsSelect');
           if (this.options.onRowsSelect) {
-            this.options.onRowsSelect(this.state.selectedRows.data, this.state.selectedRows.data);
+            this.options.onRowsSelect(
+              this.state.selectedRows.data,
+              this.state.selectedRows.data,
+              this.state.selectedRows.data.map(item => item.dataIndex),
+            );
           }
         },
       );