// import './Table.css'
import { ChangeEvent, MouseEvent } from "react";
export interface Column {
id: string
name?: string,
}
export interface Value {
columnId: string,
value: any
}
interface TableParams {
columns: Column[];
data: Value[][];
selectable?: boolean;
selectedRows?: Set<number>;
onClick?: (element: MouseEvent<HTMLTableRowElement>, index: number) => void
onSelect?: (element: ChangeEvent<HTMLInputElement>, index: number) => void
}
export const Table = (props: TableParams) => {
const {
columns,
data,
selectable = false,
selectedRows,
onClick,
onSelect
} = props;
const thClassName = "border-b font-medium p-4 first:pl-8 last:pr-8 pt-0 pb-3 \
text-left text-slate-800";
const Header = () => {
return (
<thead>
<tr >
{selectable ? <th></th> : null}
{columns.map(column =>
<th
className={thClassName}
key={column.id}>
{column.name}
</th>)}
</tr>
</thead>
);
};
const Body = () => {
const rows = data.map(row => {
return row.reduce((acc: any, item) => {
acc[item.columnId] = item.value;
return acc;
}, new Map());
})
const columnIds = columns.map(col => col.id);
return (
<tbody className="bg-white">
{
rows.map((row, rowIndex) => {
return <tr
className="hover:bg-slate-200 text-slate-500
hover:text-slate-800 hover:cursor-pointer"
onClick={(el) => onClick?.(el, rowIndex)}
key={rowIndex}>
{
selectable ?
<th className="pl-4">
<input
type="checkbox"
onChange={(el) => (onSelect && onSelect(el, rowIndex))}
checked={selectedRows && selectedRows.has(rowIndex)}
>
</input>
</th> : null
}
{columnIds.map((colId, index) => {
return <td
className="border-b border-slate-100
p-4 first:pl-8 last:pr-8 text-left"
key={index}>
{row[colId]}
</td>
})}
</tr>;
})
}
</tbody>
)
}
return (
<div className="w-full bg-slate-100 shadow-lg rounded-xl">
<table className={"table-auto w-full text-sm mt-8 mb-6"}>
<Header />
<Body />
</table>
</div>
)
}