Examples › Empty state | Mantine DataTable

Examples › Empty state

If records property points to an empty array, the DataTable component will indicate its empty state by displaying a customizable icon and text, like so:

Name	Email

No records

Make sure to set a minHeight large enough to accommodate the icon and text when dealing with empty state in non “vertically-scrollable” tables.

return (
  <DataTable
    minHeight={150}
    records={[]}
    // ...
  />
);

You can modify the displayed text by setting the noRecordsText property:

Name	Email

No records to show

return (
  <DataTable
    minHeight={150}
    records={[]}
    noRecordsText="No records to show"
    // ...
  />
);

The icon can also be modified by setting the noRecordsIcon property:

Name	Email

No records found

return (
  <DataTable
    minHeight={150}
    records={[]}
    noRecordsIcon={
      <Box p={4} mb={4} className={classes.noRecordsBox}>
        <IconMoodSad size={36} strokeWidth={1.5} />
      </Box>
    }
    noRecordsText="No records found"
    // ...
  />
);

If you’re not happy with the standard empty state indicator, you can entirely replace it by setting the emptyState property:

Name	Email

No data found...

return (
  <DataTable
    minHeight={280}
    records={[]}
    emptyState={
      <Stack align="center" gap="xs">
        <Text c="dimmed" size="sm">
          No data found...
        </Text>
        <Image
          width={200}
          radius="md"
          src="https://images.unsplash.com/photo-1577460551100-907ba84418ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80"
          alt="No data found"
          style={{ filter: 'grayscale(1)' }}
        />
      </Stack>
    }
    // ...
  />
);

Interactive custom empty state content

The empty state component has the pointer-events CSS property set to none.
Which means that if you need to add interactive content to the custom empty state, you’ll have to enable pointer interactions using the pointer-events CSS prop:

Name	Email

No data found...

return (
  <DataTable
    minHeight={280}
    records={[]}
    emptyState={
      <Stack align="center" gap="xs">
        <Text c="dimmed" size="sm">
          No data found...
        </Text>
        <Button
          style={{ pointerEvents: 'all' }} // 👈 enable button pointer events
          onClick={() => notifications.show({ message: 'Should add a new record' })}
        >
          Add a record
        </Button>
      </Stack>
    }
    // ...
  />
);