Table Tabela - Docs - Artefact

Table Tabela

Data Display

Detecção automática inteligente

Introdução

Um componente flexível para exibir dados 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>
      }
    />
  );
}

Construtor de páginas CMS

Este componente está disponível como um bloco table no Construtor de páginas (content/pages/*.json). Como os dados das linhas não podem ter uma estrutura CMS fixa, rows é um campo de string codificado em JSON, analisado no momento da renderização:

{
  "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
}

Propriedades

Prop	Type	Description
`columns`	`TableColumn[]`	Configuração para as colunas da tabela.
`rows`	`any[]`	Dados a exibir na tabela.

| footer | JSX.Element | Conteúdo de rodapé opcional. |

TableColumn

Property	Type	Description