Table Tabla - Docs - Artefact

Table Tabla

Data Display

Detección automática inteligente

Introducción

Un componente flexible para mostrar datos tabulares.

Uso

Product Inventory
Name	Category	Price
Laptop	Electronics	$999.00
Coffee Mug	Home & Kitchen	$15.00

import { Table } from "../components/ui";

export default function MyPage() {
  const columns = [
    { header: "Name", key: "name" },
    { header: "Category", key: "category" },
    { header: "Price", key: "price", align: "end" },
  ];

  const rows = [
    { name: "Laptop", category: "Electronics", price: "$999.00" },
    { name: "Coffee Mug", category: "Home & Kitchen", price: "$15.00" },
  ];

  return (
    <Table
      variant="plain"
      caption="Product Inventory"
      columns={columns}
      rows={rows}
      footer={
        <tr>
          <td colSpan={2}>Total</td>
          <td style={{ textAlign: "end" }}>$1,014.00</td>
        </tr>
      }
    />
  );
}

Constructor de páginas CMS

Este componente está disponible como un bloque table en el Constructor de páginas (content/pages/*.json). Dado que los datos de las filas no pueden tener una estructura CMS fija, rows es un campo de cadena codificado en JSON, que se analiza al momento del renderizado:

{
  "type": "table",
  "columns": [
    { "header": "Room", "key": "room" },
    { "header": "Price", "key": "price", "align": "end" }
  ],
  "rows": "[{\"room\": \"Cabin Loft\", \"price\": \"$180/night\"}, {\"room\": \"Cabin Suite\", \"price\": \"$240/night\"}]",
  "variant": "plain",
  "striped": true
}

Propiedades

Prop	Type	Description
`columns`	`TableColumn[]`	Configuración para las columnas de la tabla.
`rows`	`any[]`	Datos a mostrar en la tabla.

| footer | JSX.Element | Contenido de pie opcional. |

TableColumn

Property	Type	Description