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

Grid Row Fixed

A fixed position can be assigned to rows to keep them visible while scrolling. To do this, set the column to have a "fixed" position attribute.

Fixed

Column 0Column 1Column 2Column 3Cell 0-0Cell 0-1Cell 0-2Cell 0-3Cell 1-0Cell 1-1Cell 1-2Cell 1-3Cell 2-0Cell 2-1Cell 2-2Cell 2-3Cell 3-0Cell 3-1Cell 3-2Cell 3-3Cell 4-0Cell 4-1Cell 4-2Cell 4-3Cell 5-0Cell 5-1Cell 5-2Cell 5-3Cell 6-0Cell 6-1Cell 6-2Cell 6-3Cell 7-0Cell 7-1Cell 7-2Cell 7-3Cell 8-0Cell 8-1Cell 8-2Cell 8-3Cell 9-0Cell 9-1Cell 9-2Cell 9-3Cell 10-0Cell 10-1Cell 10-2Cell 10-3Cell 11-0Cell 11-1Cell 11-2Cell 11-3Cell 12-0Cell 12-1Cell 12-2Cell 12-3Cell 13-0Cell 13-1Cell 13-2Cell 13-3Cell 14-0Cell 14-1Cell 14-2Cell 14-3Cell 15-0Cell 15-1Cell 15-2Cell 15-3Cell 16-0Cell 16-1Cell 16-2Cell 16-3Cell 17-0Cell 17-1Cell 17-2Cell 17-3Cell 18-0Cell 18-1Cell 18-2Cell 18-3Cell 19-0Cell 19-1Cell 19-2Cell 19-3
code
<script type="module">
  import '@blueprintui/grid/include/core.js';
  import '@blueprintui/grid/include/keynav.js';
  import '@blueprintui/grid/include/row-position.js';
</script>
<bp-grid aria-label="row fixed datagrid demo" height="390">
  <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-header>

  <bp-grid-row position="fixed">
    <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-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-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-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-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-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-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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-row>

  <bp-grid-row>
    <bp-grid-cell>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-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-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

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