ignore folder

components/ui/Table.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+
+export type TableColumn<T extends Record<string, unknown>> = {
+  key: keyof T | "actions" | string;
+  header: string;
+  render?: (row: T) => ReactNode;
+};
+
+type TableProps<T extends Record<string, unknown>> = {
+  columns: TableColumn<T>[];
+  data: T[];
+  loading?: boolean;
+  noDataText?: string;
+};
+
+export default function DataTable<T extends Record<string, unknown>>({
+  columns,
+  data,
+  loading,
+  noDataText = "No data"
+}: TableProps<T>) {
+  return (
+    <div className="table-responsive">
+      {loading && (
+        <div className="py-4 text-center text-muted">Loading ...</div>
+      )}
+      {!loading && data.length === 0 && <div className="py-4 text-center text-muted">{noDataText}</div>}
+      {!loading && data.length > 0 && (
+        <table className="table table-striped table-hover">
+          <thead>
+            <tr>
+              {columns.map((col) => (
+                <th key={String(col.key)}>{col.header}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row, idx) => (
+              <tr key={String((row as { id?: string })?.id ?? idx)}>
+                {columns.map((col) => (
+                  <td key={String(col.key)} className="align-middle">
+                    {col.render ? col.render(row) : String((row as Record<string, unknown>)[col.key as keyof T] ?? "-")}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}