Examples › Asynchronous data loading

Name	Street address	City	State

No records

Simply set a fetching: true property to the DataTable to indicate data loading state by overlaying a Loader over the DataTable rows.
You can customize the loader appearance with:

loaderSize → 'xs' | 'sm' | 'md' | 'lg' | 'xl'
loaderVariant → 'oval' | 'bars' | 'dots'
loaderColor → loader color
loaderBackgroundBlur → loader background blur in pixels

If your DataTable is not vertically scrollable and contains no initial data, make sure to set its minHeight to minimize the “content jump” and accommodate the Loader height.

return (
  <DataTable
    withBorder
    minHeight={180}
    columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
    records={records}
    fetching={fetching}
  />
);

Using a custom loader component

If you’re not happy with standard Mantine Loader variants, you can pass your own component to the customLoader property.

If you’re using a customLoader, do not set loaderSize, loaderVariant and loaderColor properties.

Name	Street address	City	State

No records

return (
  <DataTable
    withBorder
    minHeight={180}
    columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
    records={records}
    fetching={fetching}
    customLoader={
      <svg width={80} height={80} viewBox="0 0 40 40">
        {/* some svg elements... */}
      </svg>
    }
  />
);