50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
import React from "react";
|
|
|
|
const Table = ({ columns = [], data = [], actions }) => {
|
|
return (
|
|
<div className="overflow-x-auto bg-white rounded-2xl shadow-sm border border-[#B9B9B9]">
|
|
<table className="min-w-full text-sm text-center">
|
|
{" "}
|
|
{/* <-- text-center added */}
|
|
<thead className="bg-gray-50 text-[#202224] uppercase text-xs font-medium">
|
|
<tr>
|
|
{columns.map((col) => (
|
|
<th key={col.key} className="px-6 py-3 text-center">
|
|
{col.label}
|
|
</th>
|
|
))}
|
|
{actions && <th className="px-6 py-3 text-center">Action</th>}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((row, index) => (
|
|
<tr
|
|
key={row.id || index}
|
|
className="border-t hover:bg-gray-50 transition-colors"
|
|
>
|
|
{columns.map((col) => (
|
|
<td
|
|
key={col.key}
|
|
className="px-6 py-3 text-gray-700 text-center"
|
|
>
|
|
{col.render
|
|
? col.render(row[col.key], row, index) // pass index here
|
|
: row[col.key]}
|
|
</td>
|
|
))}
|
|
|
|
{actions && (
|
|
<td className="px-6 py-3 text-center flex items-center justify-center gap-2">
|
|
{actions(row)}
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Table;
|