Grid
- Usage
- Flow Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.
- Root element
-
vaadin-grid
Rows
- Row (any)
-
vaadin-grid::part(row) - First row
-
vaadin-grid::part(first-row) - Last row
-
vaadin-grid::part(last-row) - Even row
-
vaadin-grid::part(even-row) - Odd row
-
vaadin-grid::part(odd-row) - Selected row
-
vaadin-grid::part(selected-row)
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)
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)