Grid Column Fixed

npm0.0.0

Columns can be fixed in place to prevent them from scrolling horizontally with the rest of the grid. To do this, assign the "fixed" position attribute to the column.

Position Fixed

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: 760px">
  <bp-grid-header>
    <bp-grid-column width="200" position="fixed">Column 0</bp-grid-column>
    <bp-grid-column width="200">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>

Position Multi Fixed

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: 760px">
  <bp-grid-header>
    <bp-grid-column width="200" position="fixed">Column 0</bp-grid-column>
    <bp-grid-column width="200">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" position="fixed">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)
`grid`	`HTMLElement[][]`
`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`

CSS Properties

Name	Types	Description
`--background`
`--body-height`
`--scrollbar-background`
`--scrollbar-thumb-background`
`--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