Saltar al contenido principal

Table

Paquete: @tiendana/web-foundation

Tablas con estilo consistente del design system para visualización de datos estructurados.

Características​

✅ Estilo consistente - Usa tokens del design system
✅ Bordes optimizados - Separación clara entre filas
✅ Encabezados destacados - Fondo y tipografía diferenciada
✅ Estados de celda - Focus, invalid, dirty para formularios
✅ Alineación flexible - Clase .center para centrado
✅ Hover de fila - Resalta la fila bajo el cursor
✅ Dark mode - Encabezados y hover se adaptan con body.scheme-dark
✅ Integración con tdn-form-element - Los campos dentro de una celda se muestran sin borde propio

Demos Visuales​

Tabla Básica​

Cargando demo...
Ver código

Con Estados de Celda​

Cargando demo...
Ver código

Estructura HTML​

<!-- Tabla básica -->
<table class="table">
  <thead>
    <tr>
      <th>Columna 1</th>
      <th>Columna 2</th>
      <th class="center">Centrado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
      <td class="center">Dato 3</td>
    </tr>
  </tbody>
</table>

Con Formularios​

<table class="table">
  <thead>
    <tr>
      <th>Campo</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="has-form-fields">
        <input type="text" />
      </td>
      <td class="has-form-fields focus">
        <input type="number" />
      </td>
    </tr>
  </tbody>
</table>

Props / API​

CSS Classes - Tabla Base​

ClaseDescripción
table.tableAplica estilo base. El selector exige el elemento <table>: .table sobre otro elemento no tiene efecto

CSS Classes - Alineación​

ClaseElementoDescripción
.center<th> o <td>Centra el texto horizontalmente (text-align: center)

CSS Classes - Estados de Celda (para formularios)​

ClaseElementoDescripción
.has-form-fields<td>Marca la celda como contenedor posicionado de campos de formulario (position: relative)
.focus<td>Estado enfocado (anillo interior --color-natura de --border-width-medium)
.dirty<td>Campo modificado (punto --color-lavender en la esquina superior derecha)
.invalid<td>Campo inválido (anillo interior --color-error)

Características Técnicas​

Estilos Base​

  • Bordes sutiles entre filas
  • Padding consistente en celdas
  • Encabezados con fondo diferenciado
  • Tipografía optimizada

Estados Interactivos​

  • Focus: Borde verde cuando campo está enfocado
  • Dirty: Indicador visual de campo modificado
  • Invalid: Borde rojo para errores de validación
  • Diseñado para tablas editables con formularios

Campos tdn-form-element en celdas​

  • Dentro de un <td>, un .tdn-form-element pierde borde, radio y fondo propios y ocupa --spacing-xl de alto mínimo
  • Con .tdn-form-element--focus el campo (input, .input-group o .tdn-select) toma fondo --color-gray-100 (--color-gray-200 en dark mode) en lugar de la sombra de foco
  • Ver form-element para el resto de clases de estado

Ver También​