Table fixes

Author: Pigna

src/components/Table/Table.module.scss

@@ -17,7 +17,15 @@
 
 .toolbar {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  gap: var(--space-3);
+}
+
+.resultCount {
+  margin-right: auto;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
 }
 
 .search {
@@ -69,6 +77,16 @@
   font-weight: var(--font-weight-semibold);
   white-space: nowrap;
   user-select: none;
+
+  /* Subtle tint on the active sort column */
+  &[aria-sort='ascending'],
+  &[aria-sort='descending'] {
+    background-color: color-mix(
+      in srgb,
+      var(--table-accent, var(--color-primary)) 8%,
+      var(--table-header-bg, var(--color-surface))
+    );
+  }
 }
 
 .thContent {
@@ -157,6 +175,15 @@
   color: var(--color-text-secondary);
 }
 
+/* Error content shown inside the empty-state cell */
+
+.errorContent {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-error);
+}
+
 /* Inline "Clear search" link inside the empty state */
 
 .clearSearchButton {
@@ -181,7 +208,12 @@
 }
 
 .selected {
+  /* !important needed to override striped-row specificity */
   background-color: color-mix(in srgb, var(--table-accent, var(--color-primary)) 12%, transparent) !important;
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--table-accent, var(--color-primary)) 18%, transparent) !important;
+  }
 }
 
 /* Focus ring on selectable rows */
@@ -204,7 +236,16 @@
 }
 
 .skeletonRow {
+  border-bottom: 1px solid var(--color-border);
   pointer-events: none;
+
+  /* Vary cell widths to mimic realistic data distribution */
+  td:nth-child(1) .skeletonCell { width: 40%; }
+  td:nth-child(2) .skeletonCell { width: 78%; }
+  td:nth-child(3) .skeletonCell { width: 55%; }
+  td:nth-child(4) .skeletonCell { width: 85%; }
+  td:nth-child(5) .skeletonCell { width: 45%; }
+  td:nth-child(n+6) .skeletonCell { width: 65%; }
 }
 
 .skeletonCell {
@@ -297,7 +338,6 @@
   color: var(--color-text-secondary);
 }
 
-.showingInfo {
-  color: var(--color-text-secondary);
-}
+/* Styling hook for the "Showing X–Y of Z" span; inherits color from .pageInfo */
+.showingInfo {}
 

src/components/Table/Table.stories.tsx

@@ -128,6 +128,16 @@ export const ErrorState: Story = {
   },
 };
 
+/** Error state with selectable rows disabled, loading finished. */
+export const ErrorStateWithContext: Story = {
+  args: {
+    columns,
+    data: [],
+    searchable: true,
+    error: 'Could not connect to the server. Check your network and retry.',
+  },
+};
+
 /** Full-featured table with header color, selectable rows, search, pagination. */
 export const KitchenSink: Story = {
   args: {

src/components/Table/Table.test.tsx

@@ -141,7 +141,42 @@ describe('Table', () => {
     expect(screen.getByText('Failed to load')).toBeInTheDocument();
   });
 
-  /* --- Row selection (keyboard + mouse) --- */
+  it('wraps error content in an error-styled container', () => {
+    render(<Table columns={columns} data={[]} error="Something went wrong" />);
+    const errorText = screen.getByText('Something went wrong');
+    expect(errorText.closest('[class*="errorContent"]')).toBeInTheDocument();
+  });
+
+  it('sets role="grid" on the table when selectable', () => {
+    render(<Table columns={columns} data={data} selectable />);
+    expect(screen.getByRole('grid')).toBeInTheDocument();
+  });
+
+  it('does not set role="grid" when not selectable', () => {
+    render(<Table columns={columns} data={data} />);
+    expect(screen.queryByRole('grid')).not.toBeInTheDocument();
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+
+  /* --- Visible result count in toolbar --- */
+
+  it('shows result count in toolbar when search is active', async () => {
+    render(<Table columns={columns} data={data} searchable />);
+    await userEvent.type(screen.getByRole('searchbox'), 'Alice');
+    expect(screen.getByText('1 result')).toBeInTheDocument();
+  });
+
+  it('shows plural result count for multiple matches', async () => {
+    render(<Table columns={columns} data={data} searchable />);
+    await userEvent.type(screen.getByRole('searchbox'), 'a');
+    // The visible toolbar span shows e.g. "2 results" (live region shows "2 results found")
+    expect(screen.getByText(/^\d+ results$/)).toBeInTheDocument();
+  });
+
+  it('hides result count when search is empty', () => {
+    render(<Table columns={columns} data={data} searchable />);
+    expect(screen.queryByText(/result/)).not.toBeInTheDocument();
+  });
 
   it('selects a row on click when selectable', async () => {
     render(<Table columns={columns} data={data} selectable />);

src/components/Table/Table.tsx

@@ -56,6 +56,16 @@ function ChevronRightIcon() {
   );
 }
 
+function WarningIcon() {
+  return (
+    <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path d="M8 2L14.5 13H1.5L8 2Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+      <path d="M8 6.5V9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      <circle cx="8" cy="11.5" r="0.75" fill="currentColor" />
+    </svg>
+  );
+}
+
 /* ---- Types ---- */
 
 export type SortDirection = 'asc' | 'desc' | 'none';
@@ -317,6 +327,11 @@ export function Table<T extends Record<string, unknown> = Record<string, unknown
 
       {searchable && (
         <div className={styles.toolbar}>
+          {search.trim() && (
+            <span className={styles.resultCount}>
+              {sorted.length} {sorted.length === 1 ? 'result' : 'results'}
+            </span>
+          )}
           <input
             type="search"
             className={styles.search}
@@ -339,6 +354,7 @@ export function Table<T extends Record<string, unknown> = Record<string, unknown
             .join(' ')}
           style={tableStyle}
           aria-busy={loading || undefined}
+          role={selectable ? 'grid' : undefined}
         >
           {caption && <caption className={styles.caption}>{caption}</caption>}
           <thead className={styles.thead}>
@@ -410,7 +426,10 @@ export function Table<T extends Record<string, unknown> = Record<string, unknown
               <tr>
                 <td className={styles.empty} colSpan={columns.length}>
                   {error ? (
-                    error
+                    <span className={styles.errorContent}>
+                      <WarningIcon />
+                      {error}
+                    </span>
                   ) : search.trim() ? (
                     <>
                       No results for &ldquo;{search}&rdquo;.{' '}