Mui-datatables: Custom stuff while table data is loading

[emrbzr]

Hello,

When the data for the table is loading, users see "Sorry, no matching records found" for a couple seconds while it is fetching.

Is there any way to modify this to have our own loading stuff while waiting for data to load?

Thanks

[gregnb]

@emrbzr Huh, no kidding? What is the process in which you are loading data?

Is this an AJAX call and then once the data arrives you update the table?

[emrbzr]

Yes, i fetch the data in componentDidMount and while the data is fetching the table displays "Sorry, no matching records found" until the data loads.(2-3sec)

[gregnb]

Ok, I will look into it tonight. For now, I'll probably have it not render anything until the data prop has arrived to avoid seeing that message displayed

[jkantr]

So... I'm not sure if this is 'cheating' or not.. but the way that you allow arbitrary data to be passed for the localization... I just do this:

<MUIDataTable
    title="foo"
    data={this.props.data}
    columns={this.props.columns}
    options={{
        filterList: this.props.filterList,
        filterType: 'multiselect',
        textLabels: {
            body: {
                noMatch: this.props.isLoading ?
                    <Loader /> :
                    'Sorry, there is no matching data to display',
            },
        },
    }}
/>

Basically I pass in a Loader react component (just a mui spinner) that displays in the place of the noMatch body string until my api data comes back (and the state of which is given to the component via props.isLoading).. this probably isn't optimal but I liked how well it worked :)

[gregnb]

I've added this for now

https://github.com/gregnb/mui-datatables/blob/master/src/MUIDataTable.js#L657

But, @jkantr has a great suggestion as well. Adding loaders is something I don't want to get into and that should be up to the user

[jkantr]

Not to comment in a closed thread.. but i think this actually breaks my little hack?

https://github.com/gregnb/mui-datatables/blob/master/src/MUIDataTable.js#L693

the noMatch text is rendered in the body... which because of your addition there, now doesn't render when there's no data :/ Am I missing something obvious?

Edit: Ah okay, no I see what's happening. the table doesn't render new data unless... the data or columns change (and initializeTable is run) so changing the options prop won't actually change what's being displayed (although a re-render does actually happen) ... i have to think about this

Edit2: okay.. so I can use the context api to fix the 'not displaying new opts data on rerender' issue.. but i can't do anything to fix your addition above... it basically kills my hack to inject a loading prop :/

[gregnb]

@jkantr How do we find a happy medium? We don't want to render a table unless there is data ready because that could be a problem for one subset of users. Then this library also don't want to get into the business of having data loading spinners that should be controlled by the user.

I really think this should be handled completely outside of the library like this:

class MyTable extends React.Component {

  fetchData() {
   ...
    setState({ data, dataReady: true }) if data request finished
   ...
  }

  render() {
    return (
      <div>
           { (this.state.dataReady) ? (
                 <MUIDataTables data={this.state.data} />
              ) : (
                  <ShowSpinner />
              )
           } 
      </div>
    );
  }

}

[wyqydsyq]

The above approach is a less than desirable solution as it results in the entire table disappearing when loading new data e.g. async pagination, searching, this causes massive page jank as the table disappears and reappears every time new data is loaded

[muftisamiullah]

whats the solution then? is dere any other way to do so?
textLabels: { body: { noMatch : loader ? <CircularProgress size={25} color={'inherit'} /> : 'Sorry, there is no matching data to display' }, },

i tried doing this but loader doesnt show during searching, i get the 'Sorry, there is no matching data to display' when dere is no data.

[iamkk11]

I am trying to implement an infinite scroll/lazy loader and would like to display a spinner when I am fetching additional data. Is there a way to easily achieve this?

[iamkk11]

The above approach is a less than desirable solution as it results in the entire table disappearing when loading new data e.g. async pagination, searching, this causes massive page jank as the table disappears and reappears every time new data is loaded

This is very true. Same situation when once tries to implement lazy loader/infinite scrolling