Conditionally render bp-grid-placeholder and bp-progress-circle to indicate that the data is loading.
Async
code
<script type="module">
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/keynav.js';
import '@blueprintui/grid/include/placeholder.js';
import '@blueprintui/components/include/progress-circle.js';
</script>
<bp-grid aria-label="placeholder datagrid demo" height="390">
<bp-grid-column></bp-grid-column>
<bp-grid-placeholder>
<bp-progress-circle size="xl" status="accent"></bp-progress-circle>
<p bp-text="subsection">Loading Data...</p>
</bp-grid-placeholder>
</bp-grid>
Install
NPM
import '@blueprintui/components/include/undefined.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/undefined.js/+esm';
</script>
bp-grid
Properties
Name | Types | Description |
i18n |
| i18n string options |
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 |
grid | HTMLElement[][] | |
role | string | |
Attributes
Name | Types | Description |
i18n |
| i18n string options |
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 |
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 |
| |
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 |
| |
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 |
| |
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 |
| |
Slots
Name | Types | Description |
default |
| cell content |