hyperdx/packages/app/src/components/Table.module.scss

$compactVerticalPadding: 6px;
$normalVerticalPadding: 10px;
$comfortableVerticalPadding: 14px;
$horizontalPadding: 12px;

.tableWrapper {
  table {
    width: 100%;
    table-layout: fixed;

    th,
    td {
      &:first-child {
        padding-left: $horizontalPadding * 2;
      }

      &:last-child {
        padding-right: $horizontalPadding * 2;
      }
    }

    tr {
      border-bottom: 1px solid var(--color-border);
    }

    tbody {
      tr:last-child {
        border-bottom: none;
      }
    }

    th {
      color: var(--color-text-muted);
      text-transform: uppercase;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 1px;
      padding: $normalVerticalPadding $horizontalPadding;
      text-align: left;
    }

    td {
      font-size: 12px;
      padding: $normalVerticalPadding $horizontalPadding;
      word-wrap: break-word;
      word-break: break-all;
      vertical-align: top;
    }
  }

  // Borderless
  &.tableBorderless {
    padding: 4px 0;

    tr {
      border-bottom: none;
    }
  }

  // Density
  &.tableDensityZero {
    th,
    td {
      padding: 0;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }
  }

  &.tableDensityCompact {
    th,
    td {
      padding: $compactVerticalPadding $horizontalPadding;
    }
  }

  &.tableDensityComfortable {
    th,
    td {
      padding: $comfortableVerticalPadding $horizontalPadding;
    }
  }

  // Interactive
  &.tableInteractive {
    tr:hover td {
      cursor: pointer;
      background-color: #ffffff08;
    }

    tr:active td {
      background-color: #00000050;
      opacity: 0.8;
    }
  }
}

.emptyMessage {
  color: var(--color-text);
  text-align: center;
  padding: 10px;
}

.tableCellButton {
  display: flex;
  gap: 4px;
  border-radius: 4px;
  background-color: var(--color-bg-field);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-align: center;
  font-size: 11px;

  &:hover {
    background-color: var(--color-bg-field-highlighted);
    border-color: var(--color-border);
  }

  &:active {
    background-color: var(--color-bg-field-highlighted);
    border-color: var(--color-border);
  }
}

.cursorColResize {
  cursor: col-resize;
  display: flex;
  align-items: center;
}