--- title: Tabelas description: Organize dados em linhas e colunas. Oferece suporte a tabelas Markdown e componentes Table com ordenação, realce e mesclagem. --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. As tabelas organizam dados em linhas e colunas. O Jamdesk oferece duas abordagens: **tabelas Markdown** para tabelas rápidas e simples e **componentes Table** para recursos avançados, como realce e alinhamento. ## Uso ```mdx Name Type id string
``` ## Tabelas Markdown A maneira mais rápida de criar uma tabela. Use barras verticais (`|`) para separar colunas e hífens (`-`) para a linha de cabeçalho: ```markdown | Name | Type | Description | |------|------|-------------| | id | string | Unique identifier | | email | string | User email address | ``` | Nome | Tipo | Descrição | |------|------|-------------| | id | string | Identificador exclusivo | | email | string | Endereço de e-mail do usuário | As tabelas Markdown são ideais para dados de referência simples. O componente Table oferece mais controle quando você precisa de realce, alinhamento ou destaque visual. ## Componente Table Para ter mais controle, use os componentes ``, `` e ``: ```mdx
Name Type Description id string Unique identifier email string User email address
``` Nome Tipo Descrição id string Identificador exclusivo email string Endereço de e-mail do usuário
## Linhas listradas Adicione fundos alternados às linhas para melhorar a legibilidade: ```mdx Parameter Value timeout30sretries3backoffexponentialmaxDelay60s
``` Parâmetro Valor timeout30sretries3backoffexponencialmaxDelay60s
## Com bordas e compacto Adicione bordas entre as células e reduza o espaçamento interno: ```mdx A B C 1 2 3
``` A B C 1 2 3
## Realce de linhas Realce linhas inteiras para chamar a atenção: ```mdx Field Required Description api_key Yes Your API authentication key limit No Maximum results (default: 100)
``` Campo Obrigatório Descrição api_key Sim Sua chave de autenticação da API limit Não Máximo de resultados (padrão: 100)
Cores de realce disponíveis: `primary`, `success`, `warning`, `error`, `info` ## Realce de células Realce células individuais para indicar status: ```mdx Service Status API Operational Database Degraded Storage Outage
``` Serviço Status API Operacional Banco de dados Degradado Armazenamento Indisponível
## Alinhamento de células Controle o alinhamento do texto por célula: ```mdx Left Center Right Text Text $99.99
``` Esquerda Centro Direita Texto Texto $99.99
## Mesclagem de colunas e linhas Mescle células entre colunas ou linhas: ```mdx Category Item Price Fruits Apple $1.00 Banana $0.50 Subtotal $1.50
``` Categoria Item Preço Frutas Maçã $1.00 Banana $0.50 Subtotal $1.50
## Legenda visível Mostre uma legenda acessível acima da tabela: ```mdx Region Revenue North America $1.2M
``` Região Receita América do Norte $1.2M
## Colunas classificáveis Ative a ordenação interativa de colunas com a prop `sortable`. Os usuários podem clicar nos cabeçalhos das colunas para classificá-las: ```mdx Name Price Stock Widget A$29.99150Gadget B$49.9975Tool C$19.99200Device D$99.9925
``` Nome Preço Estoque Widget A$29.99150Gadget B$49.9975Tool C$19.99200Device D$99.9925
Clique uma vez no cabeçalho de uma coluna para ordenar em ordem crescente, novamente para ordem decrescente e uma terceira vez para redefinir. Os números são ordenados numericamente e o texto, alfabeticamente. A prop `sortable` funciona com outros recursos, como linhas listradas: ```mdx Team Wins Losses Eagles124Bears88Lions106
``` Equipe Vitórias Derrotas Eagles124Bears88Lions106
## Props ### Table | Prop | Tipo | Padrão | Descrição | |------|------|---------|-------------| | `striped` | boolean | false | Fundos alternados nas linhas | | `bordered` | boolean | false | Bordas entre todas as células | | `compact` | boolean | false | Espaçamento interno reduzido nas células | | `fullWidth` | boolean | true | A tabela ocupa toda a largura | | `caption` | string | - | Texto da legenda da tabela | | `captionVisible` | boolean | false | Mostra a legenda visualmente (padrão: apenas para leitores de tela) | | `stickyHeader` | boolean | false | Mantém o cabeçalho visível durante a rolagem | | `sortable` | boolean | false | Ativa a ordenação por clique nos cabeçalhos das colunas | ### Row | Prop | Tipo | Padrão | Descrição | |------|------|---------|-------------| | `header` | boolean | false | Renderiza como linha de cabeçalho | | `highlight` | boolean | false | Realça a linha | | `highlightColor` | string | primary | Cor: primary, success, warning, error, info | ### Cell | Prop | Tipo | Padrão | Descrição | |------|------|---------|-------------| | `align` | string | left | Alinhamento do texto: left, center, right | | `colSpan` | number | - | Número de colunas a abranger | | `rowSpan` | number | - | Número de linhas a abranger | | `highlight` | boolean | false | Realça a célula | | `highlightColor` | string | primary | Cor: primary, success, warning, error, info | | `header` | boolean | false | Força o estilo de cabeçalho | ## O que vem a seguir? Consulte todos os componentes disponíveis Aprenda a usar componentes em MDX