Data Table: Column Pinning

Pin columns to the left or right edge for horizontal scroll tables.

Column Pinning

Pin columns so they stay visible when scrolling horizontally. The select and name columns are pinned left, actions is pinned right — scroll the middle columns to see them stick.

Configuration

<DataTable
  :columns="columns"
  :data="data"
  :page-count="pageCount"
  :on-server-side-change="handleChange"
  enable-column-pinning
  :default-pinning="{
    left: ['select', 'name'],
    right: ['actions'],
  }"
/>

Props

Prop	Type	Default	Description
`enableColumnPinning`	`boolean`	`false`	Enable column pinning
`defaultPinning`	`{ left?: string[], right?: string[] }`	-	Initial pinned columns

Pinning Programmatically

Via template ref or the useDataTable composable:

const tableRef = ref()

// Pin a column
tableRef.value?.pinColumn('email', 'left')

// Unpin a column
tableRef.value?.unpinColumn('email')

// Reset all pinning
tableRef.value?.resetPinning()

Visual Behavior

Pinned columns have solid backgrounds (no content scrolling behind them)
Shadow separators appear at the boundary between pinned and scrollable columns
Pinned columns maintain their background on hover and selection states
Works correctly with both header and body cells