The column alignment feature allows you to control the alignment of the content within each column. By default, content in a datagrid is aligned to the left. To use the column alignment feature, add the align property to the column definition object, with the value being either start, center, or end.
Align Center
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';
import '@blueprintui/grid/include/column-alignment.js';
</script>
<bp-grid aria-label="column align center demo">
<bp-grid-header>
<bp-grid-column alignment="center">Column 0</bp-grid-column>
<bp-grid-column alignment="center">Column 1</bp-grid-column>
<bp-grid-column alignment="center">Column 2</bp-grid-column>
<bp-grid-column alignment="center">Column 3</bp-grid-column>
<bp-grid-column alignment="center">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>
Align End
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';
import '@blueprintui/grid/include/column-alignment.js';
</script>
<bp-grid aria-label="column align end demo">
<bp-grid-header>
<bp-grid-column alignment="end">Column 0</bp-grid-column>
<bp-grid-column alignment="end">Column 1</bp-grid-column>
<bp-grid-column alignment="end">Column 2</bp-grid-column>
<bp-grid-column alignment="end">Column 3</bp-grid-column>
<bp-grid-column alignment="end">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>
Align Start
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';
import '@blueprintui/grid/include/column-alignment.js';
</script>
<bp-grid aria-label="column align end demo">
<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
- The column alignment feature should be implemented in a way that does not create confusion representing the data.
- The datagrid should have a clear, logical structure that is easy for users to navigate and understand.
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
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-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 |