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 0 Column 1 Column 2 Column 3 Column 4 Cell 0-0 Cell 0-1 Cell 0-2 Cell 0-3 Cell 0-4 Cell 1-0 Cell 1-1 Cell 1-2 Cell 1-3 Cell 1-4 Cell 2-0 Cell 2-1 Cell 2-2 Cell 2-3 Cell 2-4 Cell 3-0 Cell 3-1 Cell 3-2 Cell 3-3 Cell 3-4 Cell 4-0 Cell 4-1 Cell 4-2 Cell 4-3 Cell 4-4 Cell 5-0 Cell 5-1 Cell 5-2 Cell 5-3 Cell 5-4 Cell 6-0 Cell 6-1 Cell 6-2 Cell 6-3 Cell 6-4 columns column 0 column 1 column 2 column 3 column 4
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-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 hidden > 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 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 id = " column-visibility-btn" shape = " view-columns" action = " flat" popovertarget = " column-visibility" aria-label = " column visibility filter" > </ bp-button-icon>
</ bp-grid-footer>
</ bp-grid>
< bp-dropdown id = " column-visibility" 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
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 to hide columnds with the hidden
attribute or remove hidden columns from the DOM. bp-grid-column Properties Name Types Description width
string
control 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 role
string
ariaSort
string
Attributes Name Types Description width
string
control 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 Name Types Description --min-height
--min-width
--justify-content
--padding-block
--padding-inline
--background
--font-size
--color
--border-width
Slots Name Types Description default
column content
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
bp-grid-row Properties Name Types Description selected
boolean
selected visual state position
'fixed' | 'sticky' | ''
position individual row relative to the grid scroll container role
string
Attributes Name Types Description selected
boolean
selected visual state position
'fixed' | 'sticky' | ''
position individual row relative to the grid scroll container
CSS Properties Name Types Description --border-top
--border-bottom
--background
--min-height
--border-width
--border-color
bp-grid-cell Properties Name Types Description role
string
CSS Properties Name Types Description --border-right
--border-left
--min-height
--min-width
--font-size
--justify-content
--padding-block
--padding-inline-start
--padding-inline-end
--color
--border-width
Slots Name Types Description default
cell content