Grid Row Groups

npm0.0.0

Rows can be organized into groups based on shared characteristics or categories using row groups. To toggle the visibility of all other rows within a particular group, add a bp-button-expand to the first row in the group.

Groups

Column 1

Column 2

Column 3

Column 4

Cell 0-0

Cell 1-0

Cell 1-1

Cell 1-2

Cell 2-0

Cell 3-0

code

<script type="module">
  import '@blueprintui/grid/include/core.js';
  import '@blueprintui/grid/include/hover.js';
  import '@blueprintui/grid/include/keynav.js';
  import '@blueprintui/components/include/button-icon.js';
  import '@blueprintui/components/include/button-expand.js';
</script>
<bp-grid aria-label="row groups datagrid" row-style="hover">
  <bp-grid-header>
    <bp-grid-column width="max-content"></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><bp-button-expand aria-label="expand group 0"></bp-button-expand></bp-grid-cell>
    <bp-grid-cell>Cell 0-0</bp-grid-cell>
    <bp-grid-cell>Cell 0-0</bp-grid-cell>
    <bp-grid-cell>Cell 0-0</bp-grid-cell>
    <bp-grid-cell>Cell 0-0</bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell><bp-button-expand aria-label="expand group 1" checked></bp-button-expand></bp-grid-cell>
    <bp-grid-cell>Cell 1-0</bp-grid-cell>
    <bp-grid-cell>Cell 1-0</bp-grid-cell>
    <bp-grid-cell>Cell 1-0</bp-grid-cell>
    <bp-grid-cell>Cell 1-0</bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell aria-label="group 1-1"></bp-grid-cell>
    <bp-grid-cell>Cell 1-1</bp-grid-cell>
    <bp-grid-cell>Cell 1-1</bp-grid-cell>
    <bp-grid-cell>Cell 1-1</bp-grid-cell>
    <bp-grid-cell>Cell 1-1</bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell aria-label="group 1-2"></bp-grid-cell>
    <bp-grid-cell>Cell 1-2</bp-grid-cell>
    <bp-grid-cell>Cell 1-2</bp-grid-cell>
    <bp-grid-cell>Cell 1-2</bp-grid-cell>
    <bp-grid-cell>Cell 1-2</bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell><bp-button-expand aria-label="expand group 2"></bp-button-expand></bp-grid-cell>
    <bp-grid-cell>Cell 2-0</bp-grid-cell>
    <bp-grid-cell>Cell 2-0</bp-grid-cell>
    <bp-grid-cell>Cell 2-0</bp-grid-cell>
    <bp-grid-cell>Cell 2-0</bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row hidden>
    <bp-grid-cell aria-label="group 2-1"></bp-grid-cell>
    <bp-grid-cell>Cell 2-1</bp-grid-cell>
    <bp-grid-cell>Cell 2-1</bp-grid-cell>
    <bp-grid-cell>Cell 2-1</bp-grid-cell>
    <bp-grid-cell>Cell 2-1</bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell><bp-button-expand aria-label="expand group 3"></bp-button-expand></bp-grid-cell>
    <bp-grid-cell>Cell 3-0</bp-grid-cell>
    <bp-grid-cell>Cell 3-0</bp-grid-cell>
    <bp-grid-cell>Cell 3-0</bp-grid-cell>
    <bp-grid-cell>Cell 3-0</bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row hidden>
    <bp-grid-cell aria-label="group 3-0"></bp-grid-cell>
    <bp-grid-cell>Cell 3-0</bp-grid-cell>
    <bp-grid-cell>Cell 3-0</bp-grid-cell>
    <bp-grid-cell>Cell 3-0</bp-grid-cell>
    <bp-grid-cell>Cell 3-0</bp-grid-cell>
  </bp-grid-row>
</bp-grid>

Install

NPM

// npm package
import '@blueprintui/grid/include/core.js';
import '@blueprintui/components/include/button-expand.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/grid/include/core.js/+esm';
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button-expand.js/+esm';
</script>

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

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-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