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}
        sx={(theme) => ({
          fontSize: 0,
          color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
          border: `2px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4]}`,
          borderRadius: theme.radius.md,
          background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
        })}
      >
        <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" spacing="xs">
        <Text color="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"
          sx={{ filter: 'grayscale(1)' }}
        />
      </Stack>
    }
    // ...
  />
);