lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Data Grid

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 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';
</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

KeyFunctionRight 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

NameTypesDescription
i18nset default aria/i18n strings
heightstringmax height for grid container
columnLayout'fixed' | 'flex'column layout determines initial column width calculation
rowStylePermutations< 'hover' | 'stripe' | 'border' >determines the visual style for rows
columnStylePermutations<'hover' | 'border'>determines the visual style for columns
selectable'multi' | 'single' | nullinitializes grid to appropriate aria/a11y settings for selections
scrollLockbooleandisables scroll container
layer'flat' | 'container'determines the visual layer style (container vs flat for nesting)
gridHTMLElement[][]
rolestring

Attributes

NameTypesDescription
i18nset default aria/i18n strings
heightstringmax height for grid container
column-layout'fixed' | 'flex'column layout determines initial column width calculation
row-stylePermutations< 'hover' | 'stripe' | 'border' >determines the visual style for rows
column-stylePermutations<'hover' | 'border'>determines the visual style for columns
selectable'multi' | 'single' | nullinitializes grid to appropriate aria/a11y settings for selections
scroll-lockbooleandisables scroll container
layer'flat' | 'container'determines the visual layer style (container vs flat for nesting)
range-selectionboolean

CSS Properties

NameTypesDescription
--background
--body-height
--scrollbar-background
--scrollbar-thumb-background
--column-height
--row-height
--scroll-padding-top
--row-content-visibility
--border-width

bp-grid-column

Properties

NameTypesDescription
widthstringcontrol 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
rolestring
ariaSortstring

Attributes

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

NameTypesDescription
--min-height
--min-width
--justify-content
--padding-block
--padding-inline
--background
--font-size
--color
--border-width

Slots

NameTypesDescription
defaultcolumn content

bp-grid-row

Properties

NameTypesDescription
selectedbooleanselected visual state
position'fixed' | 'sticky' | ''position individual row relative to the grid scroll container
rolestring

Attributes

NameTypesDescription
selectedbooleanselected visual state
position'fixed' | 'sticky' | ''position individual row relative to the grid scroll container

CSS Properties

NameTypesDescription
--border-top
--border-bottom
--background
--min-height
--border-width
--border-color

bp-grid-cell

Properties

NameTypesDescription
rolestring

CSS Properties

NameTypesDescription
--border-right
--border-left
--min-height
--min-width
--font-size
--justify-content
--padding-block
--padding-inline-start
--padding-inline-end
--color
--border-width

Slots

NameTypesDescription
defaultcell content