51 lines
1.9 KiB
JavaScript
51 lines
1.9 KiB
JavaScript
import React from "react";
|
|
|
|
const Table = ({ tableData }) => {
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse shadow-sm rounded-lg overflow-hidden bg-white dark:bg-[#3c4043] transition-colors duration-200">
|
|
<thead className="bg-gray-100 dark:bg-[#303134]">
|
|
<tr className="text-left">
|
|
<th className="p-3 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 font-semibold">
|
|
ID
|
|
</th>
|
|
<th className="p-3 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 font-semibold">
|
|
Stream
|
|
</th>
|
|
<th className="p-3 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 font-semibold">
|
|
Scholarship
|
|
</th>
|
|
<th className="p-3 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 font-semibold">
|
|
Funds
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{tableData?.map((row) => (
|
|
<tr
|
|
key={row.id}
|
|
className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
|
>
|
|
<td className="p-3 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-300">
|
|
{row.id}
|
|
</td>
|
|
<td className="p-3 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-300">
|
|
{row.Stream}
|
|
</td>
|
|
<td className="p-3 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-300">
|
|
{row.Scholarship}
|
|
</td>
|
|
<td className="p-3 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-300">
|
|
{row.Funds}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Table;
|