addResizedColumns

addResizedColumns allows columns to be resized programatically and dynamically.

Options

const table = createTable(data, {
  resize: addResizedColumns({ ... }),
});

const table = createTable(data, {
  resize: addResizedColumns({ ... }),
});

onResizeEnd?: (event: Event) => void

Called when a drag-resize ends.

Column Options

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      resize: { ... },
    },
  }),
]);

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      resize: { ... },
    },
  }),
]);

initialWidth?: number

Initial width in px.

minWidth?: number

Minimum width in px.

maxWidth?: number

Maximum width in px.

disable?: boolean

Disable resizing for the column. If all child columns of a group are disabled, the group is disabled.

Prop Set

HeaderCell action

Use use:cell.current.props.resize on the <th> to initialize the plugin.

{#each headerRow.cells as cell (cell.id)}
  <th {...cell.current.attrs} use:cell.current.props.resize> ... </th>
{/each}

{#each headerRow.cells as cell (cell.id)}
  <th {...cell.current.attrs} use:cell.current.props.resize> ... </th>
{/each}

HeaderCell props cell.current.props.resize

drag: (node: Element) => void

Action to enable drag-to-resize on an element.

reset: (node: Element) => void

Action to enable double-click-to-reset on an element.

disabled: boolean

Whether resizing is disabled for this column.

Plugin State

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { columnWidths } = pluginStates.resize

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { columnWidths } = pluginStates.resize

columnWidths: Box<Record<string, number>>

The current column widths in pixels, keyed by column id. Assign a new record to change them:

columnWidths.current = { ...columnWidths.current, name: 240 }

columnWidths.current = { ...columnWidths.current, name: 240 }