@vaadin/vaadin-lumo-styles/src/components/grid.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_grid {
  :host {
    display: flex;
    flex-direction: column;
    height: 400px;
    min-height: var(--_grid-min-height, 0);
    flex: 1 1 auto;
    align-self: stretch;
    position: relative;
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-m);
    line-height: var(--lumo-line-height-s);
    color: var(--lumo-body-text-color);
    background-color: var(--lumo-base-color);
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
    /* For internal use only */
    --_lumo-grid-border-color: var(--lumo-contrast-20pct);
    --_lumo-grid-secondary-border-color: var(--lumo-contrast-10pct);
    --_lumo-grid-border-width: 1px;
    --_lumo-grid-selected-row-color: var(--lumo-primary-color-10pct);
  }

  :host([hidden]) {
    display: none !important;
  }

  :host([disabled]) {
    pointer-events: none;
    opacity: 0.7;
  }

  #scroller {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transform: translateY(0);
    width: auto;
    height: auto;
    position: absolute;
    inset: 0;
  }

  :host([all-rows-visible]) {
    height: auto;
    align-self: flex-start;
    min-height: auto;
    flex-grow: 0;
    width: 100%;
  }

  :host([all-rows-visible]) #scroller {
    width: 100%;
    height: 100%;
    position: relative;
  }

  :host([all-rows-visible]) #items {
    min-height: 1px;
  }

  #table {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
    outline: none;
    /* Workaround for a Desktop Safari bug: new stacking context here prevents the scrollbar from getting hidden */
    z-index: 0;
  }

  #header,
  #footer {
    display: block;
    position: sticky;
    left: 0;
    overflow: visible;
    width: 100%;
    z-index: 1;
  }

  #header {
    top: 0;
  }

  th {
    text-align: inherit;
  }

  /* Safari doesn't work with "inherit" */
  [safari] th {
    text-align: initial;
  }

  #footer {
    bottom: 0;
  }

  #items {
    flex-grow: 1;
    flex-shrink: 0;
    display: block;
    position: sticky;
    width: 100%;
    left: 0;
    overflow: visible;
  }

  .row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    position: relative;
  }

  .body-row[loading] .body-cell ::slotted(vaadin-grid-cell-content) {
    visibility: hidden;
  }

  [column-rendering='lazy'] .body-cell:not([frozen]):not([frozen-to-end]) {
    transform: translateX(var(--_grid-lazy-columns-start));
  }

  #items .body-row {
    position: absolute;
  }

  #items .body-row:empty {
    height: 100%;
  }

  .cell:not(.details-cell) {
    flex-shrink: 0;
    flex-grow: 1;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    position: relative;
    align-items: center;
    padding: 0;
    white-space: nowrap;
  }

  .cell {
    outline: none;
    min-height: var(--lumo-size-m);
    background-color: var(--vaadin-grid-cell-background, var(--lumo-base-color));
    cursor: default;
    --_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding));
    --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-m);
  }

  .cell > [tabindex] {
    display: flex;
    align-items: inherit;
    outline: none;
    position: absolute;
    inset: 0;
  }

  /* Switch the focusButtonMode wrapping element to "position: static" temporarily
     when measuring real width of the cells in the auto-width columns. */
  #scroller[measuring-auto-width] .cell > [tabindex] {
    position: static;
  }

  .details-cell {
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
  }

  .cell ::slotted(vaadin-grid-cell-content) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: var(--vaadin-grid-cell-text-overflow, ellipsis);
    cursor: inherit;
    padding: var(--_cell-padding);
  }

  [hidden] {
    display: none !important;
  }

  [frozen],
  [frozen-to-end] {
    z-index: 2;
  }

  [no-scrollbars][safari] #table,
  [no-scrollbars][firefox] #table {
    overflow: hidden;
  }

  /* Empty state */

  #scroller:not([empty-state]) #emptystatebody,
  #scroller[empty-state] #items {
    display: none;
  }

  #emptystatebody {
    display: flex;
    position: sticky;
    inset: 0;
    flex: 1;
    overflow: hidden;
  }

  #emptystaterow {
    display: flex;
    flex: 1;
  }

  #emptystatecell {
    display: block;
    flex: 1;
    overflow: auto;
  }

  /* Reordering styles */
  :host([reordering]) .cell ::slotted(vaadin-grid-cell-content),
  :host([reordering]) .resize-handle,
  #scroller[no-content-pointer-events] .cell ::slotted(vaadin-grid-cell-content) {
    pointer-events: none;
  }

  .reorder-ghost {
    visibility: hidden;
    position: fixed;
    pointer-events: none;

    /* Prevent overflowing the grid in Firefox */
    top: 0;
    left: 0;
    opacity: 0.85;
    box-shadow: var(--lumo-box-shadow-s);
    /* TODO Use the same styles as for the cell element (reorder-ghost copies styles from the cell element) */
    padding: var(--lumo-space-s) var(--lumo-space-m) !important;
  }

  :host([reordering]) {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Resizing styles */

  .last-column-cell .resize-handle::before,
  .last-frozen-cell .resize-handle::before {
    width: 18px;
    transform: none;
    right: 0;
  }

  .frozen-to-end-cell .resize-handle {
    left: 0;
    right: auto;
  }

  .frozen-to-end-cell .resize-handle::before {
    left: 0;
    right: auto;
  }

  .first-frozen-to-end-cell .resize-handle::before {
    width: 18px;
    transform: none;
  }

  .first-frozen-to-end-cell {
    margin-inline-start: auto;
    border-left: var(--_lumo-grid-border-width) solid transparent;
  }

  /* Hide resize handle if scrolled to end */
  :host(:not([overflow~='end'])) .first-frozen-to-end-cell .resize-handle {
    display: none;
  }

  #scroller[column-resizing],
  #scroller[range-selecting] {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Sizer styles */
  #sizer {
    display: flex;
    position: absolute;
    visibility: hidden;
  }

  #sizer .details-cell {
    display: none !important;
  }

  #sizer .cell[hidden] {
    display: none !important;
  }

  #sizer .cell {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  #sizer .cell::before {
    content: '-';
  }

  #sizer .cell ::slotted(vaadin-grid-cell-content) {
    display: none !important;
  }

  /* RTL specific styles */

  :host([dir='rtl']) #items,
  :host([dir='rtl']) #header,
  :host([dir='rtl']) #footer {
    left: auto;
  }

  :host([dir='rtl']) .reorder-ghost {
    left: auto;
    right: 0;
  }

  :host([dir='rtl']) .resize-handle {
    left: 0;
    right: auto;
  }

  :host([dir='rtl']) .resize-handle::before {
    transform: translateX(50%);
  }

  :host([dir='rtl']) .last-column-cell .resize-handle::before,
  :host([dir='rtl']) .last-frozen-cell .resize-handle::before {
    left: 0;
    right: auto;
  }

  :host([dir='rtl']) .frozen-to-end-cell .resize-handle {
    right: 0;
    left: auto;
  }

  :host([dir='rtl']) .frozen-to-end-cell .resize-handle::before {
    right: 0;
    left: auto;
  }

  /* No (outer) border */

  :host(:not([theme~='no-border'])) {
    border: var(--_lumo-grid-border-width) solid var(--_lumo-grid-border-color);
  }

  /* Cell styles */

  /* Apply row borders by default and introduce the "no-row-borders" variant */
  :host(:not([theme~='no-row-borders'])) .cell:not(.details-cell) {
    border-top: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
  }

  /* Hide first body row top border */
  :host(:not([theme~='no-row-borders'])) .cell.first-row-cell:not(.details-cell) {
    border-top: 0;
    min-height: calc(var(--lumo-size-m) - var(--_lumo-grid-border-width));
  }

  /* Focus-ring */

  .row:focus,
  .focused-cell:focus {
    outline: none;
  }

  :host([navigating]) .row:focus::before,
  :host([navigating]) .focused-cell:focus::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
  }

  :host([navigating]) .row:focus::before {
    transform: translateX(var(--_grid-horizontal-scroll-position));
    z-index: 3;
  }

  /* Empty state */
  .empty-state {
    padding: var(--lumo-space-m);
    color: var(--lumo-secondary-text-color);
  }

  /* Drag and Drop styles */
  :host([dragover])::after {
    content: '';
    position: absolute;
    z-index: 100;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
  }

  .body-row[dragover] {
    z-index: 100 !important;
  }

  .body-row[dragover] .cell {
    overflow: visible;
  }

  .body-row[dragover] .cell::after {
    content: '';
    position: absolute;
    inset: 0;
    height: calc(var(--_lumo-grid-border-width) + 2px);
    pointer-events: none;
    background: var(--lumo-primary-color-50pct);
  }

  .body-row[dragover] .cell.last-frozen-cell::after {
    right: -1px;
  }

  :host([theme~='no-row-borders']) [dragover] .cell::after {
    height: 2px;
  }

  .body-row[dragover='below'] .cell::after {
    top: 100%;
    bottom: auto;
    margin-top: -1px;
  }

  :host([all-rows-visible]) .last-row[dragover='below'] .cell::after {
    height: 1px;
  }

  .row[dragover='above'] .cell::after {
    top: auto;
    bottom: 100%;
    margin-bottom: -1px;
  }

  .row[details-opened][dragover='below'] .cell:not(.details-cell)::after,
  .row[details-opened][dragover='above'] .details-cell::after {
    display: none;
  }

  .row[dragover][dragover='on-top'] .cell::after {
    height: 100%;
    opacity: 0.5;
  }

  .row.dragstart-row .cell {
    border: none !important;
    box-shadow: none !important;
  }

  .row.dragstart-row .dragstart-row-cell.last-column-cell {
    border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
  }

  .row.dragstart-row .dragstart-row-cell.first-column-cell {
    border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
  }

  #scroller .row[dragstart]:not([dragstart=''])::after {
    display: block;
    position: absolute;
    left: var(--_grid-drag-start-x);
    top: var(--_grid-drag-start-y);
    z-index: 100;
    content: attr(dragstart);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: calc(var(--lumo-space-xs) * 0.8);
    color: var(--lumo-error-contrast-color);
    background-color: var(--lumo-error-color);
    border-radius: var(--lumo-border-radius-m);
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-xxs);
    line-height: 1;
    font-weight: 500;
    text-transform: initial;
    letter-spacing: initial;
    min-width: calc(var(--lumo-size-s) * 0.7);
    text-align: center;
  }

  /* Headers and footers */

  .header-cell,
  .footer-cell,
  .reorder-ghost {
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
  }

  .footer-cell {
    font-weight: 400;
  }

  .header-row:only-child .header-cell {
    min-height: var(--lumo-size-xl);
  }

  /* Header borders */

  /* Hide first header row top border */
  :host(:not([theme~='no-row-borders'])) .header-cell.first-header-row-cell {
    border-top: 0;
  }

  /* Hide header row top border if previous row is hidden */
  .header-row[hidden] + .header-row .header-cell {
    border-top: 0;
  }

  .header-cell.last-header-row-cell {
    border-bottom: var(--_lumo-grid-border-width) solid transparent;
  }

  :host(:not([theme~='no-row-borders'])) .header-cell.last-header-row-cell {
    border-bottom-color: var(--_lumo-grid-secondary-border-color);
  }

  /* Overflow uses a stronger border color */
  :host([overflow~='top']) .header-cell.last-header-row-cell {
    border-bottom-color: var(--_lumo-grid-border-color);
  }

  /* Footer borders */

  .footer-cell.first-footer-row-cell {
    border-top: var(--_lumo-grid-border-width) solid transparent;
  }

  :host(:not([theme~='no-row-borders'])) .footer-cell.first-footer-row-cell {
    border-top-color: var(--_lumo-grid-secondary-border-color);
  }

  /* Overflow uses a stronger border color */
  :host([overflow~='bottom']) .footer-cell.first-footer-row-cell {
    border-top-color: var(--_lumo-grid-border-color);
  }

  /* Column reordering */

  :host([reordering]) .cell {
    background: linear-gradient(var(--lumo-shade-20pct), var(--lumo-shade-20pct)) var(--lumo-base-color);
  }

  :host([reordering]) .cell.reorder-allowed-cell {
    background: var(--lumo-base-color);
  }

  :host([reordering]) .cell.reorder-dragging-cell {
    background: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)) var(--lumo-base-color);
  }

  /* Column resizing */

  .resize-handle {
    --_resize-handle-width: 3px;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
    width: var(--_resize-handle-width);
    background-color: var(--lumo-primary-color-50pct);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .resize-handle::before {
    position: absolute;
    content: '';
    height: 100%;
    transform: translateX(calc(-50% + var(--_resize-handle-width) / 2));
    width: var(--lumo-size-s);
  }

  :host(:not([reordering])) *:not([column-resizing]) .cell:hover .resize-handle,
  .resize-handle:active {
    opacity: 1;
    transition-delay: 0.15s;
  }

  /* Column borders */

  :host([theme~='column-borders']) .cell:not(.last-column-cell, .details-cell) {
    border-right: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
  }

  /* Frozen columns */

  .last-frozen-cell {
    border-right: var(--_lumo-grid-border-width) solid transparent;
    overflow: hidden;
  }

  :host([overflow~='start']) .cell.last-frozen-cell:not(.details-cell) {
    border-right-color: var(--_lumo-grid-border-color);
  }

  :host([overflow~='end']) .cell.first-frozen-to-end-cell:not(.details-cell) {
    border-left-color: var(--_lumo-grid-border-color);
  }

  /* Row stripes */

  :host([theme~='row-stripes']) .even-row .body-cell,
  :host([theme~='row-stripes']) .even-row .details-cell {
    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
    background-repeat: repeat-x;
  }

  /* Selected row */

  /* Raise the selected rows above unselected rows (so that box-shadow can cover unselected rows) */
  :host(:not([reordering])) .row.selected-row {
    z-index: 1;
  }

  :host(:not([reordering])) .row.selected-row .selected-row-cell:not(.details-cell) {
    background-image: linear-gradient(var(--_lumo-grid-selected-row-color), var(--_lumo-grid-selected-row-color));
    background-repeat: repeat;
  }

  /* Cover the border of an unselected row */
  :host(:not([theme~='no-row-borders'])) .row.selected-row .selected-row-cell:not(.details-cell) {
    box-shadow: 0 var(--_lumo-grid-border-width) 0 0 var(--_lumo-grid-selected-row-color);
  }

  /* Compact */

  :host([theme~='compact']) .header-row:only-child .header-cell {
    min-height: var(--lumo-size-m);
  }

  :host([theme~='compact']) .cell {
    min-height: var(--lumo-size-s);
    --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-s);
  }

  :host([theme~='compact']) .cell.first-row-cell:not(.details-cell) {
    min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
  }

  :host([theme~='compact']) .empty-state {
    padding: var(--lumo-space-s);
  }

  /* Wrap cell contents */

  :host([theme~='wrap-cell-content']) .cell ::slotted(vaadin-grid-cell-content) {
    white-space: normal;
  }

  /* RTL specific styles */

  :host([dir='rtl']) .row.dragstart-row .cell.last-column-cell {
    border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
  }

  :host([dir='rtl']) .row.dragstart-row .cell.first-column-cell {
    border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
  }

  :host([dir='rtl'][theme~='column-borders']) .cell:not(.last-column-cell, .details-cell) {
    border-right: none;
    border-left: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
  }

  :host([dir='rtl']) .last-frozen-cell {
    border-right: none;
    border-left: var(--_lumo-grid-border-width) solid transparent;
  }

  :host([dir='rtl']) .first-frozen-to-end-cell {
    border-left: none;
    border-right: var(--_lumo-grid-border-width) solid transparent;
  }

  :host([dir='rtl'][overflow~='start']) .cell.last-frozen-cell:not(.details-cell) {
    border-left-color: var(--_lumo-grid-border-color);
  }

  :host([dir='rtl'][overflow~='end']) .cell.first-frozen-to-end-cell:not(.details-cell) {
    border-right-color: var(--_lumo-grid-border-color);
  }

  @media (forced-colors: active) {
    .selected-row .first-column-cell::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      border: 2px solid;
    }

    .focused-cell::before {
      outline: 2px solid !important;
      outline-offset: -1px;
    }
  }
}