TableSizePicker

Pick a table size by hovering a grid.

import { TableSizePicker } from '@kition/tessera-ui'

Examples

Insert a table

0 × 0 table

Pick a size

table-size-picker.tsx

import { useState } from 'react'
import { TableSizePicker } from '@kition/tessera-ui'

export default function Demo() {
  const [picked, setPicked] = useState('')
  return (
    <div className="demo-stack">
      <TableSizePicker onPick={(rows, columns) => setPicked(`${rows} × ${columns}`)} label={(rows, columns) => `${columns} × ${rows} table`} />
      <span>{picked ? `Inserted a ${picked} table` : 'Pick a size'}</span>
    </div>
  )
}

Props

TableSizePicker

Choosing a table's size by pointing at a grid of cells (Insert > Table).

Prop	Type	Default
`rows`	`number`	`8`
`columns`	`number`	`10`
`onPick`required	`(rows: number, columns: number) => void`	—
`label`required	`(rows: number, columns: number) => string`	—

Used in

1 of Kition's 16 kits use this component.