Spaces:
Sleeping
Sleeping
| import React from 'react'; | |
| import { formatCellValue, typeBadgeClass, typeLabel } from '../lib/format'; | |
| import type { ColumnInfo } from '../api/types'; | |
| interface Props { | |
| rows: Record<string, any>[]; | |
| columns: string[]; | |
| schema: ColumnInfo[]; | |
| maxRows?: number; | |
| } | |
| export function TablePreview({ rows, columns, schema, maxRows = 10 }: Props) { | |
| return ( | |
| <div className="overflow-x-auto max-h-64 overflow-y-auto rounded-lg border border-gray-200"> | |
| <table className="data-table w-full"> | |
| <thead> | |
| <tr> | |
| {columns.map((name) => { | |
| const col = schema.find((c) => c.name === name); | |
| return ( | |
| <th key={name}> | |
| <div className="flex items-center gap-1"> | |
| <span className={`badge ${typeBadgeClass(col?.column_type || 'unknown')} text-[9px]`}> | |
| {typeLabel(col?.column_type || 'unknown')} | |
| </span> | |
| {name} | |
| </div> | |
| </th> | |
| ); | |
| })} | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {rows.slice(0, maxRows).map((row, i) => ( | |
| <tr key={i}> | |
| {columns.map((name) => ( | |
| <td key={name}>{formatCellValue(row[name])}</td> | |
| ))} | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| ); | |
| } | |