diff --git a/packages/web/src/components/gridView.css b/packages/web/src/components/gridView.css
index 65dcd56962088..55cf382fcd307 100644
--- a/packages/web/src/components/gridView.css
+++ b/packages/web/src/components/gridView.css
@@ -66,6 +66,20 @@
   white-space: nowrap;
 }
 
+.grid-view-header-cell-button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  flex: auto;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.grid-view-header-cell-button:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: -1px;
+}
+
 .grid-view-header-cell-title {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/web/src/components/gridView.tsx b/packages/web/src/components/gridView.tsx
index 33ef2fe51e5c4..5ab58a31989fa 100644
--- a/packages/web/src/components/gridView.tsx
+++ b/packages/web/src/components/gridView.tsx
@@ -75,17 +75,24 @@ export function GridView<T>(model: GridViewProps<T>) {
     <div className='vbox'>
       <div className='grid-view-header'>
         {model.columns.map((column, i) => {
+          const title = <>
+            <span className='grid-view-header-cell-title'>{model.columnTitle(column)}</span>
+            <span className='codicon codicon-triangle-up' />
+            <span className='codicon codicon-triangle-down' />
+          </>;
           return <div
             key={model.columnTitle(column)}
             className={'grid-view-header-cell ' + sortingHeader(column, model.sorting)}
             style={{
               width: i < model.columns.length - 1 ? model.columnWidths.get(column) : undefined,
             }}
-            onClick={() => model.setSorting && toggleSorting(column)}
           >
-            <span className='grid-view-header-cell-title'>{model.columnTitle(column)}</span>
-            <span className='codicon codicon-triangle-up' />
-            <span className='codicon codicon-triangle-down' />
+            {model.setSorting ? <button
+              className='grid-view-header-cell-button'
+              onClick={() => toggleSorting(column)}
+            >
+              {title}
+            </button> : title}
           </div>;
         })}
       </div>
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index a88c9cb3b4b89..b4adcff3b97b6 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -518,6 +518,21 @@ test('should have network requests', async ({ showTraceViewer }) => {
   await expect(traceViewer.networkRequests.filter({ hasText: '404GET404text' })).toHaveCSS('background-color', 'rgb(242, 222, 222)');
 });
 
+test('should sort network columns from the keyboard', async ({ showTraceViewer }) => {
+  const traceViewer = await showTraceViewer(traceFile);
+  await traceViewer.selectAction('Navigate');
+  await traceViewer.showNetworkTab();
+
+  const nameColumn = traceViewer.page.getByRole('button', { name: 'Name', exact: true });
+  await expect(nameColumn).toBeVisible();
+
+  await nameColumn.focus();
+  await expect(nameColumn).toBeFocused();
+
+  await nameColumn.press('Enter');
+  await expect(traceViewer.networkRequests.first()).toContainText('404');
+});
+
 test('should attribute network requests to service workers', async ({ runAndTrace, page, context, server, browserName }) => {
   test.skip(browserName !== 'chromium', 'Service worker requests are only reported in Chromium');
   const traceViewer = await runAndTrace(async () => {