feat(validation): complete validation editor and master data modules

validation-suite/frontend/atlas/components/data-table.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+
+export function DataTable<T>({ data, columns }: { data: T[]; columns: ColumnDef<T>[] }) {
+  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-surface shadow-soft">
+      <div className="overflow-x-auto">
+        <table className="min-w-full border-collapse text-left text-sm">
+          <thead className="bg-background text-xs uppercase tracking-wide text-text-light">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th key={header.id} className="px-5 py-4 font-semibold">
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody className="divide-y divide-border">
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id} className="hover:bg-background/70">
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="whitespace-nowrap px-5 py-4 text-text">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+