Add a loading option

[joshleblanc]

This adds a loading option to the table. It defaults to false.

When true, it adds a loader on top of the current table.

This is to facilitate server-side data loading.

[coveralls]

Coverage increased (+0.08%) to 76.715% when pulling 9107a9a02f4c51215ab0c6f1c1f78fd63e83d5ff on joshleblanc:custom-table-body into f0ea9e58d82839c57a4dfd4a342b6649932660a7 on gregnb:master.

[loktar00]

The same can be accomplished (visually) by providing a loader (custom ect.) Right before <MUIDataTable/>

Quick dirty example using the serverside pagination example, as an example.

const loadingComponent = (
      <div style={{position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)'}}>
        <CircularProgress size={24} />
      </div>
    );

    return (
      <div style={{position:'relative'}}>
        {isLoading && loadingComponent}
        <MUIDataTable title={<Typography variant="title">
          ACME Employee list
          </Typography>
          } data={data} columns={columns} options={options} />
      </div>
    );

[gabrielliwerant]

This isn't a feature that I think should be supported at this time. It has come up a few times (Eg: https://github.com/gregnb/mui-datatables/issues/361 & https://github.com/gregnb/mui-datatables/issues/466). It's easy enough to add this in and around the table without making it core functionality (see serverside-pagination example).

The library needs to leave out some things to keep it from becoming bloating and overcomplicated. When it comes to additional component rendering, I think it's best left to custom renders or author-provided functionality.

[anthonywebb]

@gabrielliwerant it would be helpful in your serverside-pagination example if the loading indicator placement was not covered/hidden by the search box. Sure adding it outside the "paper" works, but does not feel right. I think a useful example of this as the example you reference attempts to be would be a good starting point for those wanting to elegantly add a loading indicator.

[gabrielliwerant]

@anthonywebb Agreed, the examples provided are not the best. Would you have any interest in submitting something to enhance the example? I created an issue for this and linked it here.

[thefat32]

As opposed to what has being said in this thread. I think load state should be part of server-side data source support. +1 to get this implemented.

Thanks for this awesome lib btw!

[ShawnXU0208]

I also want to have this feature added, I am trying to have a loading indicator appear in the center of table body, and while it is showing, all the actions (changing page, filters, search) should be disabled, there is currently no easy way to do this.