render

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

Usage

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.

Example

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

• Columns guide - layout - scroll modes and column width
• Columns guide - performance - card and column virtualization