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.

const columns = [
  { name: 'First Name', prop: 'firstName', },
  { name: 'Status', prop: 'status', pin: 'colPinStart', },
  { name: 'Age', prop: 'age', pin: 'colPinEnd', },
];

Source code Git

js.column.pin.example.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
}