The placeholder is used for when all row items can no longer be displayed.
Placeholder
Column 1Column 2Column 3Column 4
code
<script type="module">
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/keynav.js';
import '@blueprintui/grid/include/placeholder.js';
</script>
<bp-grid aria-label="placeholder datagrid demo" height="390">
<bp-grid-header>
<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-placeholder></bp-grid-placeholder>
</bp-grid>
Install
NPM
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/placeholder.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/placeholder.js/+esm';
</script>
bp-grid-placeholder
Properties
| Name | Types | Description |
|---|
i18n | | set default aria/i18n strings |
Attributes
| Name | Types | Description |
|---|
i18n | | set default aria/i18n strings |
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 | | |