Tablas

Las tablas organizan datos en filas y columnas. Jamdesk admite dos enfoques: tablas markdown para tablas simples y rápidas y componentes Table para funciones avanzadas como resaltado y alineación.

Uso

<Table>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Type</Cell>
  </Row>
  <Row>
    <Cell>id</Cell>
    <Cell>string</Cell>
  </Row>
</Table>

Tablas Markdown

La forma más rápida de crear una tabla. Usa barras verticales (|) para separar columnas y guiones (-) para la fila de encabezado:

| Name | Type | Description |
|------|------|-------------|
| id | string | Unique identifier |
| email | string | User email address |

Componente Table

Para mayor control, usa los componentes <Table>, <Row> y <Cell>:

<Table>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Type</Cell>
    <Cell>Description</Cell>
  </Row>
  <Row>
    <Cell>id</Cell>
    <Cell>string</Cell>
    <Cell>Unique identifier</Cell>
  </Row>
  <Row>
    <Cell>email</Cell>
    <Cell>string</Cell>
    <Cell>User email address</Cell>
  </Row>
</Table>

Filas Alternadas

Agrega fondos de fila alternos para mejorar la legibilidad:

<Table striped>
  <Row header>
    <Cell>Parameter</Cell>
    <Cell>Value</Cell>
  </Row>
  <Row><Cell>timeout</Cell><Cell>30s</Cell></Row>
  <Row><Cell>retries</Cell><Cell>3</Cell></Row>
  <Row><Cell>backoff</Cell><Cell>exponential</Cell></Row>
  <Row><Cell>maxDelay</Cell><Cell>60s</Cell></Row>
</Table>

Con Bordes y Compacta

Agrega bordes entre celdas y reduce el relleno:

<Table bordered compact>
  <Row header>
    <Cell>A</Cell>
    <Cell>B</Cell>
    <Cell>C</Cell>
  </Row>
  <Row>
    <Cell>1</Cell>
    <Cell>2</Cell>
    <Cell>3</Cell>
  </Row>
</Table>

Resaltado de Filas

Resalta filas completas para llamar la atención:

<Table>
  <Row header>
    <Cell>Field</Cell>
    <Cell>Required</Cell>
    <Cell>Description</Cell>
  </Row>
  <Row highlight highlightColor="warning">
    <Cell>api_key</Cell>
    <Cell>Yes</Cell>
    <Cell>Your API authentication key</Cell>
  </Row>
  <Row>
    <Cell>limit</Cell>
    <Cell>No</Cell>
    <Cell>Maximum results (default: 100)</Cell>
  </Row>
</Table>

Colores de resaltado disponibles: primary, success, warning, error, info

Resaltado de Celdas

Resalta celdas individuales para indicadores de estado:

<Table>
  <Row header>
    <Cell>Service</Cell>
    <Cell>Status</Cell>
  </Row>
  <Row>
    <Cell>API</Cell>
    <Cell highlight highlightColor="success">Operational</Cell>
  </Row>
  <Row>
    <Cell>Database</Cell>
    <Cell highlight highlightColor="warning">Degraded</Cell>
  </Row>
  <Row>
    <Cell>Storage</Cell>
    <Cell highlight highlightColor="error">Outage</Cell>
  </Row>
</Table>

Alineación de Celdas

Controla la alineación del texto por celda:

<Table>
  <Row header>
    <Cell align="left">Left</Cell>
    <Cell align="center">Center</Cell>
    <Cell align="right">Right</Cell>
  </Row>
  <Row>
    <Cell align="left">Text</Cell>
    <Cell align="center">Text</Cell>
    <Cell align="right">$99.99</Cell>
  </Row>
</Table>

Combinación de Columnas y Filas

Fusiona celdas a lo largo de columnas o filas:

<Table bordered>
  <Row header>
    <Cell>Category</Cell>
    <Cell>Item</Cell>
    <Cell>Price</Cell>
  </Row>
  <Row>
    <Cell rowSpan={2}>Fruits</Cell>
    <Cell>Apple</Cell>
    <Cell>$1.00</Cell>
  </Row>
  <Row>
    <Cell>Banana</Cell>
    <Cell>$0.50</Cell>
  </Row>
  <Row>
    <Cell colSpan={2}>Subtotal</Cell>
    <Cell>$1.50</Cell>
  </Row>
</Table>

Título Visible

Muestra un título de tabla accesible encima de la tabla:

<Table caption="Monthly Revenue by Region" captionVisible>
  <Row header>
    <Cell>Region</Cell>
    <Cell align="right">Revenue</Cell>
  </Row>
  <Row>
    <Cell>North America</Cell>
    <Cell align="right">$1.2M</Cell>
  </Row>
</Table>

Columnas Ordenables

Habilita la ordenación interactiva de columnas con la prop sortable. Los usuarios pueden hacer clic en los encabezados de columna para ordenar:

<Table sortable>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Price</Cell>
    <Cell>Stock</Cell>
  </Row>
  <Row><Cell>Widget A</Cell><Cell>$29.99</Cell><Cell>150</Cell></Row>
  <Row><Cell>Gadget B</Cell><Cell>$49.99</Cell><Cell>75</Cell></Row>
  <Row><Cell>Tool C</Cell><Cell>$19.99</Cell><Cell>200</Cell></Row>
  <Row><Cell>Device D</Cell><Cell>$99.99</Cell><Cell>25</Cell></Row>
</Table>

La ordenación funciona con otras funciones como las filas alternadas:

<Table sortable striped>
  <Row header>
    <Cell>Team</Cell>
    <Cell>Wins</Cell>
    <Cell>Losses</Cell>
  </Row>
  <Row><Cell>Eagles</Cell><Cell>12</Cell><Cell>4</Cell></Row>
  <Row><Cell>Bears</Cell><Cell>8</Cell><Cell>8</Cell></Row>
  <Row><Cell>Lions</Cell><Cell>10</Cell><Cell>6</Cell></Row>
</Table>

Props

Table

Row

Cell

¿Qué sigue?