@eventcatalog/core 3.0.0-beta.8 → 3.0.0

package/eventcatalog/src/components/SchemaExplorer/SchemaListItem.tsx

@@ -8,64 +8,62 @@ interface SchemaListItemProps {
   isSelected: boolean;
   versions: SchemaItem[];
   onClick: () => void;
-  itemRef?: React.RefObject<HTMLButtonElement>;
+  itemRef?: React.Ref<HTMLButtonElement>;
 }
 
 export default function SchemaListItem({ message, isSelected, versions, onClick, itemRef }: SchemaListItemProps) {
   const { color, Icon } = getCollectionStyles(message.collection);
   const hasMultipleVersions = versions.length > 1;
 
+  // Get the schema icon
+  const ext = message.schemaExtension?.toLowerCase();
+  const hasSchemaIcon = ['openapi', 'asyncapi', 'graphql', 'avro', 'json', 'proto'].includes(ext || '');
+  const iconName = ext === 'json' ? 'json-schema' : ext;
+
   return (
     <button
       ref={itemRef}
       onClick={onClick}
-      className={`w-full text-left p-4 hover:bg-gray-50 transition-colors ${
-        isSelected ? `bg-${color}-50 border-l-4 border-${color}-500` : 'border-l-4 border-transparent'
+      className={`w-full text-left px-3 py-2 transition-all duration-75 group border-l-2 ${
+        isSelected ? `bg-${color}-50 border-l-${color}-500` : 'hover:bg-gray-50 border-l-transparent'
       }`}
     >
-      <div className="flex items-start gap-3">
-        <Icon className={`h-5 w-5 mt-0.5 flex-shrink-0 ${isSelected ? `text-${color}-600` : `text-${color}-500`}`} />
+      <div className="flex items-center gap-2.5">
+        {/* Collection Icon */}
+        <div
+          className={`flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-md ${
+            isSelected ? `bg-${color}-100` : `bg-${color}-100/60`
+          }`}
+        >
+          <Icon className={`h-3.5 w-3.5 text-${color}-600`} />
+        </div>
+
         <div className="flex-1 min-w-0">
-          <div className="flex items-center justify-between gap-2 mb-1.5">
-            <div className="flex items-center gap-2 min-w-0">
-              <h3 className={`text-sm font-semibold truncate ${isSelected ? `text-${color}-900` : 'text-gray-900'}`}>
-                {message.data.name}
-              </h3>
-              <span className="text-xs text-gray-500 flex-shrink-0">v{message.data.version}</span>
-            </div>
-            <div className="flex items-center gap-1 flex-shrink-0">
-              <span className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800">
-                {(() => {
-                  const ext = message.schemaExtension?.toLowerCase();
-                  if (
-                    ext === 'openapi' ||
-                    ext === 'asyncapi' ||
-                    ext === 'graphql' ||
-                    ext === 'avro' ||
-                    ext === 'json' ||
-                    ext === 'proto'
-                  ) {
-                    // Map json extension to json-schema icon
-                    const iconName = ext === 'json' ? 'json-schema' : ext;
-                    const iconPath = buildUrl(`/icons/${iconName}.svg`, true);
-                    return (
-                      <>
-                        <img src={iconPath} alt={`${ext} icon`} className="h-3 w-3" />
-                        {getSchemaTypeLabel(message.schemaExtension)}
-                      </>
-                    );
-                  }
-                  return getSchemaTypeLabel(message.schemaExtension);
-                })()}
-              </span>
-              {hasMultipleVersions && (
-                <span className="inline-flex items-center rounded-full bg-blue-100 px-1 py-0.5 text-xs font-medium text-blue-700">
-                  {versions.length} versions
-                </span>
+          {/* Name row with version */}
+          <div className="flex items-center gap-1.5">
+            <span className={`text-[13px] font-semibold truncate ${isSelected ? 'text-gray-900' : 'text-gray-700'}`}>
+              {message.data.name}
+            </span>
+            <span className={`text-[10px] tabular-nums flex-shrink-0 ${isSelected ? 'text-gray-500' : 'text-gray-400'}`}>
+              v{message.data.version}
+            </span>
+          </div>
+
+          {/* Meta row */}
+          <div className="flex items-center gap-1.5 mt-0.5">
+            {/* Schema Format */}
+            <span className={`inline-flex items-center gap-1 text-[10px] ${isSelected ? 'text-gray-600' : 'text-gray-500'}`}>
+              {hasSchemaIcon && (
+                <img src={buildUrl(`/icons/${iconName}.svg`, true)} alt={`${ext} icon`} className="h-3 w-3 opacity-70" />
               )}
-            </div>
+              {getSchemaTypeLabel(message.schemaExtension)}
+            </span>
+
+            {/* Versions count */}
+            {hasMultipleVersions && (
+              <span className={`text-[10px] ${isSelected ? 'text-gray-500' : 'text-gray-400'}`}>· {versions.length}v</span>
+            )}
           </div>
-          {message.data.summary && <p className="text-xs text-gray-600 line-clamp-2">{message.data.summary}</p>}
         </div>
       </div>
     </button>

package/eventcatalog/src/components/Search/Search.astro

@@ -4,7 +4,7 @@ import SearchModal from './SearchModal.tsx';
 ---
 
 <div>
-  <div class="relative flex items-center w-10/12">
+  <div class="relative flex items-center w-full pr-4">
     <input
       id="search-dummy-input"
       type="text"
@@ -14,7 +14,7 @@ import SearchModal from './SearchModal.tsx';
       class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 font-light sm:text-sm sm:leading-6 px-4"
     />
     <MagnifyingGlassIcon className="absolute inset-y-0 left-0 h-9 w-8 flex items-center pl-4 text-gray-400" />
-    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-6">
       <kbd class="inline-flex items-center rounded px-1 font-sans text-xs text-gray-400">⌘K</kbd>
     </div>
   </div>

package/eventcatalog/src/components/Search/SearchDataLoader.astro

@@ -0,0 +1,25 @@
+---
+/**
+ * SearchDataLoader.astro
+ *
+ * This component loads the sidebar/search data independently of the sidebar UI.
+ * It ensures the search functionality works on all pages, even when the nested
+ * sidebar is not rendered (e.g., /discover pages).
+ */
+import { getNestedSideBarData } from '@stores/sidebar-store/state';
+
+const props = await getNestedSideBarData();
+---
+
+<script is:inline define:vars={{ props }}>
+  window.sidebarData = props;
+</script>
+
+<script>
+  import { setSidebarData } from '@stores/sidebar-store';
+
+  const data = (window as any).sidebarData;
+  if (data) {
+    setSidebarData(data);
+  }
+</script>

package/eventcatalog/src/components/SideNav/NestedSideBar/SearchBar.tsx

@@ -17,7 +17,7 @@ import {
   ListOrdered,
   ArrowLeftRight,
 } from 'lucide-react';
-import type { NavNode } from './sidebar-builder';
+import type { NavNode } from '@stores/sidebar-store/state';
 
 const cn = (...classes: (string | false | undefined)[]) => classes.filter(Boolean).join(' ');
 
@@ -178,8 +178,9 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
               <button
                 onClick={clearSearch}
                 className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                aria-label="Clear search"
               >
-                <X className="w-4 h-4" />
+                <X className="w-4 h-4" aria-hidden="true" />
               </button>
             )}
           </div>
@@ -193,8 +194,10 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
                   ? 'bg-purple-50 border-purple-200 text-purple-600'
                   : 'bg-gray-50 border-gray-200 text-gray-400 hover:text-gray-600 hover:bg-gray-100'
               )}
+              aria-label="Filter search results"
+              aria-expanded={showFilterDropdown}
             >
-              <SlidersHorizontal className="w-4 h-4" />
+              <SlidersHorizontal className="w-4 h-4" aria-hidden="true" />
               {searchFilters.size > 0 && (
                 <span className="absolute -top-1 -right-1 w-4 h-4 bg-purple-600 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
                   {searchFilters.size}

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import * as LucideIcons from 'lucide-react';
 import { ChevronRight, ChevronLeft, ChevronDown, Home, Star, FileQuestion } from 'lucide-react';
-import type { NavigationData, NavNode, ChildRef } from './sidebar-builder';
+import type { NavNode, ChildRef } from '@stores/sidebar-store/state';
 import SearchBar from './SearchBar';
 import { saveState, loadState, saveCollapsedSections, loadCollapsedSections } from './storage';
 import { useStore } from '@nanostores/react';
@@ -472,9 +472,36 @@ export default function NestedSideBar() {
   // Show loading state if no data yet
   if (!data || roots.length === 0) {
     return (
-      <aside className="w-[315px] h-screen flex flex-col bg-gray-50 border-r border-gray-200">
-        <div className="px-3 py-2 bg-white border-b border-gray-200">
-          <span className="text-sm font-semibold text-gray-900">Loading...</span>
+      <aside className="w-[315px] h-full flex flex-col font-sans">
+        {/* Search skeleton */}
+        <div className="px-3 py-3 border-b border-gray-200">
+          <div className="h-9 bg-gray-100 rounded-lg animate-pulse" />
+        </div>
+        {/* Content skeleton */}
+        <div className="p-3 space-y-3">
+          {/* Group header skeleton */}
+          <div className="flex items-center gap-2 px-2 py-1.5">
+            <div className="w-3.5 h-3.5 bg-gray-200 rounded animate-pulse" />
+            <div className="h-4 w-24 bg-gray-200 rounded animate-pulse" />
+          </div>
+          {/* Item skeletons */}
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="flex items-center gap-2.5 px-3 py-1.5 ml-3.5 border-l border-gray-100">
+              <div className="w-4 h-4 bg-gray-100 rounded animate-pulse" />
+              <div className="h-4 bg-gray-100 rounded animate-pulse" style={{ width: `${60 + ((i * 15) % 40)}%` }} />
+            </div>
+          ))}
+          {/* Second group skeleton */}
+          <div className="flex items-center gap-2 px-2 py-1.5 mt-4">
+            <div className="w-3.5 h-3.5 bg-gray-200 rounded animate-pulse" />
+            <div className="h-4 w-20 bg-gray-200 rounded animate-pulse" />
+          </div>
+          {[1, 2, 3].map((i) => (
+            <div key={`g2-${i}`} className="flex items-center gap-2.5 px-3 py-1.5 ml-3.5 border-l border-gray-100">
+              <div className="w-4 h-4 bg-gray-100 rounded animate-pulse" />
+              <div className="h-4 bg-gray-100 rounded animate-pulse" style={{ width: `${50 + ((i * 20) % 35)}%` }} />
+            </div>
+          ))}
         </div>
       </aside>
     );
@@ -698,32 +725,32 @@ export default function NestedSideBar() {
 
     const headerContent = (
       <>
-        <div className="flex items-center">
+        <div className="flex items-center gap-2">
           {GroupIcon && (
-            <span className="mr-2 text-gray-900">
-              <GroupIcon className="w-3.5 h-3.5" />
+            <span className="flex items-center justify-center w-5 h-5 rounded bg-gray-100 text-gray-600">
+              <GroupIcon className="w-3 h-3" />
             </span>
           )}
-          <span className="text-sm text-black font-semibold">{group.title}</span>
+          <span className="text-[13px] text-gray-900 font-semibold tracking-tight">{group.title}</span>
         </div>
         {canCollapse && <ChevronDown className={cn('w-4 h-4 text-gray-400 transition-transform', isCollapsed && '-rotate-90')} />}
       </>
     );
 
     return (
-      <div key={`group-${groupKey || index}`} className="mb-4 last:mb-2">
+      <div key={`group-${groupKey || index}`} className="mb-5 last:mb-2">
         {canCollapse ? (
           <button
             onClick={() => toggleSectionCollapse(groupId)}
-            className="flex items-center justify-between w-full px-2 py-1.5 pb-1.5 hover:bg-gray-100 rounded transition-colors cursor-pointer"
+            className="flex items-center justify-between w-full px-2 py-1.5 hover:bg-gray-50 rounded-md transition-colors cursor-pointer"
           >
             {headerContent}
           </button>
         ) : (
-          <div className="flex items-center justify-between px-2 py-1.5 pb-1.5">{headerContent}</div>
+          <div className="flex items-center justify-between px-2 py-1.5">{headerContent}</div>
         )}
         {!isCollapsed && (
-          <div className="flex flex-col gap-0.5 border-l ml-3.5 border-gray-100">
+          <div className="flex flex-col gap-0.5 border-l ml-4 mt-1 border-gray-200">
             {visibleChildren.map((childRef, childIndex) => {
               const child = resolveRef(childRef);
               if (!child) return null;
@@ -776,6 +803,7 @@ export default function NestedSideBar() {
               <IconComponent className="w-4 h-4" />
             </span>
           )}
+          {item.leftIcon && <img src={item.leftIcon} alt="" className="w-4 h-4 flex-shrink-0" />}
           <span
             className={cn(
               'text-[13px] truncate',
@@ -809,9 +837,9 @@ export default function NestedSideBar() {
     );
 
     const baseClasses =
-      'group flex items-center justify-between w-full px-3 py-1 rounded-lg cursor-pointer text-left transition-colors hover:bg-gray-100 active:bg-gray-200';
+      'group flex items-center justify-between w-full px-3 py-1.5 rounded-lg cursor-pointer text-left transition-colors hover:bg-gray-100 active:bg-gray-200';
     const parentClasses = itemHasChildren ? 'font-medium' : '';
-    const activeClasses = isActive ? 'bg-gray-200 hover:bg-gray-200 border-l-4 border-black rounded-l-none' : '';
+    const activeClasses = isActive ? 'bg-purple-50 hover:bg-purple-50 border-l-2 border-purple-600 rounded-l-none' : '';
 
     // Leaf item with href → render as link
     if (item.href && !itemHasChildren) {
@@ -1000,7 +1028,7 @@ export default function NestedSideBar() {
             {/* Favorites Section */}
             {favorites.length > 0 && isTopLevel && (
               <div className="mb-6">
-                <div className="flex items-center px-2 py-2 pb-2">
+                <div className="flex items-center px-2 py-1.5">
                   <Star className="w-3.5 h-3.5 mr-2 text-amber-400 fill-current" />
                   <span className="text-sm text-black font-semibold">Favorites</span>
                 </div>
@@ -1015,7 +1043,7 @@ export default function NestedSideBar() {
                         onClick={() => navigateToFavorite(fav)}
                         className={cn(
                           'group flex items-center justify-between w-full px-3 py-1.5 rounded-lg cursor-pointer text-left transition-colors hover:bg-amber-50 active:bg-amber-100',
-                          isActive && 'bg-gray-200 hover:bg-gray-200 border-l-4 border-black rounded-l-none'
+                          isActive && 'bg-purple-50 hover:bg-purple-50 border-l-2 border-purple-600 rounded-l-none'
                         )}
                       >
                         <div className="flex items-center gap-2.5 min-w-0 flex-1">

package/eventcatalog/src/components/SideNav/SideNav.astro

@@ -2,26 +2,11 @@
 import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends Omit<HTMLAttributes<'div'>, 'children'> {}
-import { getNestedSideBarData } from './NestedSideBar/sidebar-builder';
 import NestedSideBar from './NestedSideBar';
 import { ClientRouter } from 'astro:transitions';
-
-const props = await getNestedSideBarData();
 ---
 
 <div {...Astro.props}>
   <ClientRouter />
   <NestedSideBar client:only="react" />
 </div>
-
-<script is:inline define:vars={{ props }}>
-  window.sidebarData = props;
-</script>
-
-<script>
-  import { setSidebarData } from '@stores/sidebar-store';
-  const data = (window as any).sidebarData;
-  if (data) {
-    setSidebarData(data);
-  }
-</script>

package/eventcatalog/src/components/Tables/Table.tsx

@@ -11,6 +11,7 @@ import {
   type ColumnFiltersState,
 } from '@tanstack/react-table';
 import DebouncedInput from './DebouncedInput';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, SearchX } from 'lucide-react';
 
 import { getColumnsByCollection } from './columns';
 import { useEffect, useMemo, useState } from 'react';
@@ -240,23 +241,26 @@ export const Table = <T extends TCollectionTypes>({
     },
   });
 
+  const totalResults = table.getPrePaginationRowModel().rows.length;
+  const hasResults = table.getRowModel().rows.length > 0;
+
   return (
     <div>
-      {/* <div className='text-right text-gray-400'>{table.getPrePaginationRowModel().rows.length} results</div> */}
-      <div className=" bg-gray-100/20 rounded-md border-2 border-gray-200 shadow-sm ">
-        <table className="min-w-full divide-y divide-gray-200 rounded-md ">
-          <thead className="bg-gray-200/50">
+      <div className="rounded-lg border border-gray-200 overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50 sticky top-0 z-10">
             {table.getHeaderGroups().map((headerGroup, index) => (
-              <tr key={`${headerGroup}-${index}`} className="rounded-tl-lg">
+              <tr key={`${headerGroup}-${index}`}>
                 {headerGroup.headers.map((header) => (
-                  <th key={`${header.id}`} className="pl-4 pr-3 text-left text-sm font-semibold text-gray-800 sm:pl-0  ">
-                    <div className="flex flex-col justify-start px-2 py-2 space-y-2">
-                      <div className="text-md">
-                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                      </div>
-                      <div className="">
+                  <th
+                    key={`${header.id}`}
+                    className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                  >
+                    <div className="flex flex-col gap-2">
+                      <div>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</div>
+                      <div>
                         {header.column.columnDef.meta?.showFilter !== false && <Filter column={header.column} />}
-                        {header.column.columnDef.meta?.showFilter == false && <div className="h-10" />}
+                        {header.column.columnDef.meta?.showFilter == false && <div className="h-9" />}
                       </div>
                     </div>
                   </th>
@@ -265,80 +269,94 @@ export const Table = <T extends TCollectionTypes>({
             ))}
           </thead>
 
-          <tbody className="divide-y divide-gray-300 ">
-            {table.getRowModel().rows.map((row, index) => (
-              <tr key={`${row.id}-${index}`}>
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={cell.id}
-                    className={` py-4 pl-4 pr-3 text-sm font-medium text-gray-900  ${cell.column.columnDef.meta?.className}`}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
+          <tbody className="bg-white divide-y divide-gray-100">
+            {hasResults ? (
+              table.getRowModel().rows.map((row, index) => (
+                <tr key={`${row.id}-${index}`} className="hover:bg-gray-50 transition-colors">
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      className={`px-4 py-3 text-sm text-gray-700 ${cell.column.columnDef.meta?.className || ''}`}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={table.getAllColumns().length} className="px-4 py-12 text-center">
+                  <div className="flex flex-col items-center justify-center text-gray-500">
+                    <SearchX className="w-10 h-10 text-gray-300 mb-3" />
+                    <p className="text-sm font-medium text-gray-600">No results found</p>
+                    <p className="text-xs text-gray-400 mt-1">Try adjusting your search or filters</p>
+                  </div>
+                </td>
               </tr>
-            ))}
+            )}
           </tbody>
         </table>
       </div>
-      <div>
-        <div className="h-8" />
-        <div className="flex items-center gap-2 justify-end px-4  ">
-          <button
-            className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            {'<<'}
-          </button>
-          <button
-            className="relative inline-flex items-center  bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            {'<'}
-          </button>
-          <button
-            className="relative inline-flex items-center  bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            {'>'}
-          </button>
-          <button
-            className="relative inline-flex items-center rounded-r-md bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            {'>>'}
-          </button>
-          <span className="flex items-center gap-1">
-            <div>Page</div>
-            <strong>
-              {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-            </strong>
-          </span>
-          <span className="flex items-center gap-1">
-            | Go to page:
-            <input
-              type="number"
-              defaultValue={table.getState().pagination.pageIndex + 1}
-              onChange={(e) => {
-                const page = e.target.value ? Number(e.target.value) - 1 : 0;
-                table.setPageIndex(page);
-              }}
-              className="border border-gray-300 p-1 rounded w-16"
-            />
-          </span>
+
+      {/* Pagination */}
+      <div className="flex items-center justify-between px-1 py-4">
+        <div className="text-sm text-gray-500">
+          {totalResults > 0 && (
+            <span>
+              Showing <span className="font-medium text-gray-700">{table.getRowModel().rows.length}</span> of{' '}
+              <span className="font-medium text-gray-700">{totalResults}</span> results
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center rounded-lg border border-gray-200 bg-white">
+            <button
+              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors rounded-l-lg"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+              title="First page"
+            >
+              <ChevronsLeft className="w-4 h-4" />
+            </button>
+            <button
+              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors border-l border-gray-200"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              title="Previous page"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            <span className="px-3 py-2 text-sm text-gray-600 border-l border-r border-gray-200 min-w-[100px] text-center">
+              Page <span className="font-medium">{table.getState().pagination.pageIndex + 1}</span> of{' '}
+              <span className="font-medium">{table.getPageCount() || 1}</span>
+            </span>
+            <button
+              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors border-r border-gray-200"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              title="Next page"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </button>
+            <button
+              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors rounded-r-lg"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+              title="Last page"
+            >
+              <ChevronsRight className="w-4 h-4" />
+            </button>
+          </div>
           <select
             value={table.getState().pagination.pageSize}
             onChange={(e) => {
               table.setPageSize(Number(e.target.value));
             }}
+            className="px-3 py-2 text-sm text-gray-600 bg-white border border-gray-200 rounded-lg hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200 transition-colors"
           >
             {[10, 20, 30, 40, 50].map((pageSize) => (
               <option key={pageSize} value={pageSize}>
-                Show {pageSize}
+                {pageSize} per page
               </option>
             ))}
           </select>
@@ -394,6 +412,8 @@ function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T
     return Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 2000);
   }, [column.getFacetedUniqueValues(), filterVariant]);
 
+  const uniqueCount = column.getFacetedUniqueValues().size;
+
   return (
     <div>
       {/* Autocomplete suggestions from faceted values feature */}
@@ -406,11 +426,10 @@ function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T
         type="text"
         value={(columnFilterValue ?? '') as string}
         onChange={(value) => column.setFilterValue(value)}
-        placeholder={`Search... ${!column?.columnDef?.meta?.filterVariant ? `(${column.getFacetedUniqueValues().size})` : ''}`}
-        className="w-full p-2 border shadow rounded"
+        placeholder={!column?.columnDef?.meta?.filterVariant ? `Search (${uniqueCount})...` : 'Search...'}
+        className="w-full px-3 py-2 text-sm bg-white border border-gray-200 rounded-lg placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-gray-300 transition-colors"
         list={column.id + 'list'}
       />
-      <div className="h-1" />
     </div>
   );
 }