add loader component on the table

README.md

@@ -124,6 +124,7 @@ The component accepts the following props:
 |:--:|:-----|:-----|
 |**`columns`**|array|Columns used to describe table. Must be either an array of simple strings or objects describing a column
 |**`data`**|array|Data used to describe table. Must be an array containing objects. (Arrays containing just strings or numbers also supported)
+|**`isLoading`**|array|Data used to describe table. Must be an array containing objects. (Arrays containing just strings or numbers also supported)
 |**`page`**|number||User provided starting page for pagination
 |**`count`**|number||User provided override for total number of rows
 |**`options`**|object|Options used to describe table
@@ -132,6 +133,7 @@ The component accepts the following props:
 |Name|Type|Default|Description
 |:--:|:-----|:--|:-----|
 |**`serverSide`**|boolean|false|Enable remote data source
+|**`loader`**|object||Element to display when `isLoading` is `true`
 |**`rowsSelected`**|array||User provided selected rows
 |**`filterType `**|string||Choice of filtering view. `enum('checkbox', 'dropdown', 'multiselect', 'textField')`
 |**`textLabels `**|object||User provided labels to localize text

examples/server-loader/index.js

@@ -0,0 +1,105 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { CircularProgress } from '@material-ui/core';
+import MUIDataTable from "../../src/";
+
+class Example extends React.Component {
+
+  state = {
+    page: 0,
+    count: 0,
+    data: [],
+    isLoading: false
+  };
+
+  componentDidMount() {
+    this.getData();
+  }
+
+  // get data
+  getData = () => {
+    this.setState({ isLoading: true });
+    this.xhrRequest().then(res => {
+      this.setState({ data: res.data, isLoading: false, count: res.total });
+    });
+  }
+
+  // mock async function
+  xhrRequest = () => {
+
+    return new Promise((resolve, reject) => {
+      const total = 124;  // mock record count from server
+      // mock page data
+      const srcData = [
+        ["Gabby George", "Business Analyst", "Minneapolis"],
+        ["Aiden Lloyd", "Business Consultant", "Dallas"],
+        ["Jaden Collins", "Attorney", "Santa Ana"],
+        ["Franky Rees", "Business Analyst", "St. Petersburg"],
+        ["Aaren Rose", "Business Analyst", "Toledo"]
+      ];
+      const maxRound =  Math.floor(Math.random() * 2) + 1;
+      const data = [...Array(maxRound)].reduce(acc => acc.push(...srcData) && acc, []);
+      data.sort((a, b) => 0.5 - Math.random());
+
+      setTimeout(() => {
+        resolve({
+          data, total
+        });
+      }, 2500);
+
+    });
+
+  }
+
+  changePage = (page) => {
+    this.setState({
+      isLoading: true,
+    });
+    this.xhrRequest(`/myApiServer?page=${page}`).then(res => {
+      this.setState({
+        isLoading: false,
+        page: page,
+        data: res.data,
+        count: res.total,
+      });
+    });
+  };
+
+  render() {
+
+    const columns = ["Name", "Title", "Location"];
+    const { data, page, count, isLoading } = this.state;
+
+    const options = {
+      filter: true,
+      filterType: 'dropdown',
+      responsive: 'stacked',
+      serverSide: true,
+      count: count,
+      page: page,
+      onTableChange: (action, tableState) => {
+
+        console.log(action, tableState);
+        // a developer could react to change on an action basis or
+        // examine the state as a whole and do whatever they want
+
+        switch (action) {
+          case 'changePage':
+            this.changePage(tableState.page);
+            break;
+        }
+      }
+    };
+    return (
+      <div>
+        <MUIDataTable
+          isLoading={isLoading}
+          loader={<CircularProgress size={36} style={{margin: 12}} />}
+          data={data} columns={columns} options={options} />
+      </div>
+    );
+
+  }
+}
+
+ReactDOM.render(<Example />, document.getElementById("app-root"));

src/MUIDataTable.js

@@ -78,8 +78,10 @@ class MUIDataTable extends React.Component {
   static propTypes = {
     /** Data used to describe table */
     data: PropTypes.array.isRequired,
+    isLoading: PropTypes.bool,
+    loader: PropTypes.object,
     page: PropTypes.number,
-    count: PropTypes.number,
+    count: PropTypes.number.isRequired,
     /** Columns used to describe table */
     columns: PropTypes.PropTypes.arrayOf(
       PropTypes.oneOfType([
@@ -1181,6 +1183,8 @@ class MUIDataTable extends React.Component {
               toggleExpandRow={this.toggleExpandRow}
               options={this.options}
               filterList={filterList}
+              isLoading={this.props.isLoading}
+              loader={this.props.loader}
             />
           </MuiTable>
         </div>

src/components/TableBody.js

@@ -24,6 +24,10 @@ class TableBody extends React.Component {
     columns: PropTypes.array.isRequired,
     /** Options used to describe table */
     options: PropTypes.object.isRequired,
+    /** isLoading status check */
+    isLoading: PropTypes.bool,
+    /** loader element to render if is loading */
+    loader: PropTypes.object,
     /** Data used to filter table against */
     filterList: PropTypes.array,
     /** Callback to execute when row is clicked */
@@ -141,13 +145,13 @@ class TableBody extends React.Component {
   };
 
   render() {
-    const { classes, columns, toggleExpandRow, options } = this.props;
+    const { classes, columns, toggleExpandRow, options, isLoading, loader } = this.props;
     const tableRows = this.buildRows();
     const visibleColCnt = columns.filter(c => c.display === 'true').length;
 
     return (
       <MuiTableBody>
-        {tableRows && tableRows.length > 0 ? (
+        {tableRows && tableRows.length > 0 &&
           tableRows.map((data, rowIndex) => {
             const { data: row, dataIndex } = data;
 
@@ -203,7 +207,21 @@ class TableBody extends React.Component {
               </React.Fragment>
             );
           })
-        ) : (
+        }
+        {isLoading &&
+          <TableBodyRow options={options}>
+            <TableBodyCell
+              colSpan={options.selectableRows !== 'none' || options.expandableRows ? visibleColCnt + 1 : visibleColCnt}
+              options={options}
+              colIndex={0}
+              rowIndex={0}>
+              <Typography variant="subtitle1" className={classes.emptyTitle}>
+                {loader}
+              </Typography>
+            </TableBodyCell>
+          </TableBodyRow>
+        }
+        {!tableRows && !isLoading &&
           <TableBodyRow options={options}>
             <TableBodyCell
               colSpan={options.selectableRows !== 'none' || options.expandableRows ? visibleColCnt + 1 : visibleColCnt}
@@ -215,7 +233,7 @@ class TableBody extends React.Component {
               </Typography>
             </TableBodyCell>
           </TableBodyRow>
-        )}
+        }
       </MuiTableBody>
     );
   }

webpack.config.js

@@ -3,7 +3,7 @@ const webpack = require('webpack');
 
 module.exports = {
   entry: {
-    app: "./examples/customize-filter/index.js"
+    app: "./examples/server-loader/index.js"
   },
   stats: "verbose",
   context: __dirname,