UsageTable
Tabela de uso/consumo com barra de progresso por linha e detalhes expansíveis.
Carregando...
Instalação
npx @kobana/ui add usage-tableDependências instaladas automaticamente: table, progress (shadcn/ui), lucide-react
Importação
import { UsageTable } from "@/components/kobana/usage-table"
import type { UsageRow } from "@/components/kobana/usage-table"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
rows | UsageRow[] | — | Linhas de uso a serem exibidas |
formatValue | (n: number) => string | Intl.NumberFormat('pt-BR') | Função para formatar valores numéricos |
columns | { label?: string; used?: string; limit?: string } | { label: 'Item', used: 'Consumo', limit: 'Limite' } | Rótulos das colunas |
emptyMessage | string | "Nenhum dado disponível." | Texto exibido quando não há linhas |
unlimitedLabel | string | "Ilimitado" | Texto da coluna de limite quando não há limite |
className | string | — | Classes adicionais aplicadas ao container |
Tipo UsageRow
interface UsageRow {
id: string
label: string
used: number
limit?: number
unit?: string
details?: { label: string; used: number }[]
}Uso
const rows: UsageRow[] = [
{
id: "boletos",
label: "Boletos emitidos",
used: 8420,
limit: 10000,
unit: "docs",
details: [
{ label: "Conta principal", used: 5210 },
{ label: "Conta secundária", used: 3210 },
],
},
{ id: "webhooks", label: "Webhooks disparados", used: 48230, unit: "eventos" },
]
<UsageTable rows={rows} />Quando uma linha tem limit, uma barra de progresso (% do limite) é exibida abaixo do rótulo; quando o consumo ultrapassa o limite, a barra fica em cor de destaque (destructive). Linhas com details ficam expansíveis ao clicar, revelando o detalhamento do consumo.