Custom stuff while table data is loading

[gregnb]

Custom stuff while table data is loading

[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]

@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>
    );
  }

}

[thefat32]

You can use a custom comp

import React from 'react';
import { MUIDataTableBody, TableBody, TableBodyCell, TableBodyRow } from 'mui-datatables';
import {
  CircularProgress,
  createStyles,
  makeStyles,
  Typography,
  TableBody as MuiTableBody
} from '@material-ui/core';

interface Props extends MUIDataTableBody {
  loading: boolean;
}

const useStyles = makeStyles(() =>
  createStyles({
    loading: {
      textAlign: 'center'
    }
  })
);

const LoadingTableBody = ({ loading, options, columns, ...others }: Props) => {
  // @ts-ignore
  const visibleColCnt = columns.filter(c => c.display === 'true').length;
  const classes = useStyles();
  return loading ? (
    <MuiTableBody>
      <TableBodyRow options={options}>
        <TableBodyCell
          // @ts-ignore
          colSpan={
            options.selectableRows !== 'none' || options.expandableRows
              ? visibleColCnt + 1
              : visibleColCnt
          }
          options={options}
          colIndex={0}
          rowIndex={0}
        >
          <Typography variant="body1" className={classes.loading} component={'div'}>
            <CircularProgress />
          </Typography>
        </TableBodyCell>
      </TableBodyRow>
    </MuiTableBody>
  ) : (
    <TableBody options={options} columns={columns} {...others} />
  );
};

export default LoadingTableBody;

  const [loading, setLoading] = useState(false);
  const BodyComponent = useMemo(
    () => (props: MUIDataTableBody) => (
      <LoadingTableBody loading={loading} {...props} />
    ),
    [loading]
  );
  return(
    <MUIDataTable
      title={'Title'}
      data={data}
      columns={columns}
      options={options}
      components={{ TableBody: BodyComponent }}
    />
  );

[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

[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

[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?

[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 :/

[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

[darwin-arugay]

You can use a custom comp

import React from 'react';
import { MUIDataTableBody, TableBody, TableBodyCell, TableBodyRow } from 'mui-datatables';
import {
  CircularProgress,
  createStyles,
  makeStyles,
  Typography,
  TableBody as MuiTableBody
} from '@material-ui/core';

interface Props extends MUIDataTableBody {
  loading: boolean;
}

const useStyles = makeStyles(() =>
  createStyles({
    loading: {
      textAlign: 'center'
    }
  })
);

const LoadingTableBody = ({ loading, options, columns, ...others }: Props) => {
  // @ts-ignore
  const visibleColCnt = columns.filter(c => c.display === 'true').length;
  const classes = useStyles();
  return loading ? (
    <MuiTableBody>
      <TableBodyRow options={options}>
        <TableBodyCell
          // @ts-ignore
          colSpan={
            options.selectableRows !== 'none' || options.expandableRows
              ? visibleColCnt + 1
              : visibleColCnt
          }
          options={options}
          colIndex={0}
          rowIndex={0}
        >
          <Typography variant="body1" className={classes.loading} component={'div'}>
            <CircularProgress />
          </Typography>
        </TableBodyCell>
      </TableBodyRow>
    </MuiTableBody>
  ) : (
    <TableBody options={options} columns={columns} {...others} />
  );
};

export default LoadingTableBody;

  const [loading, setLoading] = useState(false);
  const BodyComponent = useMemo(
    () => (props: MUIDataTableBody) => (
      <LoadingTableBody loading={loading} {...props} />
    ),
    [loading]
  );
  return(
    <MUIDataTable
      title={'Title'}
      data={data}
      columns={columns}
      options={options}
      components={{ TableBody: BodyComponent }}
    />
  );

This solution was better, but I've made a tweak cause I've encountered an error for early return because of useMemo:
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement

So what I did was:

Table

<MUIDataTable
...other props
components={{ TableBody: (props) =>
              loading ? (
                <LoadingTableBody loading={loading} {...props} />
              ) : (
                <TableBody {...props} />
              )}
   />           

Then used the logic for loading code above:

const LoadingTableBody = memo(({ options, columns }: Props) => {
  // @ts-ignore
  const visibleColCnt = columns.filter((c) => c.display === 'true').length
  return (
    <MuiTableBody>
      <TableBodyRow options={options}>
        <TableBodyCell
          // @ts-ignore
          colSpan={
            options.selectableRows !== 'none' || options.expandableRows
              ? visibleColCnt + 1
              : visibleColCnt
          }
          options={options}
          colIndex={0}
          rowIndex={0}
        >
          <NoDataPrintContainer>
            <CircularProgress />
          </NoDataPrintContainer>
        </TableBodyCell>
      </TableBodyRow>
    </MuiTableBody>
  )
})