On this page

Dimensions

Learn how to control the dimensions of the Data Grid component.

source

Overview

The Data Grid has no intrinsic dimensions: you must set the dimensions or else it may not display correctly. By default, the Data Grid fills the space of its parent container, so that container must have intrinsic dimensions.

In other words, if the container has no child elements, then it still must have non-zero dimensions.

Note

We highly recommend setting a height on any parent container to ensure virtualization is utilized. This will improve performance by limiting the number of elements rendered in the DOM.

Flex Parent Container

The Data Grid can be placed inside a flex parent container like VStack, Stack, or HStack. Without setting a height, the Data Grid takes as much space as it needs to display all rows.

Note

When using a flex container you gain the benefit of controlling the layout spacing via the gap property. See the Toolbar page for examples.

In the demo the Toolbar is adding margin bottom to itself to add spacing between itself and the Data Grid.

On this page

Overview
Flex Parent Container
Min and max height
Percentage height
Static Parent Container
Edit this page on Github

On this page

'use client'

import { DataGrid } from '@cerberus/data-grid'
import { Stack } from 'styled-system/jsx'
import { columns } from '../quick-start/columns.demo'
import { useFakeQuery } from '../quick-start/data'

export function BasicDemo() {
  // Normally this would be from useQuery or a server-side API call
  const data = useFakeQuery(10)

  return (
    <Stack direction="column" h="20rem" w="3/4">
      <DataGrid columns={columns} data={data} />
    </Stack>
  )
}

'use client'

import { DataGrid } from '@cerberus/data-grid'
import { Stack } from 'styled-system/jsx'
import { columns } from '../quick-start/columns.demo'
import { useFakeQuery } from '../quick-start/data'

export function MaxDemo() {
  // Normally this would be from useQuery or a server-side API call
  const data = useFakeQuery(2)

  return (
    <Stack direction="column" minH="20rem" maxH="30rem" w="3/4">
      <DataGrid columns={columns} data={data} />
    </Stack>
  )
}

Search anything

'use client'

import { OverflowMenuHorizontal, Search } from '@carbon/icons-react'
import { DataGrid } from '@cerberus/data-grid'
import { ButtonGroup, Field, IconButton, Input } from '@cerberus/react'
import { Box, HStack } from 'styled-system/jsx'
import { columns } from '../quick-start/columns.demo'
import { useFakeQuery } from '../quick-start/data'

export function StaticDemo() {
  // Normally this would be from useQuery or a server-side API call
  const data = useFakeQuery(25)

  return (
    <Box h="20rem" mb="md" w="3/4">
      <DataGrid columns={columns} data={data} toolbar={<Toolbar />} />
    </Box>
  )
}

function Toolbar() {
  return (
    <HStack justify="space-between" mb="sm" w="full">
      <Box maxW="3/4">
        <Field label="Search anything" hideLabel>
          <Input startIcon={<Search />} size="sm" />
        </Field>
      </Box>

      <ButtonGroup>
        <IconButton ariaLabel="Example trigger" size="sm">
          <OverflowMenuHorizontal />
        </IconButton>
      </ButtonGroup>
    </HStack>
  )
}