Data Table

import { DataTable } from "@/components/data-table"
import { Badge } from "@/components/badge"

export default function MyComponent() {
  const data = [
    { id: 1, name: "John Doe", email: "john@example.com", status: "active" },
    { id: 2, name: "Jane Smith", email: "jane@example.com", status: "inactive" },
    // ...more data
  ]
  
  const renderStatus = (status) => {
    return <Badge variant={status === "active" ? "success" : "error"}>
      {status === "active" ? "Active" : "Inactive"}
    </Badge>
  }
  
  const columns = [
    { header: "ID", accessor: "id", sortable: true },
    { header: "Name", accessor: "name", sortable: true },
    { header: "Email", accessor: "email", sortable: true },
    { header: "Status", accessor: (row) => renderStatus(row.status) },
  ]
  
  return (
    <DataTable
      data={data}
      columns={columns}
      pageSize={10}
      onRowClick={(row) => console.log(row)}
    />
  )
}