Header

The Grid header, which contains simple columns but also allows grouped columns. One instance is created and used per SubGrid automatically, you should not need to instantiate this class manually. See Column for information about column configuration.

Header
//<code-header>
fiddle.title = 'Header';
//</code-header>
const grid = new Grid({
    appendTo : targetElement,
    height   : 160,
    data     : [],

    columns : [
        { field : 'name', text : 'Simple column', flex : 1 },
        {
            field    : 'city',
            text     : 'Grouped columns',
            align    : 'center',
            children : [
                { width : 170, text : 'Sub column 1' },
                { width : 170, text : 'Sub column 2' }
            ]
        },
        { type : 'number', field : 'score', text : 'Right aligned column', align : 'right', flex : 1 }
    ]
});

Configs

74

Common

listenersEvents

Accessibility

ariaLabelWidget
keyMapKeyMap

CSS

clsWidget
colorWidget
htmlClsWidget
styleWidget
uiWidget

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget
titleWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

Misc

dataFieldWidget
disabledWidget
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
readOnlyWidget
refWidget
rippleWidget
tabWidget
tooltipWidget

Other

columnWidget
rtlRTL
spanWidget

Scrolling

Properties

66

Class hierarchy

isHeader: Boolean= truereadonly
Identifies an object as an instance of Header class, or subclass thereof.
isHeader: Boolean= truereadonlystatic
Identifies an object as an instance of Header class, or subclass thereof.
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isWidgetWidget

Accessibility

keyMapKeyMap

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget

Other

$namestaticWidget
columnWidget
rtlRTL
spanWidget
typestaticWidget

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget

Functions

59

Other

Get the header cell element for the specified column.

ParameterTypeDescription
columnIdString

Column id

Returns: HTMLElement -

Header cell element

composeWidget
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
LstaticLocalizable
maskWidget
onEvents
recomposeWidget
relayAllEvents
triggerEvents
unEvents
unmaskWidget

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

14
catchAllEvents
destroyEvents
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget

Event handlers

14

Typedefs

6

CSS variables

38
NameDescription
--b-grid-header-font-sizeGrid header font size
--b-grid-header-font-weightGrid header font weight
--b-grid-header-paddingGrid header padding. By default uses grid cells inline padding value (for both block & inline)
--b-grid-header-text-transformGrid header text transform
--b-grid-header-text-alignGrid header text align
--b-grid-header-gapGrid header inner gap
--b-grid-header-icon-font-sizeGrid header icon font size
--b-grid-header-border-widthGrid header border width (for header "cells"). By default same as cell border width
--b-grid-header-container-border-widthGrid header container border width (the entire header)
--b-grid-header-zindexGrid header z-index
--b-grid-header-icon-transition-durationGrid header icon transition duration (for example when fading icons in/out on hover)
--b-grid-header-backgroundGrid header background color
--b-grid-header-box-shadowGrid header box-shadow
--b-grid-header-colorGrid header text color
--b-grid-header-icon-colorGrid header icon color
--b-grid-header-border-colorGrid header border color
Hovered
--b-grid-header-hover-colorGrid header text color when hovered
--b-grid-header-hover-backgroundBackground color for the header when hovered

Inherited