Grid Column Sticky

npm0.0.0

Sticky columns behave similarly to fixed or pinned columns, as they "stick" to the viewport and remain visible while the rest of the grid is scrolled horizontally.

Position Sticky

Column 0

Column 1

Column 2

Column 3

Column 4

Cell 0-0

Cell 0-1

Cell 0-2

Cell 0-3

Cell 0-4

Cell 1-0

Cell 1-1

Cell 1-2

Cell 1-3

Cell 1-4

Cell 2-0

Cell 2-1

Cell 2-2

Cell 2-3

Cell 2-4

Cell 3-0

Cell 3-1

Cell 3-2

Cell 3-3

Cell 3-4

Cell 4-0

Cell 4-1

Cell 4-2

Cell 4-3

Cell 4-4

Cell 5-0

Cell 5-1

Cell 5-2

Cell 5-3

Cell 5-4

Cell 6-0

Cell 6-1

Cell 6-2

Cell 6-3

Cell 6-4

code

<script type="module">
  import '@blueprintui/grid/include/core.js';
  import '@blueprintui/grid/include/keynav.js';
  import '@blueprintui/grid/include/column-position.js';
</script>
<bp-grid aria-label="fixed column datagrid demo" style="width: 700px">
  <bp-grid-header>
    <bp-grid-column width="200">Column 0</bp-grid-column>
    <bp-grid-column width="200" position="sticky">Column 1</bp-grid-column>
    <bp-grid-column width="200">Column 2</bp-grid-column>
    <bp-grid-column width="200">Column 3</bp-grid-column>
    <bp-grid-column width="200">Column 4</bp-grid-column>
  </bp-grid-header>

  <bp-grid-row>
    <bp-grid-cell>Cell 0-0</bp-grid-cell>
    <bp-grid-cell>Cell 0-1</bp-grid-cell>
    <bp-grid-cell>Cell 0-2</bp-grid-cell>
    <bp-grid-cell>Cell 0-3</bp-grid-cell>
    <bp-grid-cell>Cell 0-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell>Cell 1-0</bp-grid-cell>
    <bp-grid-cell>Cell 1-1</bp-grid-cell>
    <bp-grid-cell>Cell 1-2</bp-grid-cell>
    <bp-grid-cell>Cell 1-3</bp-grid-cell>
    <bp-grid-cell>Cell 1-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell>Cell 2-0</bp-grid-cell>
    <bp-grid-cell>Cell 2-1</bp-grid-cell>
    <bp-grid-cell>Cell 2-2</bp-grid-cell>
    <bp-grid-cell>Cell 2-3</bp-grid-cell>
    <bp-grid-cell>Cell 2-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell>Cell 3-0</bp-grid-cell>
    <bp-grid-cell>Cell 3-1</bp-grid-cell>
    <bp-grid-cell>Cell 3-2</bp-grid-cell>
    <bp-grid-cell>Cell 3-3</bp-grid-cell>
    <bp-grid-cell>Cell 3-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell>Cell 4-0</bp-grid-cell>
    <bp-grid-cell>Cell 4-1</bp-grid-cell>
    <bp-grid-cell>Cell 4-2</bp-grid-cell>
    <bp-grid-cell>Cell 4-3</bp-grid-cell>
    <bp-grid-cell>Cell 4-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell>Cell 5-0</bp-grid-cell>
    <bp-grid-cell>Cell 5-1</bp-grid-cell>
    <bp-grid-cell>Cell 5-2</bp-grid-cell>
    <bp-grid-cell>Cell 5-3</bp-grid-cell>
    <bp-grid-cell>Cell 5-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell>Cell 6-0</bp-grid-cell>
    <bp-grid-cell>Cell 6-1</bp-grid-cell>
    <bp-grid-cell>Cell 6-2</bp-grid-cell>
    <bp-grid-cell>Cell 6-3</bp-grid-cell>
    <bp-grid-cell>Cell 6-4</bp-grid-cell>
  </bp-grid-row>
</bp-grid>

Install

NPM

// npm package
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/keynav.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/grid/include/core.js/+esm';
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/grid/include/keynav.js/+esm';
</script>

bp-grid-column

Properties

Name	Types	Description
`width`	`string`	control width of grid column via numeric or CSS value types
`position`	`'sticky' \| 'fixed'`	position individual column relative to the grid scroll container
`alignment`	`'start' \| 'center' \| 'end'`	align column content and corresponding column cells
`role`	`string`
`ariaSort`	`string`

Attributes

Name	Types	Description
`width`	`string`	control width of grid column via numeric or CSS value types
`position`	`'sticky' \| 'fixed'`	position individual column relative to the grid scroll container
`alignment`	`'start' \| 'center' \| 'end'`	align column content and corresponding column cells

CSS Properties

Name	Types	Description
`--min-height`
`--min-width`
`--justify-content`
`--padding-block`
`--padding-inline`
`--background`
`--font-size`
`--color`
`--border-width`

Slots

Name	Types	Description
`default`		column content

bp-grid

Properties

Name	Types	Description
`i18n`		set default aria/i18n strings
`height`	`string`	max height for grid container
`columnLayout`	`'fixed' \| 'flex'`	column layout determines initial column width calculation
`rowStyle`	`Permutations< 'hover' \| 'stripe' \| 'border' >`	determines the visual style for rows
`columnStyle`	`Permutations<'hover' \| 'border'>`	determines the visual style for columns
`selectable`	`'multi' \| 'single' \| null`	initializes grid to appropriate aria/a11y settings for selections
`scrollLock`	`boolean`	disables scroll container
`layer`	`'flat' \| 'container'`	determines the visual layer style (container vs flat for nesting)
`rangeSelection`	`boolean`	enables range selection
`grid`	`HTMLElement[][]`
`columns`	`BpGridColumn[]`
`cells`	`BpGridCell[]`
`rows`	`BpGridRow[]`
`role`	`string`

Attributes

Name	Types	Description
`i18n`		set default aria/i18n strings
`height`	`string`	max height for grid container
`column-layout`	`'fixed' \| 'flex'`	column layout determines initial column width calculation
`row-style`	`Permutations< 'hover' \| 'stripe' \| 'border' >`	determines the visual style for rows
`column-style`	`Permutations<'hover' \| 'border'>`	determines the visual style for columns
`selectable`	`'multi' \| 'single' \| null`	initializes grid to appropriate aria/a11y settings for selections
`scroll-lock`	`boolean`	disables scroll container
`layer`	`'flat' \| 'container'`	determines the visual layer style (container vs flat for nesting)
`range-selection`	`boolean`	enables range selection

CSS Properties

Name	Types	Description
`--background`
`--body-height`
`--column-height`
`--row-height`
`--scroll-padding-top`
`--row-content-visibility`
`--border-width`

bp-grid-row

Properties

Name	Types	Description
`selected`	`boolean`	selected visual state
`position`	`'fixed' \| 'sticky' \| ''`	position individual row relative to the grid scroll container
`role`	`string`

Attributes

Name	Types	Description
`selected`	`boolean`	selected visual state
`position`	`'fixed' \| 'sticky' \| ''`	position individual row relative to the grid scroll container

CSS Properties

Name	Types	Description
`--border-top`
`--border-bottom`
`--background`
`--min-height`
`--border-width`
`--border-color`

bp-grid-cell

Properties

Name	Types	Description
`role`	`string`

CSS Properties

Name	Types	Description
`--border-right`
`--border-left`
`--min-height`
`--min-width`
`--font-size`
`--justify-content`
`--padding-block`
`--padding-inline-start`
`--padding-inline-end`
`--color`
`--border-width`

Slots

Name	Types	Description
`default`		cell content