Mantine DataTable

8.2.0

Source code 148.7k/month Sponsor

Examples › Asynchronous data loading

Customize the loader properties in the interactive example below:

Loader type

oval

bars

dots

Loader size

Loader color

blue

green

grape

Background blur

Name	Street address	City	State

No records

Code:

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

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'
loaderType: 'oval' | 'bars' | 'dots'
loaderColor
The loader color.
loaderBackgroundBlur: number
The loader background blur, in pixels. No blur by default.

Keep in mind

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
    withTableBorder
    minHeight={180}
    columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
    records={records}
    fetching={fetching}
    loaderType={customizeLoaderType ? loaderType : undefined}
    loaderSize={customizeLoaderSize ? loaderSize : undefined}
    loaderColor={customizeLoaderColor ? loaderColor : undefined}
    loaderBackgroundBlur={customizeLoaderBackgroundBlur ? loaderBackgroundBlur : undefined}
  />
);

Using a custom loader component

If you’re not happy with standard Mantine Loader types, you can pass your own component to the customLoader property.
In this case, do not set loaderSize, loaderType and loaderColor properties.

Name	Street address	City	State

No records

Here is the code:

return (
  <DataTable
    withTableBorder
    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>
    }
  />
);

Head over to the next example to discover more features.

Go back

Examples › Disabling text selection

Up next

Examples › Custom row or cell attributes