Data Table

const COLUMNS = ["Model", "Context", "$/1M in"];
const ROWS: string[][] = [
  ["gpt-4o", "128k", "$5.00"],
  ["claude-3.5", "200k", "$3.00"],
  ["llama-3.1", "128k", "$0.90"],
];

export function DataTable({
  columns = COLUMNS,
  rows = ROWS,
}: {
  columns?: string[];
  rows?: string[][];
}) {
  return (
    <div className="table-wrap">
      <table className="table">
        <thead>
          <tr>{columns.map((c) => <th key={c}>{c}</th>)}</tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>{r.map((cell, j) => <td key={j}>{cell}</td>)}</tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* DataTable.css */
.table-wrap { width: 100%; border: 1px solid #e6e8ec; border-radius: 12px; overflow: hidden; background: #fff; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th { text-align: left; padding: 10px 14px; background: #fafafa; color: #a1a1a1; font-weight: 600; font-size: 12px; border-bottom: 1px solid #e6e8ec; }
.table td { padding: 10px 14px; border-bottom: 1px solid #e6e8ec; color: #1a1a1a; }
.table tr:last-child td { border-bottom: none; }
@media (prefers-color-scheme: dark) {
  .table-wrap { border-color: #303030; background: #1a1a1a; }
  .table th { background: #242424; border-bottom-color: #303030; }
  .table td { border-bottom-color: #303030; color: #f5f5f5; }
}