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. See the Styling documentation for more details on how to style components.
- 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