Grid Clipboard

npm0.0.0

Experimental: work in progress with no guarantees of API stability

The datagrid clipboard feature allows you to copy the contents of a datagrid to the clipboard. This is useful when you want to copy the contents of a datagrid to another application or to another part of the same application.

Example

col

cell

code

<script type="module">
  import '@blueprintui/grid/include/core.js';
  import '@blueprintui/grid/include/clipboard.js';
</script>
<bp-grid aria-label="example datagrid">
  <bp-grid-header>
    <bp-grid-column>col</bp-grid-column>
    <bp-grid-column>col</bp-grid-column>
    <bp-grid-column>col</bp-grid-column>
    <bp-grid-column>col</bp-grid-column>
  </bp-grid-header>

  <bp-grid-row>
    <bp-grid-cell>cell</bp-grid-cell>
    <bp-grid-cell>cell</bp-grid-cell>
    <bp-grid-cell>cell</bp-grid-cell>
    <bp-grid-cell>cell</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell>cell</bp-grid-cell>
    <bp-grid-cell>cell</bp-grid-cell>
    <bp-grid-cell>cell</bp-grid-cell>
    <bp-grid-cell>cell</bp-grid-cell>
  </bp-grid-row>

  <bp-grid-row>
    <bp-grid-cell>cell</bp-grid-cell>
    <bp-grid-cell>cell</bp-grid-cell>
    <bp-grid-cell>cell</bp-grid-cell>
    <bp-grid-cell>cell</bp-grid-cell>
  </bp-grid-row>
</bp-grid>

Install

NPM

// npm package
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/clipboard.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/clipboard.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`