39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
interface TableProps {
|
|
headers: string[];
|
|
data: any[];
|
|
className?: string;
|
|
children?: React.ReactNode; // Add children here
|
|
}
|
|
|
|
const Table: React.FC<TableProps> = ({ headers, data, className = '', children }) => {
|
|
return (
|
|
<div className={`overflow-x-auto ${className}`}>
|
|
<table className="min-w-full bg-white border border-gray-300">
|
|
<thead>
|
|
<tr>
|
|
{headers.map((header, index) => (
|
|
<th key={index} className="px-6 py-3 text-left text-sm font-medium text-gray-600">
|
|
{header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((row, index) => (
|
|
<tr key={index} className="border-t">
|
|
{Object.values(row).map((value, idx) => (
|
|
<td key={idx} className="px-6 py-4 text-sm text-gray-800">
|
|
{value as React.ReactNode}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
{children} {/* This will allow you to pass additional content */}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Table;
|