GridSelectionColumn

Description

<vaadin-grid-selection-column> is a helper element for the <vaadin-grid> that provides default renderers and functionality for item selection.

Example:

<vaadin-grid>
 <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>

 <vaadin-grid-column>
   ...

By default the selection column displays <vaadin-checkbox> elements in the column cells. The checkboxes in the body rows toggle selection of the corresponding row items.

When the grid data is provided as an array of items, the column header gets an additional checkbox that can be used for toggling selection for all the items at once.

The default content can also be overridden

Properties

autoSelect

Type: boolean

When true, the active gets automatically selected.

autoWidth

Type: boolean

Override autoWidth to enable auto-width

dragSelect

Type: boolean

When true, rows can be selected by dragging over the selection column.

flexGrow

Type: number

Flex grow ratio for the cell widths. When set to 0, cell width is fixed.

footerPartName

Type: string | null | undefined

Custom part name for the footer cell.

footerRenderer

Type: GridHeaderFooterRenderer<any, GridColumn<any>> | null | undefined

Custom function for rendering the footer content. Receives two arguments:

root The footer cell content DOM element. Append your content to it.
column The <vaadin-grid-column> element.

frozen

Type: boolean

When true, the column is frozen. When a column inside of a column group is frozen, all of the sibling columns inside the group will get frozen also.

frozenToEnd

Type: boolean

When true, the column is frozen to end of grid.

When a column inside of a column group is frozen to end, all of the sibling columns inside the group will get frozen to end also.

Column can not be set as frozen and frozenToEnd at the same time.

Type: string | null | undefined

Text content to display in the header cell of the column.

headerPartName

Type: string | null | undefined

Custom part name for the header cell.

headerRenderer

Type: GridHeaderFooterRenderer<any, GridColumn<any>> | null | undefined

Custom function for rendering the header content. Receives two arguments:

root The header cell content DOM element. Append your content to it.
column The <vaadin-grid-column> element.

hidden

Type: boolean

When set to true, the cells for this column are hidden.

path

Type: string | null | undefined

Path to an item sub-property whose value gets displayed in the column body cells. The property name is also shown in the column header if an explicit header or renderer isn't defined.

renderer

Type: GridBodyRenderer<any, GridColumn<any>> | null | undefined

Custom function for rendering the cell content. Receives three arguments:

root The cell content DOM element. Append your content to it.
column The <vaadin-grid-column> element.
model The object with the properties related with the rendered item, contains:
- model.index The index of the item.
- model.item The item.
- model.expanded Sublevel toggle state.
- model.level Level of the tree represented with a horizontal offset of the toggle button.
- model.selected Selected state.
- model.detailsOpened Details opened state.
- model.hasChildren Whether the item has children.

resizable

Type: boolean | null | undefined

When set to true, the column is user-resizable.

rowHeader

Type: boolean

When true, the cells for this column will be rendered with the role attribute set as rowheader, instead of the gridcell role value used by default.

When a column is set as row header, its cells will be announced by screen readers while navigating to help user identify the current row as uniquely as possible.

selectAll

Type: boolean

When true, all the items are selected.

textAlign

Type: GridColumnTextAlign | undefined

Aligns the columns cell content horizontally. Supported values: "start", "center" and "end".

width

Type: string | null | undefined

Width of the cells for this column.

Events

select-all-changed

Type: GridSelectionColumnSelectAllChangedEvent

Fired when the selectAll property changes.

Types

GridBodyRenderer

export type GridBodyRenderer<TItem, Column extends GridColumnMixin<TItem, Column>> = (
  root: HTMLElement,
  column: Column,
  model: GridItemModel<TItem>,
) => void;

GridColumnTextAlign

export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;

GridHeaderFooterRenderer

export type GridHeaderFooterRenderer<TItem, Column extends ColumnBaseMixinClass<TItem, Column>> = (
  root: HTMLElement,
  column: Column,
) => void;

GridItemModel

export interface GridItemModel<TItem> {
  index: number;
  item: TItem;
  selected?: boolean;
  expanded?: boolean;
  level?: number;
  detailsOpened?: boolean;
  hasChildren?: boolean;
}