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 0Column 1Column 2Column 3Column 4Cell 0-0Cell 0-1Cell 0-2Cell 0-3Cell 0-4Cell 1-0Cell 1-1Cell 1-2Cell 1-3Cell 1-4Cell 2-0Cell 2-1Cell 2-2Cell 2-3Cell 2-4Cell 3-0Cell 3-1Cell 3-2Cell 3-3Cell 3-4Cell 4-0Cell 4-1Cell 4-2Cell 4-3Cell 4-4Cell 5-0Cell 5-1Cell 5-2Cell 5-3Cell 5-4Cell 6-0Cell 6-1Cell 6-2Cell 6-3Cell 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 0Column 1Column 2Column 3Column 4Cell 0-0Cell 0-1Cell 0-2Cell 0-3Cell 0-4Cell 1-0Cell 1-1Cell 1-2Cell 1-3Cell 1-4Cell 2-0Cell 2-1Cell 2-2Cell 2-3Cell 2-4Cell 3-0Cell 3-1Cell 3-2Cell 3-3Cell 3-4Cell 4-0Cell 4-1Cell 4-2Cell 4-3Cell 4-4Cell 5-0Cell 5-1Cell 5-2Cell 5-3Cell 5-4Cell 6-0Cell 6-1Cell 6-2Cell 6-3Cell 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
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) |
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-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 |