Custom loader in table row

[haresh-samnani]

Hi,

I am currently using the latest version of rsuite table. I know that I can show loader for the whole table data using prop loading. I am planning to use react-skeleton-loading to show skeleton effect in each table row cell but I don't know how to because table accepts data (generally my API response array of objects) in the data prop.

Can anybody help in achieving this?

[simonguo]

Hi @haresh-samnani you can use rsuite's Placeholder component.

https://table.rsuitejs.com/#loading

Usage

import { Placeholder, Table } from 'rsuite';

const renderLoading = () => {
  return (
    <div
      style={{
        position: 'absolute',
        width: '100%',
        height: '100%',
        background: '#fff',
        padding: 20,
        zIndex: 1
      }}
    >
      <Placeholder.Grid rows={20} columns={6} active />
    </div>
  );
};

const App = () => {
  return (
    <Table loading renderLoading={renderLoading}>
      ...
    </Table>
  );
};

[haresh-samnani]

@simonguo Thank you so much for the reply. I will be implementing this and mark it as an answer once done.

[haresh-samnani]

Thank you. Marked as an answer!