Grid Pro
- 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-pro
Cells
- Cell (any)
-
vaadin-grid-pro
::part(cell) - Header row cell
-
vaadin-grid-pro
::part(header-cell) - Body cell
-
vaadin-grid-pro
::part(body-cell) - Footer row cell
-
vaadin-grid-pro
::part(footer-cell) - Focused cell
-
vaadin-grid-pro
::part(focused-cell) - Editable cell
-
vaadin-grid-pro
::part(editable-cell) - Cell contents
-
vaadin-grid-cell-content
- Cell in first column
-
vaadin-grid-pro
::part(first-column-cell) - Cell in last column
-
vaadin-grid-pro
::part(last-column-cell) - Cell in first row
-
vaadin-grid-pro
::part(first-row-cell) - Cell in last column
-
vaadin-grid-pro
::part(last-row-cell) - Cell in odd row
-
vaadin-grid-pro
::part(odd-row-cell) - Cell in even row
-
vaadin-grid-pro
::part(even-row-cell) - Cell in selected row
-
vaadin-grid-pro
::part(selected-row-cell) - Cell in first header row
-
vaadin-grid-pro
::part(first-header-row-cell) - Cell in last header row
-
vaadin-grid-pro
::part(last-header-row-cell) - Cell focus ring
-
vaadin-grid
::part(cell)::before - Row focus ring
-
vaadin-grid
::part(row)::before
Selection Checkboxes
- Row selection checkbox
-
vaadin-grid-pro
> vaadin-checkbox - Select All checkbox
-
vaadin-grid-pro
> #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)
Item Details
- Item details cell (spans entire row)
-
vaadin-grid-pro
::part(details-cell) - Cell in row with open details
-
vaadin-grid-pro
::part(details-open-row-cell) - Row with open details
-
vaadin-grid-pro
::part(details-open-row)
Editors
- Text field editor
-
vaadin-grid-pro-edit-text-field
- Checkbox editor
-
vaadin-grid-pro-edit-checkbox
- Select editor
-
vaadin-grid-pro-edit-select
See Text Field, Select and Checkbox selectors for details on styling the editors