(web) fix DataTable re-render loop (#219)

Author: joewagner

packages/web/app/[team]/[project]/(project)/deployments/[[...slug]]/_components/data-table.tsx

@@ -25,7 +25,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { objectToTableData } from "@/lib/utils";
 
 interface DataTableProps<TData, TValue> {
   columns: Array<ColumnDef<TData, TValue>>;
@@ -40,7 +39,7 @@ export function DataTable<TData, TValue>({
     React.useState<VisibilityState>({});
 
   const table = useReactTable({
-    data: objectToTableData<TData>(data),
+    data,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),

packages/web/components/tableland-table.tsx

@@ -18,6 +18,7 @@ import HashDisplay from "./hash-display";
 import { blockExplorers } from "@/lib/block-explorers";
 import { openSeaLinks } from "@/lib/open-sea";
 import { chainsMap } from "@/lib/chains-map";
+import { objectToTableData } from "@/lib/utils";
 
 const timeAgo = new TimeAgo("en-US");
 
@@ -63,6 +64,7 @@ export default async function TablelandTable({
 
   const tbl = new Database({ baseUrl: helpers.getBaseUrl(chainId) });
   const data = await tbl.prepare(`SELECT * FROM ${tableName};`).all();
+  const formattedData = objectToTableData(data.results);
   const columns: Array<ColumnDef<unknown>> = data.results.length
     ? Object.keys(data.results[0] as object).map((col) => ({
         accessorKey: col,
@@ -176,7 +178,7 @@ export default async function TablelandTable({
           <TabsTrigger value="logs">SQL Logs</TabsTrigger>
         </TabsList>
         <TabsContent value="data">
-          <DataTable columns={columns} data={data.results} />
+          <DataTable columns={columns} data={formattedData} />
         </TabsContent>
         <TabsContent value="logs">
           <SQLLogs chain={chainId} tableId={tokenId} />