Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Grid Column Visibility

The column visibility feature allows you to show or hide individual columns in the datagrid. To hide columns use the hidden attribute or remove hidden columns from the DOM.

Column Visibility

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-3
code
<script type="module">
  import '@blueprintui/grid/include/core.js';
  import '@blueprintui/grid/include/keynav.js';
  import '@blueprintui/grid/include/footer.js';
  import '@blueprintui/icons/include.js';
  import '@blueprintui/icons/shapes/view-columns.js';
  import '@blueprintui/components/include/checkbox.js';
  import '@blueprintui/components/include/dropdown.js';
  import '@blueprintui/components/include/button-icon.js';
</script>
<bp-grid aria-label="fixed column datagrid demo">
  <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 hidden>Column 4</bp-grid-column>

  <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 hidden>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 hidden>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 hidden>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 hidden>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 hidden>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 hidden>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 hidden>Cell 6-4</bp-grid-cell>
  </bp-grid-row>
  <bp-grid-footer>
    <bp-button-icon shape="view-columns" id="column-visibility-btn" aria-label="column visibility filter"></bp-button-icon>
  </bp-grid-footer>
</bp-grid>
<bp-dropdown anchor="column-visibility-btn" position="top-start">
  <bp-fieldset layout="vertical" style="width: 150px">
    <label>columns</label>
    <label>column 0</label>
    <bp-checkbox value="0" checked></bp-checkbox>
    <label>column 1</label>
    <bp-checkbox value="1" checked></bp-checkbox>
    <label>column 2</label>
    <bp-checkbox value="2" checked></bp-checkbox>
    <label>column 3</label>
    <bp-checkbox value="3" checked></bp-checkbox>
    <label>column 4</label>
    <bp-checkbox value="4"></bp-checkbox>
  </bp-fieldset>
</bp-dropdown>

Install

NPM

// npm package
import '@blueprintui/components/include/undefined.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/undefined.js/+esm';
</script>

Accessibility

  • Ensure to hide columnds with the hidden attribute or remove hidden columns from the DOM.

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

Slots

NameTypesDescription
defaultcolumn content

bp-grid

Properties

NameTypesDescription
i18ni18n string options
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
gridHTMLElement[][]
rolestring

Attributes

NameTypesDescription
i18ni18n string options
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
range-selectionboolean

CSS Properties

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

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

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

Slots

NameTypesDescription
defaultcell content