← Catálogodata-display · stable

Tabelas

Dados tabulares com container de rolagem e cabeçalhos legíveis. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Tabelas quando a interface precisar de dados tabulares com container de rolagem e cabeçalhos legíveis.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias

WIDE · stable

Basic

Basic, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container">
                    <table class="sc-table">
                      <thead><tr><th>Nome</th><th>Status</th><th>Plano</th></tr></thead>
                      <tbody>
                        <tr><td>Ana</td><td>Ativo</td><td>Pro</td></tr>
                        <tr><td>João</td><td>Pendente</td><td>Free</td></tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-table

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Striped

Striped, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container">
                    <table class="sc-table sc-table-striped">
                      <thead><tr><th>Produto</th><th>Qtd</th><th>Total</th></tr></thead>
                      <tbody>
                        <tr><td>Assinatura</td><td>1</td><td>R$ 49</td></tr>
                        <tr><td>Créditos</td><td>5</td><td>R$ 25</td></tr>
                        <tr><td>Suporte</td><td>1</td><td>R$ 19</td></tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-tablesc-table-striped

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Bordered

Bordered, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container">
                    <table class="sc-table sc-table-bordered">
                      <thead><tr><th>Chave</th><th>Valor</th></tr></thead>
                      <tbody>
                        <tr><td>Theme</td><td>Glass</td></tr>
                        <tr><td>Mode</td><td>Dark</td></tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-tablesc-table-bordered

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Compact

Compact, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container">
                    <table class="sc-table sc-table-compact">
                      <thead><tr><th>ID</th><th>Evento</th><th>Hora</th></tr></thead>
                      <tbody>
                        <tr><td>#12</td><td>Login</td><td>09:12</td></tr>
                        <tr><td>#13</td><td>Upload</td><td>09:20</td></tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-tablesc-table-compact

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Hover

Hover, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container">
                    <table class="sc-table sc-table-hover">
                      <thead><tr><th>Arquivo</th><th>Tamanho</th><th>Data</th></tr></thead>
                      <tbody>
                        <tr><td>relatorio.pdf</td><td>2.1MB</td><td>Hoje</td></tr>
                        <tr><td>foto.png</td><td>640KB</td><td>Ontem</td></tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-tablesc-table-hover

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Responsivo

Responsivo, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container">
                    <table class="sc-table sc-table-striped sc-table-compact">
                      <thead><tr><th>Col A</th><th>Col B</th><th>Col C</th><th>Col D</th><th>Col E</th></tr></thead>
                      <tbody>
                        <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-tablesc-table-stripedsc-table-compact

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Badges + status (dashboard)

Badges + status (dashboard), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container">
                    <table class="sc-table sc-table-hover sc-table-striped">
                      <thead><tr><th>Ticket</th><th>Assunto</th><th>Prioridade</th><th>Status</th></tr></thead>
                      <tbody>
                        <tr><td>#1042</td><td>Erro no checkout</td><td><span class="sc-badge sc-badge-danger">Alta</span></td><td><span class="sc-badge sc-badge-warning">Em análise</span></td></tr>
                        <tr><td>#1043</td><td>Pedido duplicado</td><td><span class="sc-badge sc-badge-info">Média</span></td><td><span class="sc-badge sc-badge-success">Resolvido</span></td></tr>
                        <tr><td>#1044</td><td>Atualização de plano</td><td><span class="sc-badge sc-badge-secondary">Baixa</span></td><td><span class="sc-badge">Aberto</span></td></tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-tablesc-table-hoversc-table-stripedsc-badgesc-badge-dangersc-badge-warningsc-badge-infosc-badge-successsc-badge-secondary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Coluna de ações (botões)

Coluna de ações (botões), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container">
                    <table class="sc-table sc-table-bordered">
                      <thead><tr><th>Arquivo</th><th class="is-muted">Atualizado</th><th style="text-align:right;">Ações</th></tr></thead>
                      <tbody>
                        <tr>
                          <td>briefing.pdf</td><td class="is-muted">Hoje</td>
                          <td style="text-align:right;">
                            <div class="sc-table-actions">
                              <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Ver</button>
                              <button class="sc-btn sc-btn-glass sc-btn-sm" type="button">Baixar</button>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>logo.png</td><td class="is-muted">Ontem</td>
                          <td style="text-align:right;">
                            <div class="sc-table-actions">
                              <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Ver</button>
                              <button class="sc-btn sc-btn-danger sc-btn-sm" type="button">Excluir</button>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-tablesc-table-borderedsc-table-actionssc-btnsc-btn-outlinesc-btn-smsc-btn-glasssc-btn-danger

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Sticky header (scroll vertical)

Sticky header (scroll vertical), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container sc-table-container--y">
                    <table class="sc-table sc-table-sticky sc-table-compact">
                      <thead><tr><th>ID</th><th>Evento</th><th class="is-muted">Detalhe</th></tr></thead>
                      <tbody>
                        <tr><td>#01</td><td>Login</td><td class="is-muted">IP 10.0.0.1</td></tr>
                        <tr><td>#02</td><td>Upload</td><td class="is-muted">2 arquivos</td></tr>
                        <tr><td>#03</td><td>Export</td><td class="is-muted">CSV</td></tr>
                        <tr><td>#04</td><td>Login</td><td class="is-muted">IP 10.0.0.2</td></tr>
                        <tr><td>#05</td><td>Update</td><td class="is-muted">Perfil</td></tr>
                        <tr><td>#06</td><td>Login</td><td class="is-muted">IP 10.0.0.3</td></tr>
                        <tr><td>#07</td><td>Upload</td><td class="is-muted">imagem.png</td></tr>
                        <tr><td>#08</td><td>Export</td><td class="is-muted">PDF</td></tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-table-container--ysc-tablesc-table-stickysc-table-compact

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Selecionável (row select)

Selecionável (row select), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-table-container">
                    <table class="sc-table sc-table-selectable sc-table-hover">
                      <thead><tr><th>Nome</th><th>E-mail</th><th>Status</th></tr></thead>
                      <tbody>
                        <tr aria-selected="true"><td>Ana</td><td class="is-muted">ana@email.com</td><td><span class="sc-badge sc-badge-success">Ativo</span></td></tr>
                        <tr aria-selected="false"><td>João</td><td class="is-muted">joao@email.com</td><td><span class="sc-badge sc-badge-warning">Pendente</span></td></tr>
                        <tr aria-selected="false"><td>Maria</td><td class="is-muted">maria@email.com</td><td><span class="sc-badge sc-badge-secondary">Convidado</span></td></tr>
                      </tbody>
                    </table>
                  </div>

Classes, JavaScript e API

sc-table-containersc-tablesc-table-selectablesc-table-hoversc-badgesc-badge-successsc-badge-warningsc-badge-secondary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Tabelas

Componentes relacionados