Skip to content

Pin/Freeze (Fixed columns)

Interface: ColumnRegular Type: DimensionColPin

WARNING

Be aware that pinning columns and rows introduces virtual indexes to the grid. Please read more in the Viewports section.

Allows columns to be fixed or "pinned" to one side of the grid, remaining visible as the user scrolls horizontally through other columns.

ts

const columns = [
  { name: 'First Name', prop: 'firstName', },
  { name: 'Status', prop: 'status', pin: 'colPinStart', },
  { name: 'Age', prop: 'age', pin: 'colPinEnd', },
];
Source code Git
ts
import { makeData } from '@/demo/makeData'
import type { ColumnRegular } from '@revolist/revogrid'

// Define columns
const columns: ColumnRegular[] = [
  { name: 'First Name', prop: 'firstName', size: 300, },
  { name: 'Status', prop: 'status', pin: 'colPinStart', size: 200 },
  { name: 'Age', prop: 'age', pin: 'colPinEnd', size: 135 },
]

// Render grid
function render() {
    // Create grid element
    const grid = document.createElement('revo-grid')
    document.getElementById('demo-overview')?.appendChild(grid)


    grid.columns = columns
    grid.source = makeData(10)
    grid.theme = 'compact'
    grid.stretch = true
}

Revogrid is a MIT-licensed open source library made by Revolist OU.