fix(explorer): editable cells keep focus (#3664)

Author: karooolis

.changeset/big-feet-give.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Editable table cells no longer lose focus during editing when the query is set to "live".

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/EditableTableCell.tsx

@@ -35,7 +35,6 @@ export function EditableTableCell({ name, table, keyTuple, value: defaultValue }
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
   const account = useAccount();
-
   const valueSchema = getValueSchema(table);
   const fieldType = valueSchema?.[name as never]?.type;
 
@@ -54,7 +53,6 @@ export function EditableTableCell({ name, table, keyTuple, value: defaultValue }
       });
 
       const receipt = await waitForTransactionReceipt(wagmiConfig, { hash: txHash });
-
       return { txHash, receipt };
     },
     onMutate: () => {

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx

@@ -10,11 +10,12 @@ import {
 import { parseAsJson, parseAsString, useQueryState } from "nuqs";
 import { useCallback, useMemo } from "react";
 import { Table as TableType } from "@latticexyz/config";
-import { getKeySchema, getKeyTuple } from "@latticexyz/protocol-parser/internal";
+import { getKeySchema } from "@latticexyz/protocol-parser/internal";
 import {
   ColumnDef,
   OnChangeFn,
   PaginationState,
+  RowData,
   SortingState,
   flexRender,
   getCoreRowModel,
@@ -31,9 +32,9 @@ import { cn } from "../../../../../../utils";
 import { useChain } from "../../../../hooks/useChain";
 import { TData, TDataRow, useTableDataQuery } from "../../../../queries/useTableDataQuery";
 import { indexerForChainId } from "../../../../utils/indexerForChainId";
-import { EditableTableCell } from "./EditableTableCell";
 import { ExportButton } from "./ExportButton";
 import { PAGE_SIZE_OPTIONS } from "./consts";
+import { defaultColumn } from "./defaultColumn";
 import { usePaginationState } from "./hooks/usePaginationState";
 import { useSQLQueryState } from "./hooks/useSQLQueryState";
 import { getLimitOffset } from "./utils/getLimitOffset";
@@ -42,6 +43,13 @@ import { typeSortingFn } from "./utils/typeSortingFn";
 const initialSortingState: SortingState = [];
 const initialRows: TData["rows"] = [];
 
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface TableMeta<TData extends RowData> {
+    tableConfig?: TableType;
+  }
+}
+
 type Props = {
   table?: TableType;
   query?: string;
@@ -83,7 +91,6 @@ export function TablesViewer({ table, isLiveQuery }: Props) {
       const schema = table?.schema[name];
       const type = schema?.type;
       const keySchema = getKeySchema(table);
-
       return {
         accessorKey: name,
         header: ({ column }) => {
@@ -101,27 +108,14 @@ export function TablesViewer({ table, isLiveQuery }: Props) {
           );
         },
         sortingFn: (rowA, rowB, columnId) => typeSortingFn(rowA, rowB, columnId, type),
-        cell: ({ row }) => {
-          const keySchema = getKeySchema(table);
-          const value = row.getValue(name);
-          if (!table || Object.keys(keySchema).includes(name)) {
-            return value;
-          }
-
-          try {
-            const keyTuple = getKeyTuple(table, row.original as never);
-            return <EditableTableCell name={name} table={table} value={value} keyTuple={keyTuple} />;
-          } catch (e) {
-            return value;
-          }
-        },
       };
     });
   }, [table, tableData]);
 
   const reactTable = useReactTable({
     data: tableData?.rows ?? initialRows,
     columns: tableColumns,
+    defaultColumn,
     initialState: {
       pagination: {
         pageSize: pagination.pageSize,
@@ -142,6 +136,9 @@ export function TablesViewer({ table, isLiveQuery }: Props) {
       globalFilter,
       pagination,
     },
+    meta: {
+      tableConfig: table,
+    },
   });
 
   // Pagination is only enabled if the query has a LIMIT and OFFSET that are divisible by the page size
@@ -196,6 +193,7 @@ export function TablesViewer({ table, isLiveQuery }: Props) {
                   </TableRow>
                 ))}
             </TableHeader>
+
             <TableBody className="relative">
               {isLoading && (
                 <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/50 backdrop-blur-sm">
@@ -204,10 +202,12 @@ export function TablesViewer({ table, isLiveQuery }: Props) {
               )}
               {!isError && reactTable.getRowModel().rows?.length ? (
                 reactTable.getRowModel().rows.map((row) => (
-                  <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                    ))}
+                  <TableRow key={row.id}>
+                    {row.getVisibleCells().map((cell) => {
+                      return (
+                        <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                      );
+                    })}
                   </TableRow>
                 ))
               ) : (

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/defaultColumn.tsx

@@ -0,0 +1,25 @@
+import { getKeySchema, getKeyTuple } from "@latticexyz/protocol-parser/internal";
+import { CellContext, ColumnDef } from "@tanstack/react-table";
+import { TDataRow } from "../../../../queries/useTableDataQuery";
+import { EditableTableCell } from "./EditableTableCell";
+
+export const defaultColumn: Partial<ColumnDef<TDataRow>> = {
+  cell: ({ getValue, row, column, table }: CellContext<TDataRow, unknown>) => {
+    const value = getValue();
+    const tableConfig = table.options.meta?.tableConfig;
+
+    if (!tableConfig) return value;
+    try {
+      const name = column.id;
+      const keySchema = getKeySchema(tableConfig);
+      if (!table || Object.keys(keySchema).includes(name)) {
+        return value;
+      }
+
+      const keyTuple = getKeyTuple(tableConfig, row.original as never);
+      return <EditableTableCell name={name} table={tableConfig} value={value} keyTuple={keyTuple} />;
+    } catch (e) {
+      return value;
+    }
+  },
+};