Data Grid

npm0.0.0

The Datagrid component is used to display large amounts of tabular data in a structured and organized way. The Datagrid functions similar HTML Table Element, stateless only rendering what HTML is provided. Interactions are managed by the host application. This provides significantly more flexibility for patterns and statemangament in your applications.

Basic

Column 0

Column 1

Column 2

Column 3

Column 4

Cell 0-0

Cell 0-1

Cell 0-2

Cell 0-3

Cell 0-4

Cell 1-0

Cell 1-1

Cell 1-2

Cell 1-3

Cell 1-4

Cell 2-0

Cell 2-1

Cell 2-2

Cell 2-3

Cell 2-4

Cell 3-0

Cell 3-1

Cell 3-2

Cell 3-3

Cell 3-4

Cell 4-0

Cell 4-1

Cell 4-2

Cell 4-3

Cell 4-4

Cell 5-0

Cell 5-1

Cell 5-2

Cell 5-3

Cell 5-4

Cell 6-0

Cell 6-1

Cell 6-2

Cell 6-3

Cell 6-4

code

<script type="module">
  import '@blueprintui/grid/include/core.js';
  import '@blueprintui/grid/include/keynav.js';
</script>
<bp-grid aria-label="basic datagrid">
  <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>

Keynav

Key

Function

Right Arrow

Moves focus one cell to the right.
If focus is on the right-most cell in the row, focus does not move.

Left Arrow

Moves focus one cell to the left.
If focus is on the left-most cell in the row, focus does not move.

Down Arrow

Moves focus one cell down.
If focus is on the bottom cell in the column, focus does not move.

Up Arrow

Moves focus one cell Up.
If focus is on the top cell in the column, focus does not move.

Page Down

Moves focus down five rows, scrolling so the bottom row in the currently visible set of rows becomes the first visible row.
If focus is in the last row, focus does not move.

Page Up

Moves focus up 5 rows, scrolling so the top row in the currently visible set of rows becomes the last visible row.
If focus is in the first row of the grid, focus does not move.

Home

Moves focus to the first cell in the row that contains focus.

End

Moves focus to the last cell in the row that contains focus.

Control + Home

Moves focus to the first cell in the first row.

Control + End

Moves focus to the last cell in the last row.

code

<script type="module">
  import '@blueprintui/grid/include/core.js';
  import '@blueprintui/grid/include/keynav.js';
</script>
<bp-grid aria-label="keyboard navigation datagrid demo">
  <bp-grid-header>
    <bp-grid-column width="200">Key</bp-grid-column>
    <bp-grid-column>Function</bp-grid-column>
  </bp-grid-header>
  <bp-grid-row>
    <bp-grid-cell>Right Arrow</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus one cell to the right.</li>
        <li>If focus is on the right-most cell in the row, focus does not move.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell>Left Arrow</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus one cell to the left.</li>
        <li>If focus is on the left-most cell in the row, focus does not move.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell>Down Arrow</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus one cell down.</li>
        <li>If focus is on the bottom cell in the column, focus does not move.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell>Up Arrow</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus one cell Up.</li>
        <li>If focus is on the top cell in the column, focus does not move.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell>Page Down</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus down five rows, scrolling so the bottom row in the currently visible set of rows becomes the first visible row.</li>
        <li>If focus is in the last row, focus does not move.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell>Page Up</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus up 5 rows, scrolling so the top row in the currently visible set of rows becomes the last visible row.</li>
        <li>If focus is in the first row of the grid, focus does not move.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell>Home</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus to the first cell in the row that contains focus.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell>End</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus to the last cell in the row that contains focus.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell>Control + Home</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus to the first cell in the first row.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
  <bp-grid-row>
    <bp-grid-cell>Control + End</bp-grid-cell>
    <bp-grid-cell>
      <ul>
        <li>Moves focus to the last cell in the last row.</li>
      </ul>
    </bp-grid-cell>
  </bp-grid-row>
</bp-grid>

Install

NPM

// npm package
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

Ensure that all grid functions and options, such as sorting, filtering, and pagination, are available to keyboard and screen reader users.

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