Mantine DataTable

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

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.

return (
  <DataTable
    height={300}
    // other props...
  />

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' }}
/>