Column Sizing Guide

The column sizing feature allows you to specify the width of each column, including min and max widths. It also enables dynamic column width changes through user interaction, such as dragging column headers.

Column measurements default to the following values:

export const defaultColumnSizing = {
  size: 150,
  minSize: 20,
  maxSize: Number.MAX_SAFE_INTEGER,
}

These defaults can be overridden by tableOptions.defaultColumn and individual column defs.

const columns = [
  {
    accessorKey: "col1",
    size: 270, // set column size for this column
  },
  // ...
]

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    // override default column sizing
    defaultColumn: {
      size: 200, // starting column size
      minSize: 50, // enforced during column resizing
      maxSize: 500, // enforced during column resizing
    },
  }))
}

The column sizes are stored in the table state as numbers. You'll need to account for this state in your UI:

<tr q-table-row>
  @for (header of headerGroup.headers; track header.id) {
    <th
      q-table-header-cell
      [attr.colspan]="header.colSpan"
      [style.width.px]="header.getSize()"
    >
      <!-- ... -->
    </th>
  }
</tr>

Column Resizing

This library provides built-in column resizing state and APIs for implementing column resizing.

Enable Column Resizing

By default, column.getCanResize() returns true for all columns. Column resizing can be disabled globally with the enableColumnResizing table option, or per-column with the enableResizing column option.

const columns = [
  {
    accessorKey: "id",
    enableResizing: false, // disable resizing for just this column
    size: 200, // starting column size
  },
  // ...
]

Column Resize Mode

The default column resize mode is "onEnd", meaning column.getSize() returns the new size only after resizing completes. A UI indicator typically displays during the resize operation.

The "onEnd" mode helps avoid rendering performance issues in complex tables. For tables that can handle 60 fps renders, switch to "onChange" mode for immediate updates using the columnResizeMode table option.

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    // ...
    columnResizeMode: "onChange", // change column resize mode to "onChange"
  }))
}

Column Resize Direction

This library assumes left-to-right layout by default. For right-to-left layouts, set the column resize direction to "rtl".

// ...
export class ExampleComponent {
  table = createAngularTable(() => ({
    // ...
    columnResizeDirection: "rtl", // change column resize direction to "rtl" for certain locales
  }))
}

Column Size APIs

Apply column sizes to header cells, data cells, or footer cells using these APIs:

header.getSize()
column.getSize()
cell.column.getSize()

Column sizes are commonly applied using CSS variables or inline styles.

<th
  q-table-header-cell
  [attr.colspan]="header.colSpan"
  [style.width.px]="header.getSize()"
></th>

For performance optimization with complex tables, consider using CSS variables instead of inline styles.

Column Resize APIs

QUI Table provides pre-built event handlers for drag interactions. These convenience functions update column sizing state and trigger re-renders. Use header.getResizeHandler() for both mouse and touch events.

<div
  class="resize-handle"
  (mousedown)="header.getResizeHandler()($event)"
  (touchstart)="header.getResizeHandler()($event)"
></div>

Column Resize Indicator with `ColumnSizingInfoState`

QUI Table maintains a columnSizingInfo state object for rendering column resize indicator UI.

<div
  class="resize-indicator"
  [style.transform]="header.column.getIsResizing()
    ? 'translateX(' + table.getState().columnSizingInfo.deltaOffset + 'px)'
    : ''"
></div>

Advanced Column Resizing Performance

Large or complex tables may experience degraded performance during column resizing without proper optimization.

Following these steps should provide significant performance improvements during column resizing:

Don't use column.getSize() on every header and every data cell. Instead, calculate all column widths once upfront.
Use OnPush change detection strategy.
Use CSS variables to communicate column widths to your table cells.

API

ColumnSizingState

Available on the table instance via table.getState().columnSizing

// dict of column id to numeric pixel width
type ColumnSizingState = Record<string, number>

ColumnSizingInfoState

Available on the table instance via table.getState().columnSizingInfo

Last updated on Nov 26, 2025 by Ryan Bower

Column Pinning

Column Visibility Guide