added idividual vendor pages

components/tables/DataTable.tsx

@@ -24,12 +24,16 @@ interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[]
     data: TData[]
     className?: string
+    onRowClick?: (rowData: TData) => void
+    getRowId?: (row: TData) => string
 }
 
 export function DataTable<TData, TValue>({
     columns,
     data,
-    className
+    className,
+    onRowClick,
+    getRowId
 }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = useState<SortingState>([])
 
@@ -39,15 +43,22 @@ export function DataTable<TData, TValue>({
         state: { sorting },
         onSortingChange: setSorting,
         getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel()
+        getSortedRowModel: getSortedRowModel(),
+        getRowId: getRowId || ((row: any) => row.id?.toString() || Math.random().toString()),
     })
 
+    const handleRowClick = (row: TData) => {
+        if (onRowClick) {
+            onRowClick(row)
+        }
+    }
+
     return (
         <div className={`rounded-md border ${className || ''}`}>
             <Table>
                 <TableHeader>
                     {table.getHeaderGroups().map(headerGroup => (
-                        <TableRow key={headerGroup.id} >
+                        <TableRow key={headerGroup.id}>
                             {headerGroup.headers.map(header => (
                                 <TableHead key={header.id} className="whitespace-nowrap">
                                     {header.isPlaceholder
@@ -65,7 +76,12 @@ export function DataTable<TData, TValue>({
                 <TableBody>
                     {table.getRowModel().rows.length ? (
                         table.getRowModel().rows.map(row => (
-                            <TableRow key={row.id}>
+                            <TableRow 
+                                key={row.id}
+                                onClick={() => handleRowClick(row.original)}
+                                className={onRowClick ? "cursor-pointer hover:bg-accent/50 transition-colors" : ""}
+                                data-state={row.getIsSelected() ? "selected" : ""}
+                            >
                                 {row.getVisibleCells().map(cell => (
                                     <TableCell key={cell.id}>
                                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -75,7 +91,7 @@ export function DataTable<TData, TValue>({
                         ))
                     ) : (
                         <TableRow>
-                            <TableCell colSpan={columns.length} className="text-center">
+                            <TableCell colSpan={columns.length} className="text-center h-24">
                                 No results
                             </TableCell>
                         </TableRow>
@@ -84,4 +100,4 @@ export function DataTable<TData, TValue>({
             </Table>
         </div>
     )
-}
+}