added table component

src/components/Table.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+
+export interface Header {
+	name: string
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface Row<T = any> {
+	cells: Cell[]
+	data?: T,
+	// TODO: maybe there is some TS magic to apply here so that rowData has the same type as data without using generics
+	onClick?: (e: React.MouseEvent, rowData: T ) => void 
+	onContextMenu?: (e: React.MouseEvent, data: T)=>void
+}
+
+export interface Cell {
+	name: string
+	component?: React.ReactNode
+}
+
+export interface Data {
+	headers: Header[]
+	body: Row[]
+}
+
+interface Props {
+	data: Data
+}
+
+const Table: React.FC<Props> = ({data:{headers,body}}) => {
+	const numCol = headers.length
+	return (
+		<table className="w-full">
+			<thead className="border-b-2 dark:border-gray-900">
+				{headers.map((e,i)=><th key={i} className="text-left">{e.name}</th>)}
+			</thead>
+			<tbody className="divide-y dark:divide-gray-900">
+				{body.map((row,rowIndex)=>
+					<tr 
+						className="hover:bg-gray-100 dark:hover:bg-gray-900 text-lg"
+						key={rowIndex}
+						onClick={e=>row.onClick?.(e,row.data)}
+						onContextMenu={e=>row.onContextMenu?.(e,row.data)}
+					>
+						{(row.cells.length >= numCol?
+							row.cells:
+							row.cells.concat(Array(numCol - row.cells.length).fill({name:""}))) // Pad array to fit numCol
+							.map((cell,cellIndex)=>
+								<td key={cellIndex}>
+									{cell.component || cell.name}
+								</td>
+							)}
+					</tr>)}
+			</tbody>
+		</table>
+	)
+}
+
+export default Table