88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import {
|
|
useReactTable,
|
|
getCoreRowModel,
|
|
flexRender,
|
|
} from '@tanstack/react-table';
|
|
import { MoreHorizontal } from 'lucide-react';
|
|
|
|
export interface TableProps<T> {
|
|
data: T[];
|
|
columns: any[];
|
|
getRowId?: (row: T, index?: number) => string;
|
|
emptyMessage?: string;
|
|
}
|
|
|
|
export const Table = <T,>({ data, columns, getRowId, emptyMessage = 'No data available' }: TableProps<T>) => {
|
|
const table = useReactTable({
|
|
data,
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getRowId: (row: any, index: number) => {
|
|
let customId = getRowId ? getRowId(row) : null;
|
|
if (customId !== undefined && customId !== null && customId !== '') {
|
|
return `${customId}_${index}`;
|
|
}
|
|
return row.id || row.batch_no || row.product_id || row.dispensing_id || `row-${index}`;
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col w-full">
|
|
<div className="overflow-x-auto overflow-y-auto">
|
|
<table className="w-full text-left border-collapse min-w-[800px] table-auto">
|
|
<thead className="bg-slate-50 border-b border-slate-200/80">
|
|
{table.getHeaderGroups().map(headerGroup => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map(header => (
|
|
<th
|
|
key={header.id}
|
|
className="py-4 px-6 text-[11px] font-bold text-slate-500 uppercase tracking-widest whitespace-nowrap"
|
|
style={{ padding: '16px 24px' }}
|
|
>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-slate-100">
|
|
{table.getRowModel().rows.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={columns.length} className="py-16 text-center text-slate-500" style={{ padding: '64px 24px' }}>
|
|
<div className="flex flex-col items-center justify-center opacity-70">
|
|
<MoreHorizontal className="w-8 h-8 text-slate-400 mb-3" />
|
|
<p className="text-[14px] font-medium">{emptyMessage}</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
table.getRowModel().rows.map(row => (
|
|
<tr
|
|
key={row.id}
|
|
className="group hover:bg-slate-50 transition-all duration-200 ease-in-out cursor-default"
|
|
>
|
|
{row.getVisibleCells().map(cell => (
|
|
<td
|
|
key={cell.id}
|
|
className="py-4 px-6 text-[14px] text-slate-700 whitespace-nowrap group-hover:text-slate-900 transition-colors"
|
|
style={{ padding: '16px 24px' }}
|
|
>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|