53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { ReactNode } from "react";
|
|
|
|
export type TableColumn<T extends Record<string, unknown>> = {
|
|
key: keyof T | "actions" | string;
|
|
header: string;
|
|
render?: (row: T) => ReactNode;
|
|
};
|
|
|
|
type TableProps<T extends Record<string, unknown>> = {
|
|
columns: TableColumn<T>[];
|
|
data: T[];
|
|
loading?: boolean;
|
|
noDataText?: string;
|
|
};
|
|
|
|
export default function DataTable<T extends Record<string, unknown>>({
|
|
columns,
|
|
data,
|
|
loading,
|
|
noDataText = "No data"
|
|
}: TableProps<T>) {
|
|
return (
|
|
<div className="table-responsive">
|
|
{loading && (
|
|
<div className="py-4 text-center text-muted">Loading ...</div>
|
|
)}
|
|
{!loading && data.length === 0 && <div className="py-4 text-center text-muted">{noDataText}</div>}
|
|
{!loading && data.length > 0 && (
|
|
<table className="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
{columns.map((col) => (
|
|
<th key={String(col.key)}>{col.header}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((row, idx) => (
|
|
<tr key={String((row as { id?: string })?.id ?? idx)}>
|
|
{columns.map((col) => (
|
|
<td key={String(col.key)} className="align-middle">
|
|
{col.render ? col.render(row) : String((row as Record<string, unknown>)[col.key as keyof T] ?? "-")}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|