Grid Layer

npm0.0.0

The layer feature allows you to customize the containment style of the grid. This can be helpful for nesting grid inside other container like components.

Layer Flat

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';
</script>
<bp-grid layer="flat" aria-label="layer flat datagrid">
  <bp-grid-header>
    <bp-grid-column>Column 0</bp-grid-column>
    <bp-grid-column>Column 1</bp-grid-column>
    <bp-grid-column>Column 2</bp-grid-column>
    <bp-grid-column>Column 3</bp-grid-column>
    <bp-grid-column>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>

Layer Flat Border

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';
</script>
<bp-grid layer="flat" row-style="border" column-style="border" aria-label="layer flat border datagrid">
  <bp-grid-header>
    <bp-grid-column>Column 0</bp-grid-column>
    <bp-grid-column>Column 1</bp-grid-column>
    <bp-grid-column>Column 2</bp-grid-column>
    <bp-grid-column>Column 3</bp-grid-column>
    <bp-grid-column>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>

Accessibility

Ensure grid content has proper contrast level regardless of active layer.

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-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-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