57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import { cn } from '../lib/utils'
|
|
|
|
interface Column {
|
|
key: string
|
|
header: string
|
|
render?: (value: any, row: any) => React.ReactNode
|
|
}
|
|
|
|
interface DataTableProps {
|
|
columns: Column[]
|
|
data: any[]
|
|
keyExtractor: (row: any, index: number) => string
|
|
className?: string
|
|
}
|
|
|
|
export function DataTable({
|
|
columns,
|
|
data,
|
|
keyExtractor,
|
|
className,
|
|
}: DataTableProps) {
|
|
return (
|
|
<div className={cn('overflow-x-auto', className)}>
|
|
<table className="w-full border-collapse text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 bg-gray-50">
|
|
{columns.map((col) => (
|
|
<th
|
|
key={col.key}
|
|
className="px-4 py-3 text-left font-medium text-gray-600"
|
|
>
|
|
{col.header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((row, index) => (
|
|
<tr
|
|
key={keyExtractor(row, index)}
|
|
className="border-b border-gray-100 hover:bg-gray-50"
|
|
>
|
|
{columns.map((col) => (
|
|
<td key={col.key} className="px-4 py-3 text-gray-700">
|
|
{col.render
|
|
? col.render(row[col.key], row)
|
|
: row[col.key] ?? '-'}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|