CmDataTable

import { CmDataTable } from "cosmemilton-ui/client";

"use client";

import { CmButton, CmDataTable, CmDataTableActions, type CmDataTableColumn } from "cosmemilton-ui/client";
import { CmBadge } from "cosmemilton-ui/server";

type Order = {
  id: string;
  customer: string;
  status: "Pago" | "Pendente" | "Atrasado";
  total: number;
};

const orders: Order[] = [
  { id: "1048", customer: "Acme Ltda.", status: "Pago", total: 1280 },
  { id: "1049", customer: "Aurora Foods", status: "Pendente", total: 940 },
  { id: "1050", customer: "Nimbus Tech", status: "Atrasado", total: 3120 },
];

const columns: CmDataTableColumn<Order>[] = [
  { key: "id", header: "Pedido", sortable: true },
  { key: "customer", header: "Cliente", sortable: true },
  {
    key: "status",
    header: "Status",
    render: (row) => (
      <CmBadge tone={row.status === "Pago" ? "success" : row.status === "Atrasado" ? "danger" : "warning"}>
        {row.status}
      </CmBadge>
    ),
  },
  {
    key: "total",
    header: "Total",
    align: "right",
    sortable: true,
    render: (row) => row.total.toLocaleString("pt-BR", { style: "currency", currency: "BRL" }),
  },
];

export default function Example() {
  return (
    <CmDataTable
      title="Pedidos recentes"
      description="Ordene colunas e navegue pela paginação."
      columns={columns}
      data={orders}
      rowKey={(row) => row.id}
      pagination
      defaultRowsPerPage={2}
      defaultSortKey="id"
      actions={
        <CmDataTableActions>
          <CmButton size="sm" tone="primary">Novo pedido</CmButton>
        </CmDataTableActions>
      }
    />
  );
}