Grid Responsive

npm0.0.0

Provide basic support for smaller devices by leveraging fixed column positioning. For each column, set an initial column width via the width attribute.

Responsive

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

Cell 7-0

Cell 7-1

Cell 7-2

Cell 7-3

Cell 7-4

Cell 8-0

Cell 8-1

Cell 8-2

Cell 8-3

Cell 8-4

Cell 9-0

Cell 9-1

Cell 9-2

Cell 9-3

Cell 9-4

Cell 10-0

Cell 10-1

Cell 10-2

Cell 10-3

Cell 10-4

Cell 11-0

Cell 11-1

Cell 11-2

Cell 11-3

Cell 11-4

Cell 12-0

Cell 12-1

Cell 12-2

Cell 12-3

Cell 12-4

Cell 13-0

Cell 13-1

Cell 13-2

Cell 13-3

Cell 13-4

Cell 14-0

Cell 14-1

Cell 14-2

Cell 14-3

Cell 14-4

Cell 15-0

Cell 15-1

Cell 15-2

Cell 15-3

Cell 15-4

Cell 16-0

Cell 16-1

Cell 16-2

Cell 16-3

Cell 16-4

Cell 17-0

Cell 17-1

Cell 17-2

Cell 17-3

Cell 17-4

Cell 18-0

Cell 18-1

Cell 18-2

Cell 18-3

Cell 18-4

Cell 19-0

Cell 19-1

Cell 19-2

Cell 19-3

Cell 19-4

code

<script type="module">
  import '@blueprintui/grid/include/core.js';
  import '@blueprintui/grid/include/keynav.js';
  import '@blueprintui/grid/include/column-position.js';
</script>
<bp-grid aria-label="responsive datagrid demo" height="480" style="width: 320px">
  <bp-grid-header>
    <bp-grid-column width="120" position="fixed">Column 0</bp-grid-column>

    <bp-grid-column width="200">Column 1</bp-grid-column>

    <bp-grid-column width="200">Column 2</bp-grid-column>

    <bp-grid-column width="200">Column 3</bp-grid-column>

    <bp-grid-column width="200">Column 4</bp-grid-column>
  </bp-grid-header>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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 role="rowheader">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 role="rowheader">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 role="rowheader">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 role="rowheader">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 role="rowheader">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 role="rowheader">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-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 7-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 8-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 9-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 10-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 11-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 12-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 13-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 14-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 15-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 16-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 17-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 18-4</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell role="rowheader">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-cell>Cell 19-4</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>

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