first commit .

2026-07-29 11:47:37 +05:30
parent c0d7302718
commit bd800a3bab
32 changed files with 6360 additions and 0 deletions
@@ -0,0 +1,81 @@
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+} from '@tanstack/react-table';
+import { MoreHorizontal } from 'lucide-react';
+
+export interface TableProps<T> {
+  data: T[];
+  columns: any[];
+  getRowId?: (row: T) => string;
+  emptyMessage?: string;
+}
+
+export const Table = <T,>({ data, columns, getRowId, emptyMessage = 'No data available' }: TableProps<T>) => {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId,
+  });
+
+  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>
+  );
+};