added attribute-table component and refactored ABCIEventsTable to use…

… it. duplicates data-table but with single table header for event type. updated block and transaction page.

src/components/ABCIEventsTable/columns.tsx

@@ -2,27 +2,34 @@
 
 import { type ColumnDef } from "@tanstack/react-table";
 
-export type ABCIEventsColumns = Record<number, {
-  type: string,
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface ABCIEventsColumns {
   key: string,
   value: string | null,
-}>;
+};
 
-export const columns : Array<ColumnDef<ABCIEventsColumns>> = [
-  {
-    accessorKey: "key",
-    header: () => <div className="font-semibold text-gray-800 text-center text-sm">Key</div>,
-    cell: ({ getValue }) => {
-      const abciKey = getValue() as string;
-      return <pre className="text-center sm:text-sm text-xs">{abciKey}</pre>;
+export const makeColumns = ( header: string ) => {
+  const columns : Array<ColumnDef<ABCIEventsColumns>> = [
+    {
+      id: "type",
+      header: () => <div className="font-semibold text-gray-800 text-center sm:break-normal break-all sm:text-base text-xs">{header}</div>,
+      columns: [
+        {
+          accessorKey: "key",
+          cell: ({ getValue }) => {
+            const abciKey = getValue() as string;
+            return <pre className="text-center sm:text-sm text-xs">{abciKey}</pre>;
+          },
+        },
+        {
+          accessorKey: "value",
+          cell: ({ getValue }) => {
+            const abciValue : string = getValue() as string | null ?? "None";
+            return <pre className="text-center  break-all whitespace-pre-wrap sm:w-auto sm:px-0 px-2 sm:text-sm text-xs">{abciValue}</pre>;
+          },
+        },
+      ],
     },
-  },
-  {
-    accessorKey: "value",
-    header: () => <div className="font-semibold text-gray-800 text-center text-sm">Value</div>,
-    cell: ({ getValue }) => {
-      const abciValue : string = getValue() as string | null ?? "None";
-      return <pre className="text-center  break-all whitespace-pre-wrap sm:w-auto sm:px-0 px-2 sm:text-sm text-xs">{abciValue}</pre>;
-    },
-  },
-];
+  ];
+  return columns;
+};

src/components/ABCIEventsTable/index.tsx

@@ -1,18 +1,20 @@
-import { columns } from "./columns";
-import { DataTable } from "../ui/data-table";
+import { makeColumns } from "./columns";
 import { type FC } from "react";
+import { AttributeTable } from "../ui/attribute-table";
 
 interface Props {
   className?: string,
-  data: Array<{
+  type: string,
+  attributes: Array<{
     key: string,
     value: string | null,
   }>,
 }
 
-const ABCIEventsTable : FC<Props> = ({ className, data }) => {
+const ABCIEventsTable : FC<Props> = ({ className, type, attributes }) => {
+  const columns = makeColumns(type);
   return (
-    <DataTable className={className ?? ""} columns={columns} data={data}/>
+    <AttributeTable className={className ?? ""} header={type} columns={columns} data={attributes}/>
   );
 };
 

src/components/Block/index.tsx

@@ -30,12 +30,11 @@ const Block : FC<BlockEventProps> = ({ blockData }) => {
               <Link href={`/transaction/${tx_hash}`} key={i}><pre className="underline sm:max-w-full max-w-[200px] overflow-hidden overflow-ellipsis sm:text-base">{tx_hash}</pre></Link>
           )) : <p className="sm:w-0 w-full overflow-hidden text-ellipsis">None</p>}
         </div>
-        <div className="flex justify-start flex-wrap w-full">
+        <div className="flex justify-start flex-wrap w-full gap-y-5">
           <p className="font-bold text-base">Block Event Attributes</p>
           {abciEvents.length !== 0 ? abciEvents.map(({ type, attributes }, i) => (
             <div key={i} className="flex flex-col sm:items-start items-center w-full gap-y-1">
-              <p className="font-mono whitespace-pre-wrap break-all sm:text-base text-sm pt-5">{type}</p>
-              <ABCIEventsTable className="sm:w-2/3 w-full" data={attributes}/>
+              <ABCIEventsTable className="sm:w-2/3 w-full" type={type} attributes={attributes}/>
             </div>
           )) : <p>None</p>}
         </div>

src/components/Transaction/index.tsx

@@ -35,19 +35,14 @@ const Transaction : FC<TransactionProps> = ({ txData }) => {
             <ReactJson src={penumbraTx.toJson() as object} name={"transaction"} displayDataTypes={false} collapseStringsAfterLength={20} collapsed={5} enableClipboard={true} displayObjectSize={false}/>
           </pre>
         </div>
-        <div className="flex justify-start flex-wrap w-full">
+        <div className="flex justify-start flex-wrap w-full gap-y-5">
           <p className="font-bold text-base">Block Event Attributes</p>
           {abciEvents.length !== 0 ? abciEvents.map(({ type, attributes }, i) => (
             <div key={i} className="flex flex-col sm:items-start items-center w-full gap-y-1">
-              <p className="font-mono whitespace-pre-wrap break-all sm:text-base text-sm pt-5">{type}</p>
-              <ABCIEventsTable className="sm:w-2/3 w-full" data={attributes}/>
+              <ABCIEventsTable className="sm:w-2/3 w-full" type={type} attributes={attributes}/>
             </div>
           )) : <p>None</p>}
         </div>
-        {/* <div className="flex flex-col items-center gap-5 w-full">
-          <p className="font-semibold">Event Attributes</p>
-          <ABCIEventsTable className="w-full" data={abciEvents}/>
-        </div> */}
       </div>
     </div>
   );

src/components/ui/attribute-table.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  type VisibilityState,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/Table";
+
+interface AttributeTableProps<TData, TValue> {
+  className?: string,
+  header?: string,
+  columns: Array<ColumnDef<TData, TValue>>,
+  columnVisibility?: VisibilityState,
+  data: TData[],
+}
+
+export function AttributeTable<TData, TValue>({
+  className,
+  header,
+  columns,
+  columnVisibility,
+  data,
+}: AttributeTableProps<TData, TValue>) {
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    initialState: {
+      columnVisibility,
+    },
+  });
+
+  console.log("Header groups: ", table.getHeaderGroups());
+
+
+  return (
+    <div className={`${className}`}>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader className="bg-slate-200">
+            {table.getHeaderGroups()[0].headers.map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {
+                    <TableHead key={headerGroup.id} colSpan={2}>
+                      {headerGroup.isPlaceholder
+                        ? null
+                        : flexRender(
+                            headerGroup.column.columnDef.header,
+                            headerGroup.getContext(),
+                          )}
+                    </TableHead>
+                }
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  className="bg-white"
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id} className="sm:p-4 p-1">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

src/components/ui/data-table.tsx

@@ -23,7 +23,7 @@ interface DataTableProps<TData, TValue> {
   columnVisibility?: VisibilityState,
   data: TData[],
 }
- 
+
 export function DataTable<TData, TValue>({
   className,
   columns,