openmct/src/styles/_table.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2024, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
/******************************************************** TABLE */
table {
  $minW: 50px;
  width: 100%;

  thead {
    th {
      background: $colorTabHeaderBg;

      + th {
        border-left: 1px solid $colorTabHeaderBorder;
      }
    }
  }

  tbody {
    tr + tr {
      border-top: 1px solid $colorTabBorder;
    }
  }

  th,
  td {
    white-space: nowrap;
    min-width: $minW;
    padding: $tabularTdPadTB $tabularTdPadLR;
  }

  td {
    vertical-align: top;
  }
}

.is-editing {
  td.is-selectable {
    &:hover {
      background: rgba($editUIColorBg, 0.1);
      box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
    }

    &[s-selected] {
      background: $editUIColorBg !important;
      border: 1px solid $editUIColorFg !important;
      color: $editUIColorFg !important;
      box-shadow: $editFrameSelectedShdw;
      z-index: 2;
    }
  }
}

/******************************************************** C-TABLE */
div.c-table {
  // When c-table is used as a wrapper element in more complex table views
  height: 100%;
}

.c-table-wrapper {
  // Wraps .c-control-bar and .c-table
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // Using absolute here because sizing table can't calc width properly if padding is used
  $p: $mainViewPad;
  position: absolute;
  top: $p;
  right: $p;
  bottom: $p;
  left: $p;

  > .c-table {
    height: auto;
    flex: 1 1 auto;
  }

  &.is-stale {
    @include isStaleHolder();
  }

  .--width-less-than-600 & {
    &:not(.is-paused) {
      .c-table-control-bar {
        display: none;
      }
    }
    .c-table-control-bar {
      .c-icon-button,
      .c-click-icon,
      .c-button {
        &__label {
          display: none;
        }
      }
    }
  }
}

.c-table-control-bar {
  display: flex;
  flex: 0 0 auto;
  //margin-bottom: $interiorMarginSm; // This approach to allow margin to go away when control bar is hidden
  padding: $interiorMarginSm 0;

  > * + * {
    margin-left: $interiorMarginSm;
  }
}

.c-table {
  // Can be used by any type of table, scrolling, LAD, etc.
  $min-w: 50px;

  width: 100%;

  &__headers-w {
    flex: 0 0 auto;
  }

  /******************************* ELEMENTS */
  thead tr,
  &.c-table__headers {
    background: $colorTabHeaderBg;

    th {
      &:not(:first-child) {
        border-left: 1px solid $colorTabHeaderBorder;
      }
    }
  }

  tbody,
  &__body {
    tr:not(.c-table__group-header) + tr:not(.c-table__group-header) {
      border-top: 1px solid $colorTabBorder;
    }
    transition: $transOut;
  }

  &__selectable-row {
    cursor: pointer;
    &:hover {
      background: $colorListItemBgHov;
      filter: $filterHov;
      transition: $transIn;
    }
  }

  &__group-header {
    // tr element found in LAD Table Sets
    border-top: 1px solid $colorTabHeaderBorder;
    background: $colorTabGroupHeaderBg;
    td {
      color: $colorTabGroupHeaderFg;
    }
  }

  &--sortable {
    .is-sorting {
      &:after {
        color: $colorIconAlias;
        content: $glyph-icon-arrow-tall-up;
        font-family: symbolsfont;
        font-size: 8px;
        display: inline-block;
        margin-left: $interiorMarginSm;
      }
      &.desc:after {
        content: $glyph-icon-arrow-tall-down;
      }
    }
    .is-sortable {
      cursor: pointer;
    }
  }
}

.c-lad-table-wrapper {
  width: 100%;
  height: 100%;
  padding: $mainViewPad;

  &.is-stale {
    @include isStaleHolder();
  }
}

.c-lad-table {
  &.fixed-layout {
    table-layout: fixed;
    td {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  th,
  td {
    width: 33%; // Needed to prevent size jumping as values dynamically update
    overflow: hidden;
    text-overflow: ellipsis;
  }

  tbody tr {
    &:hover {
      background: $colorItemTreeHoverBg;
    }
  }

  td {
    user-select: none; // Table supports context-click to display Actions menu, don't allow text selection.

    &.is-stale {
      @include isStaleElement();
    }
  }
}

/************************************** TABLE AND SUMMARY VIEWS */
// Displays summary values above a table.

.c-table-and-summary {
  height: 100%;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;

  > * + * {
    margin-top: $interiorMargin;
  }

  &__summary {
    display: flex;
    justify-items: stretch;

    > * + * {
      margin-left: 1px;
    }
  }

  &__summary-item {
    background: $colorSummaryBg;
    color: $colorSummaryFg;
    flex: 1 1 auto;
    padding: $interiorMargin $interiorMarginLg;

    em {
      font-weight: bold;
      color: $colorSummaryFgEm;
    }
  }
}