Trollboard expandable (#1354)

* wip * hide necessary column in trollboard * remove console.log * fix build * clean up * remove commented code
2026-07-12 00:40:07 +08:00 · 2023-02-09 15:20:27 +07:00
parent 7c4ff73241
commit ef548edb72
7 changed files with 153 additions and 60 deletions
@@ -0,0 +1,60 @@
+import { Card, CardBody, Flex } from "@chakra-ui/react";
+import { Cell, CellContext } from "@tanstack/react-table";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+type ExpandableRow<T> = Omit<T, "shouldExpand"> & {
+  shouldExpand?: boolean;
+};
+
+export const createJsonExpandRowModel = <T,>() => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const renderCell = ({ row, getValue }: CellContext<ExpandableRow<T>, any>) => {
+    if (!row.original.shouldExpand) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { shouldExpand, ...res } = row.original;
+      return (
+        <Card variant="json">
+          <CardBody>
+            <pre>{JSON.stringify(res, null, 2)}</pre>
+          </CardBody>
+        </Card>
+      );
+    }
+
+    return (
+      <Flex alignItems="center">
+        {row.getCanExpand() ? (
+          <button
+            {...{
+              onClick: row.getToggleExpandedHandler(),
+              style: { cursor: "pointer" },
+            }}
+          >
+            {row.getIsExpanded() ? <ChevronDown /> : <ChevronRight />}
+          </button>
+        ) : null}{" "}
+        {getValue()}
+      </Flex>
+    );
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const span = (cell: Cell<ExpandableRow<T>, any>) =>
+    cell.row.original.shouldExpand ? undefined : cell.row.getVisibleCells().length;
+
+  const getSubRows = (row: ExpandableRow<T>) =>
+    row.shouldExpand
+      ? [
+          {
+            ...row,
+            shouldExpand: false,
+          },
+        ]
+      : undefined;
+
+  const toExpandable = function (arr: T[] | undefined, val = true): ExpandableRow<T>[] {
+    return !arr ? [] : arr.map((element) => ({ ...element, shouldExpand: val }));
+  };
+
+  return { renderCell, span, getSubRows, toExpandable };
+};