Grid
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component.
- Root element
-
vaadin-grid
Cells
- Cell (any)
-
vaadin-grid::part(cell) - Header row cell
-
vaadin-grid::part(header-cell) - Body cell
-
vaadin-grid::part(body-cell) - Footer row cell
-
vaadin-grid::part(footer-cell) - Focused cell
-
vaadin-grid::part(focused-cell) - Cell contents
-
vaadin-grid-cell-content - Cell in first column
-
vaadin-grid::part(first-column-cell) - Cell in last column
-
vaadin-grid::part(last-column-cell) - Cell in first row
-
vaadin-grid::part(first-row-cell) - Cell in last row
-
vaadin-grid::part(last-row-cell) - Cell in even row
-
vaadin-grid::part(even-row-cell) - Cell in odd row
-
vaadin-grid::part(odd-row-cell) - Cell in selected row
-
vaadin-grid::part(selected-row-cell) - Cell in first header row
-
vaadin-grid::part(first-header-row-cell) - Cell in last header row
-
vaadin-grid::part(last-header-row-cell) - Cell focus ring
-
vaadin-grid::part(cell)::before - Row focus ring
-
vaadin-grid::part(row)::before
You can style individual cells, rows, and columns by applying custom part names to them.
Selection Checkboxes
- Row selection checkbox
-
vaadin-grid> vaadin-checkbox - Select All checkbox
-
vaadin-grid> #selectAllCheckbox
Sorters
- Element
-
vaadin-grid-sorter - Active sorter
-
vaadin-grid-sorter[direction] - Column header content
-
vaadin-grid-sorter::part(content) - Sort indicators
-
vaadin-grid-sorter::part(indicators) - Sort indicator icons
-
vaadin-grid-sorter::part(indicators)::before - Sort order indicator
-
vaadin-grid-sorter::part(order)