The Datagrid component is used to display large amounts of tabular data in a structured and organized way. The Datagrid functions similar HTML Table Element, stateless only rendering what HTML is provided. Interactions are managed by the host application. This provides significantly more flexibility for patterns and statemangament in your applications.
Basic
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 aria-label="basic 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>
Keynav
KeyFunctionRight Arrow- Moves focus one cell to the right.
- If focus is on the right-most cell in the row, focus does not move.
Left Arrow- Moves focus one cell to the left.
- If focus is on the left-most cell in the row, focus does not move.
Down Arrow- Moves focus one cell down.
- If focus is on the bottom cell in the column, focus does not move.
Up Arrow- Moves focus one cell Up.
- If focus is on the top cell in the column, focus does not move.
Page Down- Moves focus down five rows, scrolling so the bottom row in the currently visible set of rows becomes the first visible row.
- If focus is in the last row, focus does not move.
Page Up- Moves focus up 5 rows, scrolling so the top row in the currently visible set of rows becomes the last visible row.
- If focus is in the first row of the grid, focus does not move.
Home- Moves focus to the first cell in the row that contains focus.
End- Moves focus to the last cell in the row that contains focus.
Control + Home- Moves focus to the first cell in the first row.
Control + End- Moves focus to the last cell in the last row.
code
<script type="module">
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/keynav.js';
</script>
<bp-grid aria-label="keyboard navigation datagrid demo">
<bp-grid-header>
<bp-grid-column width="200">Key</bp-grid-column>
<bp-grid-column>Function</bp-grid-column>
</bp-grid-header>
<bp-grid-row>
<bp-grid-cell>Right Arrow</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus one cell to the right.</li>
<li>If focus is on the right-most cell in the row, focus does not move.</li>
</ul>
</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Left Arrow</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus one cell to the left.</li>
<li>If focus is on the left-most cell in the row, focus does not move.</li>
</ul>
</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Down Arrow</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus one cell down.</li>
<li>If focus is on the bottom cell in the column, focus does not move.</li>
</ul>
</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Up Arrow</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus one cell Up.</li>
<li>If focus is on the top cell in the column, focus does not move.</li>
</ul>
</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Page Down</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus down five rows, scrolling so the bottom row in the currently visible set of rows becomes the first visible row.</li>
<li>If focus is in the last row, focus does not move.</li>
</ul>
</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Page Up</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus up 5 rows, scrolling so the top row in the currently visible set of rows becomes the last visible row.</li>
<li>If focus is in the first row of the grid, focus does not move.</li>
</ul>
</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Home</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus to the first cell in the row that contains focus.</li>
</ul>
</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>End</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus to the last cell in the row that contains focus.</li>
</ul>
</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Control + Home</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus to the first cell in the first row.</li>
</ul>
</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Control + End</bp-grid-cell>
<bp-grid-cell>
<ul>
<li>Moves focus to the last cell in the last row.</li>
</ul>
</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 that all grid functions and options, such as sorting, filtering, and pagination, are available to keyboard and screen reader users.
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 |