Add a loading option

Author: joshleblanc

src/MUIDataTable.js

@@ -18,10 +18,13 @@ import TableToolbar from './components/TableToolbar';
 import TableToolbarSelect from './components/TableToolbarSelect';
 import textLabels from './textLabels';
 import { buildMap, getCollatorComparator, sortCompare } from './utils';
+import LoaderOverlay from './components/LoaderOverlay';
 
 const defaultTableStyles = theme => ({
   root: {},
-  paper: {},
+  paper: {
+    position: 'relative'
+  },
   tableRoot: {
     outline: 'none',
   },
@@ -141,6 +144,7 @@ class MUIDataTable extends React.Component {
       customToolbarSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
       customFooter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
       customSearchRender: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+      loading: PropTypes.bool,
       customRowRender: PropTypes.func,
       onRowClick: PropTypes.func,
       onRowsSelect: PropTypes.func,
@@ -285,6 +289,7 @@ class MUIDataTable extends React.Component {
     selectableRowsOnClick: false,
     selectableRowsHeader: true,
     caseSensitive: false,
+    loading: false,
     serverSide: false,
     rowHover: true,
     fixedHeader: true,
@@ -1338,6 +1343,9 @@ class MUIDataTable extends React.Component {
           changeRowsPerPage={this.changeRowsPerPage}
           changePage={this.changePage}
         />
+        {
+          this.options.loading && <LoaderOverlay />
+        }
         <div className={classes.liveAnnounce} aria-live={'polite'}>
           {announceText}
         </div>

src/components/LoaderOverlay.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+
+const styles = theme => ({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 110,
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    backgroundColor: fade(theme.palette.background.paper, 0.7)
+  },
+  progressContainer: {
+    margin: 'auto'
+  }
+})
+
+class LoaderOverlay extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return(
+      <div className={classes.overlay}>
+        <div className={classes.progressContainer}>
+          <CircularProgress />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default withStyles(styles, { withTheme: true })(LoaderOverlay);

test/MUIDataTable.test.js

@@ -84,6 +84,11 @@ describe('<MUIDataTable />', function() {
     );
   });
 
+  it('should render a loader', () => {
+    const wrapper = mount(<MUIDataTable columns={columns} data={data} options={{ loading: true }} />);
+    assert.equal(wrapper.find('LoaderOverlay').length, 1)
+  });
+
   it('should correctly build internal columns data structure', () => {
     const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
     const actualResult = shallowWrapper.dive().state().columns;