Create table skeleton

src/app/staking/page.tsx

@@ -4,6 +4,7 @@ import { SolidButton } from 'src/components/buttons/SolidButton';
 import { Card } from 'src/components/layout/Card';
 import { Section } from 'src/components/layout/Section';
 import { Amount } from 'src/components/numbers/Amount';
+import { ValidatorGroupTable } from 'src/features/validators/ValidatorGroupTable';
 import { useValidatorGroups } from 'src/features/validators/hooks';
 import { ValidatorGroup, ValidatorStatus } from 'src/features/validators/types';
 import { bigIntMin } from 'src/utils/math';
@@ -76,9 +77,10 @@ function ListSection({ groups }: { groups?: ValidatorGroup[] }) {
   return (
     <Section>
       <Card>
-        <div className="space-y-4">
+        <ValidatorGroupTable groups={groups || []} />
+        {/* <div className="space-y-4">
           {groups?.map((g) => <div key={g.address}>{JSON.stringify(g)}</div>)}
-        </div>
+        </div> */}
       </Card>
     </Section>
   );

src/features/validators/ValidatorGroupTable.tsx

@@ -0,0 +1,71 @@
+import {
+  SortingState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useMemo, useState } from 'react';
+import { config } from 'src/config/config';
+import { ValidatorGroup } from './types';
+
+export function ValidatorGroupTable({ groups }: { groups: ValidatorGroup[] }) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<ValidatorGroup>();
+    return [
+      columnHelper.accessor('name', {
+        header: 'Name',
+        cell: (props) => <span>{props.getValue().toUpperCase()}</span>,
+      }),
+      columnHelper.accessor('address', {
+        header: 'Status',
+      }),
+      columnHelper.display({
+        id: 'cumulativeShare',
+        cell: () => <div className="bg-purple w-2"></div>,
+      }),
+    ];
+  }, []);
+
+  const table = useReactTable<ValidatorGroup>({
+    data: groups,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    debugTable: config.debug,
+  });
+
+  return (
+    <table>
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th key={header.id}>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(header.column.columnDef.header, header.getContext())}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <tr key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}