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

Resize

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';
  import '@blueprintui/grid/include/column-resize.js';
  import '@blueprintui/components/include/button-resize.js';
</script>
<section bp-layout="block gap:xs">
  <bp-grid column-layout="fixed" column-style="border" aria-label="resize column datagrid demo" height="390" style="max-width: 800px">
    <bp-grid-header>
      <bp-grid-column>
        Column 0
        <bp-button-resize step="10"></bp-button-resize>
      </bp-grid-column>

      <bp-grid-column>
        Column 1
        <bp-button-resize step="10"></bp-button-resize>
      </bp-grid-column>

      <bp-grid-column>
        Column 2
        <bp-button-resize step="10"></bp-button-resize>
      </bp-grid-column>

      <bp-grid-column>
        Column 3
        <bp-button-resize step="10"></bp-button-resize>
      </bp-grid-column>

      <bp-grid-column>
        Column 4
        <bp-button-resize step="10"></bp-button-resize>
      </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>
</section>

Resize Flex

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';
  import '@blueprintui/grid/include/column-resize.js';
  import '@blueprintui/components/include/button-resize.js';
</script>
<section bp-layout="block gap:xs">
  <bp-grid column-layout="flex" column-style="border" aria-label="resize flex column datagrid demo" height="390" style="max-width: 800px">
    <bp-grid-header>
      <bp-grid-column>
        Column 0
        <bp-button-resize step="10"></bp-button-resize>
      </bp-grid-column>

      <bp-grid-column>
        Column 1
        <bp-button-resize step="10"></bp-button-resize>
      </bp-grid-column>

      <bp-grid-column>
        Column 2
        <bp-button-resize step="10"></bp-button-resize>
      </bp-grid-column>

      <bp-grid-column>
        Column 3
        <bp-button-resize step="10"></bp-button-resize>
      </bp-grid-column>

      <bp-grid-column>
        Column 4
        <bp-button-resize step="10"></bp-button-resize>
      </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>
</section>

Install

NPM

// npm package
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/column-resize.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/column-resize.js/+esm';
</script>

Accessibility

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

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