Merge pull request #46 from bruinenxyz/hungle/bru-1054-enable-copy-paste

BRU-1054 Enable copy paste

frontend/src/components/table/table.tsx

@@ -13,7 +13,6 @@ import {
   Column,
   ColumnHeaderCell,
   Table2,
-  TableLoadingOption,
   TruncatedFormat,
   TruncatedPopoverMode,
 } from "@blueprintjs/table";
@@ -27,6 +26,7 @@ import React, { useEffect, useState } from "react";
 import * as _ from "lodash";
 import { HeaderCellRenderer } from "@blueprintjs/table/lib/esm/headers/header";
 import { useUpdateTable } from "@/data/use-tables";
+import { AppToaster } from "../toaster/toaster";
 interface Props {
   table?: HydratedTable;
   results:
@@ -336,6 +336,19 @@ const Table: React.FC<Props> = (props) => {
     }
   }
 
+  function getCellData(rowIndex: number, columnIndex: number) {
+    const cellData = tableData?.columns[orderedColumns[columnIndex]][rowIndex];
+
+    AppToaster(document.body).then((toaster) => {
+      toaster.show({
+        message: `Copied ${cellData} to clipboard`,
+        icon: "clipboard",
+      });
+    });
+
+    return cellData;
+  }
+
   if (isLoadingResults && !tableData) {
     return <Loading />;
   }
@@ -364,6 +377,7 @@ const Table: React.FC<Props> = (props) => {
         enableColumnResizing
         onColumnsReordered={orderColumn}
         enableFocusedCell={true}
+        getCellClipboardData={getCellData}
         // loadingOptions={[TableLoadingOption.CELLS]}
       >
         {orderedColumns.map((key) => (

frontend/src/components/toaster/toaster.ts

@@ -1,6 +1,10 @@
 import { OverlayToaster, Position } from "@blueprintjs/core";
 
 /** Singleton toaster instance. Create separate instances for different options. */
-export const AppToaster = OverlayToaster.createAsync({
-  position: Position.BOTTOM_RIGHT,
-});
+export const AppToaster = (container?: HTMLElement) =>
+  OverlayToaster.createAsync(
+    {
+      position: Position.BOTTOM_RIGHT,
+    },
+    { container: container },
+  );