AppTable

Organismos

Abrir no Storybook

Contêiner semântico para tabelas de dados compostas com as peças AppTable*.

Quando usar: comparar dados tabulares com cabeçalhos e células em colunas estáveis.

Quando não usar: apresentar poucos pares de rótulo e valor ou conteúdo que vira cartão no celular.

Importar

import { AppTable } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppTable.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppTable.css';

Exemplos

Default

Exemplo: AppTable, Default

const Default = () => (
  <AppTable
    caption="Utilização"
    footer={<AppPagination page={1} pageCount={10} onPageChange={() => {}} />}
  >
    <AppTableHead>
      <AppTableRow>
        <AppTableHeaderCell>Nome</AppTableHeaderCell>
        <AppTableHeaderCell>Status</AppTableHeaderCell>
        <AppTableHeaderCell>Cargo</AppTableHeaderCell>
        <AppTableHeaderCell>E-mail</AppTableHeaderCell>
        <AppTableHeaderCell>Equipes</AppTableHeaderCell>
        <AppTableHeaderCell align="end">Ações</AppTableHeaderCell>
      </AppTableRow>
    </AppTableHead>
    <AppTableBody>
      <AppTableRow>
        <AppTableCell><AppAvatarLabel size="sm" name="João Carlos" supportingText="joao@idplugger.com.br" src={avatars[0]} /></AppTableCell>
        <AppTableCell><AppBadge tone="success">Ativo</AppBadge></AppTableCell>
        <AppTableCell>Designer de produto</AppTableCell>
        <AppTableCell>joao@idplugger.com.br</AppTableCell>
        <AppTableCell><div style={{ display: 'flex', gap: 4 }}><AppBadge tone="primary">Produto</AppBadge><AppBadge tone="info">Design</AppBadge><AppBadge>+4</AppBadge></div></AppTableCell>
        <AppTableCell align="end"><ActionButtons /></AppTableCell>
      </AppTableRow>
      <AppTableRow>
        <AppTableCell><AppAvatarLabel size="sm" name="Ana Souza" supportingText="ana@idplugger.com.br" src={avatars[1]} /></AppTableCell>
        <AppTableCell><AppBadge tone="success">Ativo</AppBadge></AppTableCell>
        <AppTableCell>Gerente comercial</AppTableCell>
        <AppTableCell>ana@idplugger.com.br</AppTableCell>
        <AppTableCell><div style={{ display: 'flex', gap: 4 }}><AppBadge tone="primary">Vendas</AppBadge><AppBadge>+2</AppBadge></div></AppTableCell>
        <AppTableCell align="end"><ActionButtons /></AppTableCell>
      </AppTableRow>
    </AppTableBody>
  </AppTable>
);

Ordenacao

Exemplo: AppTable, Ordenacao

const Ordenacao = () => <OrdenacaoExemplo />;

Selecao

Exemplo: AppTable, Selecao

const Selecao = () => <SelecaoExemplo />;

Estilos De Celula

Exemplo: AppTable, Estilos De Celula

const EstilosDeCelula = () => (
  <AppTable caption="Estilos de célula">
    <AppTableHead><AppTableRow><AppTableHeaderCell>Estilo</AppTableHeaderCell><AppTableHeaderCell>Exemplo</AppTableHeaderCell></AppTableRow></AppTableHead>
    <AppTableBody>
      <AppTableRow><AppTableCell>Texto</AppTableCell><AppTableCell>Conteúdo regular</AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Texto destacado</AppTableCell><AppTableCell supportingText="Detalhe complementar">Conteúdo principal</AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Badge</AppTableCell><AppTableCell><AppBadge tone="success">Ativo</AppBadge></AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Badges</AppTableCell><AppTableCell><div style={{ display: 'flex', gap: 4 }}><AppBadge tone="primary">Produto</AppBadge><AppBadge tone="info">Design</AppBadge><AppBadge>+4</AppBadge></div></AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Grupo de avatares</AppTableCell><AppTableCell><AppAvatarGroup size="xs" max={3}><AppAvatar name="Ana" src={avatars[0]} /><AppAvatar name="Bruna" src={avatars[1]} /><AppAvatar name="João" src={avatars[2]} /><AppAvatar name="Lia" /></AppAvatarGroup></AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Forma de pagamento</AppTableCell><AppTableCell supportingText="Validade 06/2024"><div style={{ display: 'flex', alignItems: 'center', gap: 12 }}><AppPaymentIcon method="visa" size="md" />Visa final 1234</div></AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Tendência</AppTableCell><AppTableCell><div style={{ display: 'flex', alignItems: 'center', gap: 12 }}><strong>R$ 1.800</strong><AppBadge tone="success" icon={<IconArrowUpward />}>20%</AppBadge><AppBadge tone="danger" icon={<IconArrowDownward />}>20%</AppBadge></div></AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Progresso</AppTableCell><AppTableCell><div style={{ display: 'grid', gap: 12 }}><AppProgress value={60} aria-label="Progresso de receita" showValue /><AppProgress value={45} max={70} label="45/70 avaliações" icon={<IconCheckCircle />} tone="success" size="sm" /><AppProgress value={5} max={10} label="05/10" icon={<IconCheckCircle />} tone="success" showValue /></div></AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Arquivo</AppTableCell><AppTableCell supportingText="200 KB"><div style={{ display: 'flex', alignItems: 'center', gap: 12 }}><AppFeaturedIcon icon={<IconFilePresent />} />Regulamento.pdf</div></AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Toggle</AppTableCell><AppTableCell><AppToggle size="sm" aria-label="Notificações ativas" defaultChecked /></AppTableCell></AppTableRow>
      <AppTableRow><AppTableCell>Avaliação</AppTableCell><AppTableCell><AppRating value={4.5} /></AppTableCell></AppTableRow>
    </AppTableBody>
  </AppTable>
);

Vazio

Exemplo: AppTable, Vazio

const Vazio = () => (
  <AppTable caption="Pessoas">
    <AppTableHead><AppTableRow><AppTableHeaderCell>Nome</AppTableHeaderCell></AppTableRow></AppTableHead>
    <AppTableBody><AppTableEmpty colSpan={1}>Nenhuma pessoa encontrada.</AppTableEmpty></AppTableBody>
  </AppTable>
);

Carregando

Exemplo: AppTable, Carregando

const Carregando = () => (
  <AppTable caption="Pessoas" loading>
    <AppTableHead><AppTableRow><AppTableHeaderCell>Nome</AppTableHeaderCell></AppTableRow></AppTableHead>
    <AppTableBody><AppTableRow><AppTableCell>Conteúdo substituído pelo carregamento</AppTableCell></AppTableRow></AppTableBody>
  </AppTable>
);

Celular

Exemplo: AppTable, Celular

const Celular = () => (
  <AppTable caption="Pessoas no celular" stickyFirstColumn>
    <AppTableHead><AppTableRow><AppTableHeaderCell>Nome</AppTableHeaderCell><AppTableHeaderCell>Cargo</AppTableHeaderCell><AppTableHeaderCell>E-mail</AppTableHeaderCell></AppTableRow></AppTableHead>
    <AppTableBody><AppTableRow><AppTableCell><AppAvatarLabel size="sm" name="João Carlos" supportingText="joao@idplugger.com.br" src={avatars[0]} /></AppTableCell><AppTableCell>Designer de produto</AppTableCell><AppTableCell>joao@idplugger.com.br</AppTableCell></AppTableRow></AppTableBody>
  </AppTable>
);

Props

Prop	Tipo	Padrão	Descrição
children*	ReactNode	—	Cabeçalho e corpo da tabela.
caption	string	—	Descrição curta da tabela, exibida apenas para tecnologias assistivas. Também nomeia a região rolável.
footer	ReactNode	—	Conteúdo exibido abaixo da área rolável, como uma paginação.
loading	boolean	false	Substitui o corpo por um indicador de carregamento e marca a tabela como ocupada.
stickyFirstColumn	boolean	false	Mantém a primeira coluna visível durante a rolagem horizontal.