Grid

A responsive grid layout component that helps you create flexible and consistent layouts. Grid is ideal for data tables, card layouts, and structured content displays.

Example

of 5

Add a row every 200ms

Props

Prop	Type	Default value	Description
Prop columns	Type number	Default value 3	Description Number of columns in the grid layout
Prop gap	Type string	Default value "16px"	Description Gap spacing between grid items (e.g., "16px", "1rem")
Prop width	Type string	Default value "100%"	Description Width of the grid container (e.g., "100%", "800px")

Quick start

import { Grid } from '@clickhouse/click-ui'

function MyGrid() {
return (
  <div style={{ height: 500, width: '100%' }}>
    <Grid
      rowStart={0}
      columnCount={5}
      rowCount={10}
      cell={Cell}
      headerHeight={32}
      focus={focus}
      onFocusChange={(row, column) => setFocus({ row, column })}
    />
  </div>
)
}

GridContainer: For CSS Grid-based layouts with flexible column definitions.
Container: For flexbox-based layouts, an alternative to Grid.
Panel: Often used within grid cells for card layouts.

Common use cases

Responsive grid

Grid is commonly used for data tables and structured content. See the example above for a complete implementation.

import { Grid, Pagination } from '@clickhouse/click-ui'
import { useState } from 'react'

function ResponsiveGrid() {
const [currentPage, setCurrentPage] = useState(0)
const [focus, setFocus] = useState({ row: 0, column: 0 })

return (
  <div style={{ height: 500, width: '100%' }}>
    <Grid
      rowStart={currentPage * 10}
      columnCount={5}
      rowCount={10}
      cell={Cell}
      headerHeight={32}
      focus={focus}
      onFocusChange={(row, column) => setFocus({ row, column })}
    />
    <Pagination
      currentPage={currentPage}
      onChange={setCurrentPage}
      totalPages={5}
    />
  </div>
)
}

Container Grid container