Mantine DataTable

Examples › Scrollable vs. auto-height

Try the interactive example below to see the feature it in action:

return (
  <DataTable
    height={300}
    // more table props...
  />
);

The DataTable component embeds a Mantine ScrollArea and has a default height of '100%'.
Thus, setting the component height or placing it inside a height-restricted container will turn on its “vertically-scrollable” behavior.

Customize the underlying ScrollArea

You can customize the underlying scroll area by passing scrollAreaProps to the DataTable component. The scrollAreaProps accepts a subset of Mantine ScrollArea props: type, scrollbarSize and scrollHideDelay. For instance, here’s how you could make the scrollbars invisible:

<DataTable
  height={300}
  // other props...
  scrollAreaProps={{ type: 'never' }}
/>

Here is the result:

Head over to the next example to discover more features.