render

Scroll mode, column width, and card/column virtualization settings. Pure render concerns.

render?: RenderConfig;

Field	Type	Default	Description
`columnScroll`	`boolean`	`true`	`true`: each column scrolls independently (classic Trello). `false`: the whole board shares one vertical scrollbar with sticky column headers.
`fixedColumnWidth`	`boolean`	`true`	`true`: every column is a fixed 280px. `false`: columns share the viewport width equally, with a 240px minimum.
`virtualizeCards`	`boolean`	`false`	Renders only the visible card slice per column.
`virtualizeColumns`	`boolean`	`false`	Column shells stay mounted, but off-screen columns skip rendering card content.
`estimatedCardHeight`	`number`	`80`	Height estimate (in pixels) for unmeasured cards.
`cardOverscan`	`number`	`5`	Extra cards rendered above and below the visible window as a scroll buffer.
`columnOverscan`	`number`	`1`	Extra columns rendered before and after the horizontal viewport.

All fields are optional. Omitted fields use their defaults.

Default behavior (per-column scroll, fixed-width columns, no virtualization):

<Kanban cards={cards} columns={columns} />

Flex columns that share the viewport width:

<Kanban
  cards={cards}
  columns={columns}
  render={{ fixedColumnWidth: false }}
/>

Board-wide scroll with sticky headers:

<Kanban
  cards={cards}
  columns={columns}
  render={{ columnScroll: false }}
/>

Flex columns with board-wide scroll:

<Kanban
  cards={cards}
  columns={columns}
  render={{ columnScroll: false, fixedColumnWidth: false }}
/>

Card virtualization for large datasets:

<Kanban
  cards={cards}
  columns={columns}
  render={{
    virtualizeCards: true,
    estimatedCardHeight: 96,
    cardOverscan: 8,
  }}
/>

Full virtualization (cards and columns):

<Kanban
  cards={cards}
  columns={columns}
  render={{
    virtualizeCards: true,
    virtualizeColumns: true,
    estimatedCardHeight: 96,
  }}
/>

Related​