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.

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.

Min and max height

The Data Grid will inherit the minH and maxH values from its parent container. Using these would constrain the dimensions in the event of row quantities change. Most of the time, setting a static height is sufficient enough.

Percentage height

When using percentages (%) for height or width, make sure that the Data Grid's parent container has intrinsic dimensions. Browsers adjust the element based on a percentage of its parent's size. If the parent has no size, the percentage will be zero.

To put simply, an instrinsic height must be set on a parent in the DOM tree for the Data Grid parent to have a non-zero size.

Static Parent Container

Static parent containers follow the same rules as flex containers. The only difference is that layout spacing must be controlled via the Toolbar or Footer components.

On this page

Edit this page on Github

Cerberus Design System | Docs

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