From b797c83ec6a560cc86bdf02d55ca80a6958bc7f6 Mon Sep 17 00:00:00 2001
From: mukimovd <41473651-mukimovd@users.noreply.replit.com>
Date: Sat, 10 May 2025 21:20:36 +0000
Subject: [PATCH] Improve data presentation and tag input features across the
 application

Refactors DataTable and TagInput components, and adds @tanstack/react-table dependency.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: bddfbb2b-6d6b-457b-b18c-05792cdaa035
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/90b5f3d2-0e18-45bc-a027-dfc7f3a05b12.jpg
---
 client/src/components/ui/data-table.tsx |  8 +++---
 client/src/components/ui/tag-input.tsx  | 13 +++++-----
 package-lock.json                       | 34 +++++++++++++++++++++++++
 package.json                            |  1 +
 4 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ui/data-table.tsx b/client/src/components/ui/data-table.tsx
index 249a820..739cb9d 100644
--- a/client/src/components/ui/data-table.tsx
+++ b/client/src/components/ui/data-table.tsx
@@ -179,8 +179,8 @@ export function DataTable<TData, TValue>({
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-[180px]">
                 {table.getAllColumns()
-                  .filter(column => column.getCanHide())
-                  .map(column => (
+                  .filter((column) => column.getCanHide())
+                  .map((column) => (
                     <DropdownMenuCheckboxItem
                       key={column.id}
                       className="capitalize"
@@ -252,8 +252,8 @@ export function DataTable<TData, TValue>({
                       <EmptyState
                         title={emptyState.title}
                         description={emptyState.description}
-                        action={emptyState.action}
-                        variant="ghost"
+                        actions={emptyState.action}
+                        variant="minimal"
                       />
                     </div>
                   ) : (
diff --git a/client/src/components/ui/tag-input.tsx b/client/src/components/ui/tag-input.tsx
index 02ebb71..6d445ea 100644
--- a/client/src/components/ui/tag-input.tsx
+++ b/client/src/components/ui/tag-input.tsx
@@ -154,14 +154,15 @@ export const TagInput = forwardRef<HTMLInputElement, TagInputProps>(({
   const [filteredSuggestions, setFilteredSuggestions] = useState(suggestions);
   const inputRef = useRef<HTMLInputElement>(null);
   
-  // Forward the ref
-  const handleRef = (el: HTMLInputElement) => {
+  // Merge refs
+  const mergedRef = (el: HTMLInputElement | null) => {
+    // Update inner ref
+    if (el) inputRef.current = el;
+    
+    // Forward to external ref
     if (typeof ref === 'function') {
       ref(el);
-    } else if (ref) {
-      ref.current = el;
     }
-    inputRef.current = el;
   };
   
   // Focus the input when clicking the container
@@ -342,7 +343,7 @@ export const TagInput = forwardRef<HTMLInputElement, TagInputProps>(({
         {!readOnly && (
           <div className="flex flex-1 items-center min-w-[180px]">
             <input
-              ref={handleRef}
+              ref={mergedRef}
               type="text"
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
diff --git a/package-lock.json b/package-lock.json
index 761d623..f362552 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "@radix-ui/react-tooltip": "^1.2.0",
         "@tailwindcss/vite": "^4.1.3",
         "@tanstack/react-query": "^5.60.5",
+        "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
@@ -3269,6 +3270,39 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
diff --git a/package.json b/package.json
index bbb594a..4db17b3 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@radix-ui/react-tooltip": "^1.2.0",
     "@tailwindcss/vite": "^4.1.3",
     "@tanstack/react-query": "^5.60.5",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",