The height property controls the scroll height of the grid container. By default, the grid expands to the number of provided rows.
Height
Column 0Column 1Column 2Column 3Cell 0-0Cell 0-1Cell 0-2Cell 0-3Cell 1-0Cell 1-1Cell 1-2Cell 1-3Cell 2-0Cell 2-1Cell 2-2Cell 2-3Cell 3-0Cell 3-1Cell 3-2Cell 3-3Cell 4-0Cell 4-1Cell 4-2Cell 4-3Cell 5-0Cell 5-1Cell 5-2Cell 5-3Cell 6-0Cell 6-1Cell 6-2Cell 6-3Cell 7-0Cell 7-1Cell 7-2Cell 7-3Cell 8-0Cell 8-1Cell 8-2Cell 8-3Cell 9-0Cell 9-1Cell 9-2Cell 9-3Cell 10-0Cell 10-1Cell 10-2Cell 10-3Cell 11-0Cell 11-1Cell 11-2Cell 11-3Cell 12-0Cell 12-1Cell 12-2Cell 12-3Cell 13-0Cell 13-1Cell 13-2Cell 13-3Cell 14-0Cell 14-1Cell 14-2Cell 14-3Cell 15-0Cell 15-1Cell 15-2Cell 15-3Cell 16-0Cell 16-1Cell 16-2Cell 16-3Cell 17-0Cell 17-1Cell 17-2Cell 17-3Cell 18-0Cell 18-1Cell 18-2Cell 18-3Cell 19-0Cell 19-1Cell 19-2Cell 19-3Cell 20-0Cell 20-1Cell 20-2Cell 20-3Cell 21-0Cell 21-1Cell 21-2Cell 21-3Cell 22-0Cell 22-1Cell 22-2Cell 22-3Cell 23-0Cell 23-1Cell 23-2Cell 23-3Cell 24-0Cell 24-1Cell 24-2Cell 24-3Cell 25-0Cell 25-1Cell 25-2Cell 25-3Cell 26-0Cell 26-1Cell 26-2Cell 26-3Cell 27-0Cell 27-1Cell 27-2Cell 27-3Cell 28-0Cell 28-1Cell 28-2Cell 28-3Cell 29-0Cell 29-1Cell 29-2Cell 29-3Cell 30-0Cell 30-1Cell 30-2Cell 30-3Cell 31-0Cell 31-1Cell 31-2Cell 31-3Cell 32-0Cell 32-1Cell 32-2Cell 32-3Cell 33-0Cell 33-1Cell 33-2Cell 33-3Cell 34-0Cell 34-1Cell 34-2Cell 34-3Cell 35-0Cell 35-1Cell 35-2Cell 35-3Cell 36-0Cell 36-1Cell 36-2Cell 36-3Cell 37-0Cell 37-1Cell 37-2Cell 37-3Cell 38-0Cell 38-1Cell 38-2Cell 38-3Cell 39-0Cell 39-1Cell 39-2Cell 39-3Cell 40-0Cell 40-1Cell 40-2Cell 40-3Cell 41-0Cell 41-1Cell 41-2Cell 41-3Cell 42-0Cell 42-1Cell 42-2Cell 42-3Cell 43-0Cell 43-1Cell 43-2Cell 43-3Cell 44-0Cell 44-1Cell 44-2Cell 44-3Cell 45-0Cell 45-1Cell 45-2Cell 45-3Cell 46-0Cell 46-1Cell 46-2Cell 46-3Cell 47-0Cell 47-1Cell 47-2Cell 47-3Cell 48-0Cell 48-1Cell 48-2Cell 48-3Cell 49-0Cell 49-1Cell 49-2Cell 49-3
code
<script type="module">
import '@blueprintui/grid/include/core.js';
</script>
<bp-grid aria-label="no scroll datagrid" height="390">
<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-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-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-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-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-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-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-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-row>
<bp-grid-row>
<bp-grid-cell>Cell 7-0</bp-grid-cell>
<bp-grid-cell>Cell 7-1</bp-grid-cell>
<bp-grid-cell>Cell 7-2</bp-grid-cell>
<bp-grid-cell>Cell 7-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 8-0</bp-grid-cell>
<bp-grid-cell>Cell 8-1</bp-grid-cell>
<bp-grid-cell>Cell 8-2</bp-grid-cell>
<bp-grid-cell>Cell 8-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 9-0</bp-grid-cell>
<bp-grid-cell>Cell 9-1</bp-grid-cell>
<bp-grid-cell>Cell 9-2</bp-grid-cell>
<bp-grid-cell>Cell 9-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 10-0</bp-grid-cell>
<bp-grid-cell>Cell 10-1</bp-grid-cell>
<bp-grid-cell>Cell 10-2</bp-grid-cell>
<bp-grid-cell>Cell 10-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 11-0</bp-grid-cell>
<bp-grid-cell>Cell 11-1</bp-grid-cell>
<bp-grid-cell>Cell 11-2</bp-grid-cell>
<bp-grid-cell>Cell 11-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 12-0</bp-grid-cell>
<bp-grid-cell>Cell 12-1</bp-grid-cell>
<bp-grid-cell>Cell 12-2</bp-grid-cell>
<bp-grid-cell>Cell 12-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 13-0</bp-grid-cell>
<bp-grid-cell>Cell 13-1</bp-grid-cell>
<bp-grid-cell>Cell 13-2</bp-grid-cell>
<bp-grid-cell>Cell 13-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 14-0</bp-grid-cell>
<bp-grid-cell>Cell 14-1</bp-grid-cell>
<bp-grid-cell>Cell 14-2</bp-grid-cell>
<bp-grid-cell>Cell 14-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 15-0</bp-grid-cell>
<bp-grid-cell>Cell 15-1</bp-grid-cell>
<bp-grid-cell>Cell 15-2</bp-grid-cell>
<bp-grid-cell>Cell 15-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 16-0</bp-grid-cell>
<bp-grid-cell>Cell 16-1</bp-grid-cell>
<bp-grid-cell>Cell 16-2</bp-grid-cell>
<bp-grid-cell>Cell 16-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 17-0</bp-grid-cell>
<bp-grid-cell>Cell 17-1</bp-grid-cell>
<bp-grid-cell>Cell 17-2</bp-grid-cell>
<bp-grid-cell>Cell 17-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 18-0</bp-grid-cell>
<bp-grid-cell>Cell 18-1</bp-grid-cell>
<bp-grid-cell>Cell 18-2</bp-grid-cell>
<bp-grid-cell>Cell 18-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 19-0</bp-grid-cell>
<bp-grid-cell>Cell 19-1</bp-grid-cell>
<bp-grid-cell>Cell 19-2</bp-grid-cell>
<bp-grid-cell>Cell 19-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 20-0</bp-grid-cell>
<bp-grid-cell>Cell 20-1</bp-grid-cell>
<bp-grid-cell>Cell 20-2</bp-grid-cell>
<bp-grid-cell>Cell 20-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 21-0</bp-grid-cell>
<bp-grid-cell>Cell 21-1</bp-grid-cell>
<bp-grid-cell>Cell 21-2</bp-grid-cell>
<bp-grid-cell>Cell 21-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 22-0</bp-grid-cell>
<bp-grid-cell>Cell 22-1</bp-grid-cell>
<bp-grid-cell>Cell 22-2</bp-grid-cell>
<bp-grid-cell>Cell 22-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 23-0</bp-grid-cell>
<bp-grid-cell>Cell 23-1</bp-grid-cell>
<bp-grid-cell>Cell 23-2</bp-grid-cell>
<bp-grid-cell>Cell 23-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 24-0</bp-grid-cell>
<bp-grid-cell>Cell 24-1</bp-grid-cell>
<bp-grid-cell>Cell 24-2</bp-grid-cell>
<bp-grid-cell>Cell 24-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 25-0</bp-grid-cell>
<bp-grid-cell>Cell 25-1</bp-grid-cell>
<bp-grid-cell>Cell 25-2</bp-grid-cell>
<bp-grid-cell>Cell 25-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 26-0</bp-grid-cell>
<bp-grid-cell>Cell 26-1</bp-grid-cell>
<bp-grid-cell>Cell 26-2</bp-grid-cell>
<bp-grid-cell>Cell 26-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 27-0</bp-grid-cell>
<bp-grid-cell>Cell 27-1</bp-grid-cell>
<bp-grid-cell>Cell 27-2</bp-grid-cell>
<bp-grid-cell>Cell 27-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 28-0</bp-grid-cell>
<bp-grid-cell>Cell 28-1</bp-grid-cell>
<bp-grid-cell>Cell 28-2</bp-grid-cell>
<bp-grid-cell>Cell 28-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 29-0</bp-grid-cell>
<bp-grid-cell>Cell 29-1</bp-grid-cell>
<bp-grid-cell>Cell 29-2</bp-grid-cell>
<bp-grid-cell>Cell 29-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 30-0</bp-grid-cell>
<bp-grid-cell>Cell 30-1</bp-grid-cell>
<bp-grid-cell>Cell 30-2</bp-grid-cell>
<bp-grid-cell>Cell 30-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 31-0</bp-grid-cell>
<bp-grid-cell>Cell 31-1</bp-grid-cell>
<bp-grid-cell>Cell 31-2</bp-grid-cell>
<bp-grid-cell>Cell 31-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 32-0</bp-grid-cell>
<bp-grid-cell>Cell 32-1</bp-grid-cell>
<bp-grid-cell>Cell 32-2</bp-grid-cell>
<bp-grid-cell>Cell 32-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 33-0</bp-grid-cell>
<bp-grid-cell>Cell 33-1</bp-grid-cell>
<bp-grid-cell>Cell 33-2</bp-grid-cell>
<bp-grid-cell>Cell 33-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 34-0</bp-grid-cell>
<bp-grid-cell>Cell 34-1</bp-grid-cell>
<bp-grid-cell>Cell 34-2</bp-grid-cell>
<bp-grid-cell>Cell 34-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 35-0</bp-grid-cell>
<bp-grid-cell>Cell 35-1</bp-grid-cell>
<bp-grid-cell>Cell 35-2</bp-grid-cell>
<bp-grid-cell>Cell 35-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 36-0</bp-grid-cell>
<bp-grid-cell>Cell 36-1</bp-grid-cell>
<bp-grid-cell>Cell 36-2</bp-grid-cell>
<bp-grid-cell>Cell 36-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 37-0</bp-grid-cell>
<bp-grid-cell>Cell 37-1</bp-grid-cell>
<bp-grid-cell>Cell 37-2</bp-grid-cell>
<bp-grid-cell>Cell 37-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 38-0</bp-grid-cell>
<bp-grid-cell>Cell 38-1</bp-grid-cell>
<bp-grid-cell>Cell 38-2</bp-grid-cell>
<bp-grid-cell>Cell 38-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 39-0</bp-grid-cell>
<bp-grid-cell>Cell 39-1</bp-grid-cell>
<bp-grid-cell>Cell 39-2</bp-grid-cell>
<bp-grid-cell>Cell 39-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 40-0</bp-grid-cell>
<bp-grid-cell>Cell 40-1</bp-grid-cell>
<bp-grid-cell>Cell 40-2</bp-grid-cell>
<bp-grid-cell>Cell 40-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 41-0</bp-grid-cell>
<bp-grid-cell>Cell 41-1</bp-grid-cell>
<bp-grid-cell>Cell 41-2</bp-grid-cell>
<bp-grid-cell>Cell 41-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 42-0</bp-grid-cell>
<bp-grid-cell>Cell 42-1</bp-grid-cell>
<bp-grid-cell>Cell 42-2</bp-grid-cell>
<bp-grid-cell>Cell 42-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 43-0</bp-grid-cell>
<bp-grid-cell>Cell 43-1</bp-grid-cell>
<bp-grid-cell>Cell 43-2</bp-grid-cell>
<bp-grid-cell>Cell 43-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 44-0</bp-grid-cell>
<bp-grid-cell>Cell 44-1</bp-grid-cell>
<bp-grid-cell>Cell 44-2</bp-grid-cell>
<bp-grid-cell>Cell 44-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 45-0</bp-grid-cell>
<bp-grid-cell>Cell 45-1</bp-grid-cell>
<bp-grid-cell>Cell 45-2</bp-grid-cell>
<bp-grid-cell>Cell 45-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 46-0</bp-grid-cell>
<bp-grid-cell>Cell 46-1</bp-grid-cell>
<bp-grid-cell>Cell 46-2</bp-grid-cell>
<bp-grid-cell>Cell 46-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 47-0</bp-grid-cell>
<bp-grid-cell>Cell 47-1</bp-grid-cell>
<bp-grid-cell>Cell 47-2</bp-grid-cell>
<bp-grid-cell>Cell 47-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 48-0</bp-grid-cell>
<bp-grid-cell>Cell 48-1</bp-grid-cell>
<bp-grid-cell>Cell 48-2</bp-grid-cell>
<bp-grid-cell>Cell 48-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 49-0</bp-grid-cell>
<bp-grid-cell>Cell 49-1</bp-grid-cell>
<bp-grid-cell>Cell 49-2</bp-grid-cell>
<bp-grid-cell>Cell 49-3</bp-grid-cell>
</bp-grid-row>
</bp-grid>
Min Height
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-4footer
code
<script type="module">
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/footer.js';
import '@blueprintui/grid/include/keynav.js';
</script>
<bp-grid aria-label="min height datagrid" style="--body-min-height: 400px">
<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-footer>footer</bp-grid-footer>
</bp-grid>
The minimum grid body height can be set via the --body-min-height CSS custom property. This is helpful for cases where the grid Height should remain consistent even if few or no rows are present.
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>
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 | | 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 |