Merge branch 'master' of https://github.com/gregnb/mui-datatables int…

…o enhancement/issue-857-server-side-filters # Conflicts: # README.md # test/MUIDataTable.test.js # webpack.config.js
gregnb · Oct 3, 2019 · 28a6e61 · 28a6e61
2 parents 0cc2ddf + f0ea9e5
commit 28a6e61
Show file tree

Hide file tree

Showing 47 changed files with 492 additions and 182 deletions.
diff --git a/README.md b/README.md
@@ -143,7 +143,8 @@ The component accepts the following props:
 |**`pagination`**|boolean|true|Enable/disable pagination
 |**`selectableRows`**|string|'multiple'|Numbers of rows that can be selected. Options are "multiple", "single", "none".
 |**`selectableRowsOnClick`**|boolean|false|Enable/disable select toggle when row is clicked. When False, only checkbox will trigger this action.
-|**`isRowSelectable`**|function||Enable/disable selection on certain rows with custom function. Returns true if not provided. `function(dataIndex: number, selectedRows: object(lookup: {[dataIndex]: boolean}, data: arrayOfObjects: {index: number, dataIndex: number})) => boolean`.
+|**`isRowSelectable`**|function||Enable/disable selection on certain rows with custom function. Returns true if not provided. `function(dataIndex: number, selectedRows: object(lookup: {[dataindex]: boolean}, data: arrayOfObjects: {index: number, dataIndex: number})) => boolean`.
+|**`selectableRowsHeader`**|boolean|true|Show/hide the select all/deselect all checkbox header for selectable rows
 |**`expandableRows`**|boolean|false|Enable/disable expandable rows
 |**`expandableRowsOnClick`**|boolean|false|Enable/disable expand trigger when row is clicked. When False, only expand icon will trigger this action.
 |**`renderExpandableRow`**|function||Render expandable row. `function(rowData, rowMeta) => React Component`
@@ -185,6 +186,7 @@ The component accepts the following props:
 |**`onFilterDialogOpen`**|function||Callback function that triggers when the filter dialog opens. `function() => void`
 |**`onFilterDialogClose`**|function||Callback function that triggers when the filter dialog closes. `function() => void`
 |**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumn: string, filterList: array, type: enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom', 'chip', 'reset')) => void`
+|**`onSearchClose`**|function||Callback function that triggers when the searchbox closes. `function() => void`
 |**`onColumnSortChange`**|function||Callback function that triggers when a column has been sorted. `function(changedColumn: string, direction: string) => void`
 |**`onColumnViewChange`**|function||Callback function that triggers when a column view has been changed. `function(changedColumn: string, action: string) => void`
 |**`onTableChange`**|function||Callback function that triggers when table state has changed. `function(action: string, tableState: object) => void`
@@ -344,6 +346,7 @@ const options = {
     body: {
       noMatch: "Sorry, no matching records found",
       toolTip: "Sort",
+      columnHeaderTooltip: column => `Sort for ${column.label}`
     },
     pagination: {
       next: "Next Page",

diff --git a/examples/Router/ExamplesGrid.js b/examples/Router/ExamplesGrid.js
@@ -0,0 +1,63 @@
+import {Link} from "react-router-dom";
+import {Card, CardContent, Grid, Typography} from "@material-ui/core";
+import React from "react";
+import examples from "../examples";
+import {withStyles} from "@material-ui/core/styles/index";
+
+const styles = {
+    container: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: 16,
+    },
+    card: {
+        '&:hover': {
+            background: 'lightgrey',
+            fontWeight: 500,
+        }
+    },
+    cardContent: {
+        '&:last-child': {
+            padding: 8,
+        }
+    },
+    link: {
+        textDecoration: 'none',
+    },
+    label: {
+        fontWeight: 'inherit'
+    }
+};
+
+function ExamplesGrid(props) {
+    const {classes} = props;
+
+    // Sort Examples alphabetically
+    const examplesSorted = {};
+    Object.keys(examples).sort().forEach(function (key) {
+        examplesSorted[key] = examples[key];
+    });
+
+    const examplesSortedKeys = Object.keys(examplesSorted);
+
+    return <React.Fragment>
+        <Typography variant="h5" align="center">Choose an Example</Typography>
+        <Typography variant="subtitle2" align="center">({examplesSortedKeys.length}) Examples</Typography>
+        <Grid container className={classes.container} spacing={16}>
+            {examplesSortedKeys.map((label, index) => (
+                <Grid key={index} item md={2}>
+                    <Link className={classes.link} to={`/${label.replace(/\s+/g, '-').toLowerCase()}`}>
+                        <Card className={classes.card}>
+                            <CardContent className={classes.cardContent}>
+                                <Typography variant="subtitle1" className={classes.label} align="center">{label}</Typography>
+                            </CardContent>
+                        </Card>
+                    </Link>
+                </Grid>
+            ))}
+        </Grid>
+    </React.Fragment>;
+}
+
+export default withStyles(styles)(ExamplesGrid);
diff --git a/examples/Router/index.js b/examples/Router/index.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {HashRouter as Router, Route, Switch} from 'react-router-dom';
+import {withStyles} from "@material-ui/core/styles/index";
+import ExamplesGrid from "./ExamplesGrid";
+import examples from "../examples";
+
+const styles = {
+    root: {
+        display: 'flex',
+        justifyContent: 'center',
+    },
+    contentWrapper: {
+        width: '100%',
+    },
+};
+
+function Examples(props) {
+    const {classes} = props;
+    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>
+        </div>
+    </main>;
+}
+
+const StyledExamples = withStyles(styles)(Examples);
+
+ReactDOM.render(<StyledExamples/>, document.getElementById('app-root'));
diff --git a/examples/array-value-columns/index.js b/examples/array-value-columns/index.js
@@ -104,4 +104,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/column-filters/index.js b/examples/column-filters/index.js
@@ -101,4 +101,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/column-options-update/index.js b/examples/column-options-update/index.js
@@ -154,4 +154,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/component/index.js b/examples/component/index.js
@@ -136,4 +136,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/csv-export/index.js b/examples/csv-export/index.js
@@ -135,4 +135,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;
diff --git a/examples/custom-action-columns/index.js b/examples/custom-action-columns/index.js
@@ -47,7 +47,7 @@ class Example extends React.Component {
       {
         name: "Delete",
         options: {
-          filter: true,
+          filter: false,
           sort: false,
           empty: true,
           customBodyRender: (value, tableMeta, updateValue) => {
@@ -66,7 +66,7 @@ class Example extends React.Component {
       {
         name: "Edit",
         options: {
-          filter: true,
+          filter: false,
           sort: false,
           empty: true,
           customBodyRender: (value, tableMeta, updateValue) => {
@@ -113,7 +113,7 @@ class Example extends React.Component {
       {
         name: "Add",
         options: {
-          filter: true,
+          filter: false,
           sort: false,
           empty: true,
           customBodyRender: (value, tableMeta, updateValue) => {
@@ -181,4 +181,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/customize-columns/index.js b/examples/customize-columns/index.js
@@ -95,4 +95,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/customize-filter/index.js b/examples/customize-filter/index.js
@@ -1,6 +1,5 @@
 import { FormGroup, FormLabel, TextField } from '@material-ui/core';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import MUIDataTable from '../../src';
 
 class Example extends React.Component {
@@ -150,4 +149,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;
diff --git a/examples/customize-footer/index.js b/examples/customize-footer/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import MUIDataTable from "../../src/";
 import CustomFooter from "./CustomFooter";
 
@@ -67,4 +66,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/customize-rows/index.js b/examples/customize-rows/index.js
@@ -93,4 +93,4 @@ function Example() {
   );
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/customize-search-render/CustomSearchRender.js b/examples/customize-search-render/CustomSearchRender.js
@@ -22,12 +22,6 @@ const defaultSearchStyles = theme => ({
 
 class CustomSearchRender extends React.Component {
   handleTextChange = event => {
-    const { onSearchChange } = this.props.options;
-
-    if (onSearchChange) {
-      onSearchChange(event.target.value);
-    }
-
     this.props.onSearch(event.target.value);
   };
 

diff --git a/examples/customize-search-render/index.js b/examples/customize-search-render/index.js
@@ -67,4 +67,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;
diff --git a/examples/customize-search/index.js b/examples/customize-search/index.js
@@ -104,4 +104,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;
diff --git a/examples/customize-sorting/index.js b/examples/customize-sorting/index.js
@@ -34,4 +34,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/customize-styling/index.js b/examples/customize-styling/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import MUIDataTable from "../../src/";
 import {createMuiTheme, MuiThemeProvider, withStyles} from '@material-ui/core/styles';
 import classnames from 'classnames';
@@ -134,6 +133,4 @@ class Example extends React.Component {
   }
 }
 
-const ExampleWithStyles = withStyles(customStyles, {name: "Example"})(Example);
-
-ReactDOM.render(<ExampleWithStyles/>, document.getElementById("app-root"));
+export default withStyles(customStyles, {name: "ExampleCard.js"})(Example);
diff --git a/examples/customize-toolbar/index.js b/examples/customize-toolbar/index.js
@@ -62,4 +62,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/customize-toolbarselect/index.js b/examples/customize-toolbarselect/index.js
@@ -55,4 +55,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/data-as-objects/index.js b/examples/data-as-objects/index.js
@@ -79,4 +79,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/examples.js b/examples/examples.js
@@ -0,0 +1,66 @@
+import ArrayValueColumns from "./array-value-columns";
+import ColumnFilters from "./column-filters";
+import ColumnOptionsUpdate from "./column-options-update";
+import Component from "./component";
+import CSVExport from "./csv-export";
+import CustomActionColumns from "./custom-action-columns";
+import CustomizeColumns from "./customize-columns";
+import CustomizeFilter from "./customize-filter";
+import CustomizeFooter from "./customize-footer";
+import CustomizeRows from "./customize-rows";
+import CustomizeSearch from "./customize-search";
+import CustomizeSearchRender from "./customize-search-render";
+import CustomizeSorting from "./customize-sorting";
+import CustomizeStyling from "./customize-styling";
+import CustomizeToolbar from "./customize-toolbar";
+import CustomizeToolbarSelect from "./customize-toolbarselect";
+import DataAsObjects from "./data-as-objects";
+import ExpandableRows from "./expandable-rows";
+import FixedHeader from "./fixed-header";
+import HideColumnsPrint from "./hide-columns-print";
+import OnDownload from "./on-download";
+import OnTableInit from "./on-table-init";
+import ResizableColumns from "./resizable-columns";
+import SelectableRows from "./selectable-rows";
+import ServerSideOptions from "./serverside-options";
+import ServerSidePagination from "./serverside-pagination";
+import Simple from "./simple";
+import SimpleNoToolbar from "./simple-no-toolbar";
+import TextLocalization from "./text-localization";
+import Themes from "./themes";
+
+/**
+ * Here you can add any extra examples with the Card label as the key, and the component to render as the value
+ */
+export default {
+    'Array Value Columns': ArrayValueColumns,
+    'Column Filters': ColumnFilters,
+    'Column Option Update': ColumnOptionsUpdate,
+    'Component': Component,
+    'CSV Export': CSVExport,
+    'Custom ActionColumns': CustomActionColumns,
+    'Customize columns': CustomizeColumns,
+    'Customize Filter': CustomizeFilter,
+    'Customize Footer': CustomizeFooter,
+    'Customize Rows': CustomizeRows,
+    'Customize Search': CustomizeSearch,
+    'Customize Search Render': CustomizeSearchRender,
+    'Customize Sorting': CustomizeSorting,
+    'Customize Styling': CustomizeStyling,
+    'Customize Toolbar': CustomizeToolbar,
+    'Customize Toolbar Select': CustomizeToolbarSelect,
+    'Data As Objects': DataAsObjects,
+    'expandableRows': ExpandableRows,
+    'fixedHeader': FixedHeader,
+    'Hide Columns Print': HideColumnsPrint,
+    'OnDownload': OnDownload,
+    'OnTableInit': OnTableInit,
+    'resizableColumns': ResizableColumns,
+    'selectableRows': SelectableRows,
+    'serverSide Options': ServerSideOptions,
+    'serverSide Pagination': ServerSidePagination,
+    'Simple': Simple,
+    'Simple No Toolbar': SimpleNoToolbar,
+    'Text Localization': TextLocalization,
+    'Themes': Themes,
+};
diff --git a/examples/expandable-rows/index.js b/examples/expandable-rows/index.js
@@ -102,4 +102,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/fixed-header/index.js b/examples/fixed-header/index.js
@@ -89,4 +89,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/hide-columns-print/index.js b/examples/hide-columns-print/index.js
@@ -91,4 +91,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;
diff --git a/examples/on-download/index.js b/examples/on-download/index.js
@@ -118,4 +118,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;
diff --git a/examples/on-table-init/index.js b/examples/on-table-init/index.js
@@ -79,4 +79,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app-root'));
+export default Example;
diff --git a/examples/resizable-columns/index.js b/examples/resizable-columns/index.js
@@ -67,4 +67,4 @@ class Example extends React.Component {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById("app-root"));
+export default Example;