Merge pull request #54 from upstash/add-field-copy

Add Field Copy Button
upstash · Mar 19, 2024 · c6e1560 · c6e1560
2 parents 8480382 + 0f6130e
commit c6e1560
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 6 deletions.
diff --git a/examples/nextjs13/CHANGELOG.md b/examples/nextjs13/CHANGELOG.md
@@ -1,5 +1,12 @@
 # nextjs13
 
+## 0.3.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @upstash/react-databrowser@0.3.5
+
 ## 0.3.4
 
 ### Patch Changes

diff --git a/examples/nextjs13/package.json b/examples/nextjs13/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs13",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/packages/react-databrowser/CHANGELOG.md b/packages/react-databrowser/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @upstash/react-databrowser
 
+## 0.3.5
+
+### Patch Changes
+
+- Added button to copy object fields
+
 ## 0.3.4
 
 ### Patch Changes

diff --git a/packages/react-databrowser/package.json b/packages/react-databrowser/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@upstash/react-databrowser",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",

diff --git a/...t-databrowser/src/components/databrowser/components/data-display-container/data-table.tsx b/...t-databrowser/src/components/databrowser/components/data-display-container/data-table.tsx
@@ -34,11 +34,24 @@ export const DataTable = ({ data, tableHeaders }: Props) => {
             >
               {item.value !== null ? (
                 <TableCell
-                  className={cn("h-[38px] w-32 border-none px-3 text-[14px] font-normal", {
-                    "rounded-l bg-[#00000008]": idx % 2 === 0,
-                  })}
+                  className={cn(
+                    " relative h-[38px] w-[10rem] flex-row overflow-hidden truncate whitespace-break-spaces border-none px-3 text-[14px] font-normal",
+                    {
+                      "rounded-l bg-[#00000008]": idx % 2 === 0,
+                    },
+                  )}
                 >
-                  <p className="w-32 overflow-hidden truncate whitespace-nowrap ">{item.value}</p>
+                  <p className="w-[120px] overflow-hidden truncate whitespace-nowrap ">{item.value}</p>
+                  {hoveredRow === idx && (
+                    <div className="absolute right-0 top-[5px]">
+                      <CopyToClipboardButton
+                        sizeVariant="icon-sm"
+                        variant="ghost"
+                        onCopy={() => handleCopyClick(item.value !== null ? item.value.toString() : "")}
+                        svgSize={{ h: 22, w: 22 }}
+                      />
+                    </div>
+                  )}
                 </TableCell>
               ) : null}
               {item.content !== null ? (