Table

Tabela de dados com colunas configuráveis, suporte a listras e slots para células personalizadas.

Uso

<script setup lang="ts">
import { Table } from '@halfbyte/maka'

const columns = [
  { key: 'nome', label: 'Nome' },
  { key: 'cargo', label: 'Cargo' },
  { key: 'status', label: 'Status', align: 'center' },
]

const rows = [
  { nome: 'Ana Lima', cargo: 'Designer', status: 'Ativo' },
  { nome: 'Bruno Costa', cargo: 'Engenheiro', status: 'Ativo' },
  { nome: 'Carla Souza', cargo: 'Produto', status: 'Inativo' },
]
</script>

<template>
  <Table :columns="columns" :rows="rows" />
</template>

Com listras

<Table :columns="columns" :rows="rows" :striped="true" />

Células personalizadas

<Table :columns="columns" :rows="rows">
  <template #cell-status="{ value }">
    <Badge :variant="value === 'Ativo' ? 'success' : 'default'">{{ value }}</Badge>
  </template>
</Table>

Props

Prop	Tipo	Padrão
columns	TableColumn[]	obrigatório
rows	TableRow[]	[]
caption	string	—
bordered	boolean	true
striped	boolean	false

TableColumn

Campo	Tipo	Descrição
key	string	Chave do campo no objeto
label	string	Texto do cabeçalho
width	string	Largura da coluna (opcional)
align	"left" | "center" | "right"	Alinhamento (opcional)

Slots

Slot	Props	Descrição
head-{key}	—	Cabeçalho personalizado da coluna
cell-{key}	{ row, value }	Célula personalizada
body	—	Substitui todo o corpo da tabela
foot	—	Rodapé da tabela