Implementing Result Count Next to Inventory Search Box in tvview

TL;DR: I added a feature to display the result count next to the Inventory search box in the tvview repository. This involved modifying the InventoryTable.tsx file to include a dynamic count of search results.

The Problem

The issue was that the search functionality in the Inventory table was missing a crucial piece of feedback: the number of results found. This made it difficult for users to understand the impact of their search queries. The error message or symptom wasn't exactly an error, but rather a missing feature.

What I Tried First

Initially, I considered adding a separate component to handle the result count, but I decided against it to keep the code simple and focused on the specific feature. I also explored using an existing library or utility to handle the count, but it wasn't necessary in this case.

The Implementation

The implementation involved modifying the InventoryTable.tsx file. Specifically, I added a new state variable searchResultsCount to store the count of search results. I then updated the JSX to include the count next to the search box.

// src/features/inventory/InventoryTable.tsx
import { useState, useEffect } from 'react';

export function InventoryTable() {
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResultsCount, setSearchResultsCount] = useState(0);

  useEffect(() => {
    // assume 'data' is the search results data
    const count = data.length;
    setSearchResultsCount(count);
  }, [data]);

  return (
    <div className="space-y-4">
      <div className="relative max-w-sm">
        <Search className="text-muted-foreground pointer-events-none" />
        <input
          type="search"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="Search..."
          className="w-full pl-10 text-sm text-gray-700"
        />
        {searchResultsCount > 0 && (
          <span className="absolute top-2 right-2 text-xs text-gray-500">
            {searchResultsCount} results
          </span>
        )}
      </div>
      {/* ... rest of the code ... */}
    </div>
  );
}

The diff for this change is:

@@ -65,14 +65,21 @@ export function InventoryTable() {

   return (
     <div className="space-y-4">
-      <div className="relative max-w-sm">
-        <Search className="text-muted-foreground point
+      <div className="relative max-w-sm">
        <Search className="text-muted-foreground pointer-events-none" />
        <input
          type="search"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="Search..."
          className="w-full pl-10 text-sm text-gray-700"
        />
+        {searchResultsCount > 0 && (
+          <span className="absolute top-2 right-2 text-xs text-gray-500">
+            {searchResultsCount} results
+          </span>
+        )}
      </div>
      {/* ... rest of the code ... */}

Key Takeaway

The key takeaway from this experience is the importance of providing feedback to users about their search queries. In this case, adding a simple count of search results next to the search box greatly improves the user experience.

What's Next

Next, I plan to explore adding more advanced features to the search functionality, such as filtering and sorting. I'd also like to investigate using a more robust library or utility to handle search results, to make the code even more maintainable and scalable.

vibecoding #buildinpublic #typescript #react #searchux

---

Part of my Build in Public series — sharing the real process of building SaaS projects from Playa del Carmen, México.

Repo: zaerohell/tvview · 2026-07-14

#playadev #buildinpublic