diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index d0fe3d5fb..09e081577 100644 --- a/src/MUIDataTable.js +++ b/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 && + }
{announceText}
diff --git a/src/components/LoaderOverlay.js b/src/components/LoaderOverlay.js new file mode 100644 index 000000000..524a3742e --- /dev/null +++ b/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( +
+
+ +
+
+ ) + } +} + +export default withStyles(styles, { withTheme: true })(LoaderOverlay); \ No newline at end of file diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js index c6265ecd0..4f910ec0c 100644 --- a/test/MUIDataTable.test.js +++ b/test/MUIDataTable.test.js @@ -84,6 +84,11 @@ describe('', function() { ); }); + it('should render a loader', () => { + const wrapper = mount(); + assert.equal(wrapper.find('LoaderOverlay').length, 1) + }); + it('should correctly build internal columns data structure', () => { const shallowWrapper = shallow(); const actualResult = shallowWrapper.dive().state().columns;