55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import {ReactNode} from "react";
|
|
import './DataTable.css';
|
|
|
|
export type DataTableColumnDefinition<T> = {
|
|
field: string,
|
|
label?: string,
|
|
visualize?: (value: T) => ReactNode
|
|
};
|
|
|
|
function TableHead({columns}: { columns: DataTableColumnDefinition<any>[] }) {
|
|
return <thead className='DataTableHead'>
|
|
<tr>
|
|
{
|
|
columns.map(column =>
|
|
<th key={column.field}>
|
|
{column.label ?? column.field}
|
|
</th>)
|
|
}
|
|
</tr>
|
|
</thead>;
|
|
}
|
|
|
|
function DataTableRow({rowData, columns}: {
|
|
rowData: any,
|
|
columns: DataTableColumnDefinition<any>[]
|
|
}) {
|
|
return <tr>
|
|
{
|
|
columns.map(column => {
|
|
return <td key={column.field}>
|
|
{
|
|
column.visualize
|
|
? column.visualize(rowData)
|
|
: rowData[column.field]
|
|
}
|
|
</td>;
|
|
})
|
|
}
|
|
</tr>;
|
|
}
|
|
|
|
export default function DataTable<T>({data, columns, className}: {
|
|
data: T[],
|
|
columns: DataTableColumnDefinition<any>[],
|
|
className?: string
|
|
}) {
|
|
return <div className={'DataTable ' + (className ?? '')}>
|
|
<table>
|
|
<TableHead columns={columns}/>
|
|
<tbody>
|
|
{data.map((element, index) => <DataTableRow key={index} rowData={element} columns={columns}/>)}
|
|
</tbody>
|
|
</table>
|
|
</div>;
|
|
}
|