Data Table

Contrato del layout

Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.

Slots

{{section_id}}{{header_title}}{{header_description}}{{header_cta1_href}}{{header_cta1}}{{header_cta2_href}}{{header_cta2}}{{row1_avatar}}{{row1_avatar_alt}}{{row1_name}}{{row1_email}}{{row1_company}}{{row1_prod1}}{{row1_prod2}}{{row1_prod3}}{{row1_prod4}}{{row1_team}}{{row1_date}}{{row1_link}}{{row2_avatar}}{{row2_avatar_alt}}{{row2_name}}{{row2_email}}{{row2_company}}{{row2_prod1}}{{row2_prod2}}{{row2_prod3}}{{row2_prod4}}{{row2_team}}{{row2_date}}{{row2_link}}{{row3_avatar}}{{row3_avatar_alt}}{{row3_name}}{{row3_email}}{{row3_company}}{{row3_prod1}}{{row3_prod2}}{{row3_prod3}}{{row3_prod4}}{{row3_team}}{{row3_date}}{{row3_link}}{{row4_avatar}}{{row4_avatar_alt}}{{row4_name}}{{row4_email}}{{row4_company}}{{row4_prod1}}{{row4_prod2}}{{row4_prod3}}{{row4_prod4}}{{row4_team}}{{row4_date}}{{row4_link}}{{row5_avatar}}{{row5_avatar_alt}}{{row5_name}}{{row5_email}}{{row5_company}}{{row5_prod1}}{{row5_prod2}}{{row5_prod3}}{{row5_prod4}}{{row5_team}}{{row5_date}}{{row5_link}}

Componentes requeridos

buttontypographyimagelink-button

Anatomía CSS

<div class="layoutDataTable">

</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.

/* Layout: data-table — structure only, pure DS tokens */
.l-data-table {
  padding: 80px 32px;
}

.l-data-table__container {
  position: relative;
}

.l-data-table__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #e5e5e5;
  border-bottom: 0;
  padding: 24px;
}

@media (min-width: 640px) {
  .l-data-table__header {
    flex-direction: row;
    align-items: center;
  }
}

.l-data-table__header-content {
  /* text content */
}

.l-data-table__header-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .l-data-table__header-title {
    font-size: 20px;
  }
}

.l-data-table__header-description {
  font-size: 16px;
  color: #525252;
}

.l-data-table__header-actions {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .l-data-table__header-actions {
    margin-top: 0;
  }
}

.l-data-table__table-wrapper {
  position: relative;
  width: 100%;
  overflow: auto;
}

.l-data-table__table {
  width: 100%;
  table-layout: fixed;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  font-size: 12.8px;
  caption-side: bottom;
}

.l-data-table__th {
  height: 3rem;
  padding: 16px 24px;
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 600;
  color: #0a0a0a;
  text-decoration: underline;
  border-bottom: 1px solid #e5e5e5;
}

.l-data-table__th--name {
  width: 350px;
}

@media (min-width: 1440px) {
  .l-data-table__th--name {
    width: 478px;
  }
}

.l-data-table__th--company,
.l-data-table__th--team {
  width: 192px;
}

.l-data-table__th--products {
  width: 192px;
}

.l-data-table__th--date {
  width: 128px;
}

.l-data-table__th--action {
  width: 96px;
  text-align: center;
}

.l-data-table__td {
  height: 5rem;
  padding: 16px 24px;
  vertical-align: middle;
  font-size: 16px;
  border-bottom: 1px solid #e5e5e5;
}

.l-data-table__td--name {
  font-weight: 500;
}

.l-data-table__name-cell {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 12px;
}

.l-data-table__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  object-fit: cover;
}

.l-data-table__name-info {
  width: 100%;
  max-width: 28rem;
}

.l-data-table__name {
  /* inherits */
}

.l-data-table__email {
  font-size: 12.8px;
  font-weight: var(--font-weight-normal);
  text-decoration: underline;
  color: #0a0a0a;
}

.l-data-table__td--company,
.l-data-table__td--team,
.l-data-table__td--date {
  min-width: 8rem;
  max-width: 12rem;
}

.l-data-table__td--date {
  max-width: 6rem;
}

.l-data-table__td--action {
  text-align: center;
  font-weight: 600;
  padding-block: 24px;
}

.l-data-table__products {
  position: relative;
  display: flex;
  padding-left: 0.5rem;
}

.l-data-table__product-img {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 2px solid #e5e5e5;
  object-fit: cover;
  margin-left: -0.5rem;
}

.l-data-table__product-img:first-child {
  margin-left: 0;
}