@harvest-profit/npk/dist/Table/Table.module.css

NPK UI Design System

.TableMetrics {
  color: var(--color-neutral-50);
  font-size: var(--size-12);
  margin-top: 12px;
  margin-bottom: 6px;
  display: block;
}

.Table {
  --table-cell-padding-x: 0.3rem;
  --table-cell-padding-y: 0.35rem;
  --table-header-padding: 0.3rem;
  --table-header-height: 2.1rem;
  --internal-table-border-color: var(--table-border-color, var(--control-border-color));
  --internal-table-bg-color: var(--table-bg-color, var(--body-bg-color));
  --table-zebra-bg-color: lch(from var(--internal-table-bg-color) calc(l - var(--table-zebra-brightness-adjustment, 2)) c h);

  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 0rem;
  font-size: 15px;
}

.Table[data-layout="fixed"] {
    table-layout: fixed;
  }

.Table  > tbody > tr:nth-child(even) > * {
    --table-row-color: var(--table-zebra-bg-color, var(--internal-table-bg-color));
  }

/* treegrids are clickable tables that may or may not expand */

/* level=1 (assumed if not specified), always clickable */

/* expandable, always clickable */

:is(:is(.Table[aria-role="treegrid"] > tbody > tr):not([aria-disabled="true"]):not([aria-level]),[aria-level="1"]:is(.Table[aria-role="treegrid"] > tbody > tr):not([aria-disabled="true"]),[aria-expanded]:is(.Table[aria-role="treegrid"] > tbody > tr):not([aria-disabled="true"])):hover > td {
          cursor: pointer;
          transition: background-color 200ms ease-in-out;
          --table-row-color: var(--control-bg-color--hover);
        }

:is(:is(.Table[aria-role="treegrid"] > tbody > tr):not([aria-disabled="true"]):not([aria-level]),[aria-level="1"]:is(.Table[aria-role="treegrid"] > tbody > tr):not([aria-disabled="true"]),[aria-expanded]:is(.Table[aria-role="treegrid"] > tbody > tr):not([aria-disabled="true"])):active > td {
          cursor: pointer;
          transition: background-color 200ms ease-in-out;
          --table-row-color: var(--control-bg-color--active);
        }

[aria-expanded="true"]:is(.Table[aria-role="treegrid"] > tbody > tr) > td {
      --table-row-color: var(--internal-table-bg-color);
      --table-border: none;
    }

[aria-expanded="true"]:is(.Table[aria-role="treegrid"] > tbody > tr) + tr > td {
      --table-row-color: var(--internal-table-bg-color);
    }

.Table  > * > tr > :is(td,th) {
    background-color: var(--table-row-color, var(--internal-table-bg-color));
  }

.Table[data-truncate="true"] > * > tr > :is(td,th),.Table  > * > tr > [data-truncate="true"]:is(td,th) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.Table  > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--color-neutral-90);
    padding: var(--table-header-padding);
    font-weight: bold;
    font-size: var(--size-14);
  }

:is(.Table > thead > tr > th) small {
      font-size: inherit;
      font-weight: normal;
    }

:is(.Table > thead > tr > th):first-child {
      padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

:is(.Table > thead > tr > th):last-child {
      padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

.Table  > tbody > tr > th[scope="row"] {
    background: var(--control-bg-color--disabled);
    font-size: var(--size-12);
    color: var(--control-fg-color);
    padding: var(--table-header-padding) var(--table-cell-ends-padding-x, var(--table-cell-padding-x));

    position: sticky;
    top: calc(var(--table-header-height) + 0rem);
    top: calc(var(--table-header-height) + var(--sticky-top, 0rem));
  }

.Table  > tbody > tr > * {
    vertical-align: middle;
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: var(--table-border, 1px solid var(--color-neutral-90));
  }

:is(.Table > tbody > tr > *):first-child {
      padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

:is(.Table > tbody > tr > *):last-child {
      padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

.Table  > tbody:last-child > tr:last-child {
    --table-border: none;
  }

.Table  > thead > tr > th {
    background: var(--internal-table-bg-color);
    position: sticky;
    top: 0;
    top: var(--sticky-top, 0);
    height: var(--table-header-height);
  }

.Table [data-type="numeric"],.Table [data-type="number"] {
    text-align: right;
  }

.Table [data-type="actions"] {
    text-align: right;
  }

:is(.Table [data-type="actions"]) [data-invisible="true"] {
      margin-right: calc(var(--table-cell-ends-padding-x, var(--table-cell-padding-x)) / 2 * -1);
    }