CODEWITHSUNDEEP
javascriptreactjsreact-reduxmaterial-uiprogress-bar
Michael Nelles
Michael Nelles

Reputation: 5992

React Material UI show progress in Table while waiting on data

I know it is possible to show Circular progress over the as-yet-to-be-populated table. How do you do it?

As it stands right now the table says No records to display .... until the server returns with the data. currently shows 'no records to display'

========= further to @torquan response this is what worked for me in more detail.

const [dataFetched, setDataFetched] = useState(false)

Convert EmployeesTable into a component - then I had to pass props in and it works perfectly.

         {!dataFetched ? (
            <CircularProgress />
         ) : (
            <EmployeesTable
               data={employees}
               token={token}
            />
         )}

Upvotes: 5

Views: 25587

Answers (2)

chrismarx
chrismarx

Reputation: 12545

For a complex table, the mui data-grid is the recommended component, and it has support for loading state built-in:

https://mui.com/x/react-data-grid/components/#loading-overlay

Upvotes: 0

torquan
torquan

Reputation: 354

You could display a spinner until the data is fetched.

That part could look like this:

<table>
  {!dataFetched ? <Spinner /> : <YourTableBody>}
</table>

You could use a <Spinner /> from one of the libraries on npm for example or write your own.

You would initialize dataFetched as false and set it to true when your API call finished. If that is too general, you should post your code for the table.

Upvotes: 5

Related Questions