From 65042da62194811fc07c67788f123ec4cbf42b4a Mon Sep 17 00:00:00 2001
From: Eddie <ed.byun@schema.education>
Date: Thu, 18 Jun 2026 13:28:32 -0400
Subject: [PATCH 1/9] fix(datatable): improve sortable header accessibility

Co-authored-by: Codex <codex@openai.com>
---
 src/DataTable/TableHeaderCell.tsx            | 30 ++++++--
 src/DataTable/index.scss                     | 16 +++++
 src/DataTable/tests/TableHeaderCell.test.jsx | 74 ++++++++++++++++++--
 3 files changed, 107 insertions(+), 13 deletions(-)

diff --git a/src/DataTable/TableHeaderCell.tsx b/src/DataTable/TableHeaderCell.tsx
index a314dadcd85..a88bd5d817c 100644
--- a/src/DataTable/TableHeaderCell.tsx
+++ b/src/DataTable/TableHeaderCell.tsx
@@ -31,7 +31,7 @@ interface TableHeaderCellProps {
   render: (type: 'Header') => React.ReactNode;
   /** Indicates whether the column is sorted in descending order */
   isSortedDesc?: boolean;
-  /** Gets props related to sorting that will be passed to th */
+  /** Gets props related to sorting that will be passed to the sort button */
   getSortByToggleProps?: (...args: any[]) => Record<string, any>;
   /** Indicates whether a column is sortable */
   canSort?: boolean;
@@ -49,13 +49,31 @@ function TableHeaderCell({
   headerClassName,
 }: TableHeaderCellProps) {
   const toggleProps = canSort && getSortByToggleProps ? getSortByToggleProps() : {};
+  const ariaSort: React.AriaAttributes['aria-sort'] = isSorted
+    ? (isSortedDesc ? 'descending' : 'ascending')
+    : undefined;
+  const headerContentClassName = classNames('pgn__data-table-header-content', headerClassName);
 
   return (
-    <th {...getHeaderProps(toggleProps)}>
-      <span className={classNames('d-flex align-items-center', headerClassName)}>
-        <span>{render('Header')}</span>
-        {canSort && <SortIndicator isSorted={isSorted} isSortedDesc={isSortedDesc || false} />}
-      </span>
+    <th {...getHeaderProps()} scope="col" aria-sort={ariaSort}>
+      {canSort ? (
+        <button
+          {...toggleProps}
+          type="button"
+          className={classNames(
+            'pgn__data-table-sort-button',
+            headerContentClassName,
+            toggleProps.className,
+          )}
+        >
+          <span>{render('Header')}</span>
+          <SortIndicator isSorted={isSorted} isSortedDesc={isSortedDesc || false} />
+        </button>
+      ) : (
+        <span className={headerContentClassName}>
+          <span>{render('Header')}</span>
+        </span>
+      )}
     </th>
   );
 }
diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
index 4292f5bde38..e3e4ebe2648 100644
--- a/src/DataTable/index.scss
+++ b/src/DataTable/index.scss
@@ -148,6 +148,22 @@
     text-align: start;
   }
 
+  .pgn__data-table-header-content {
+    display: flex;
+    align-items: center;
+  }
+
+  .pgn__data-table-sort-button {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    padding: 0;
+    text-align: inherit;
+    width: 100%;
+  }
+
   td {
     padding: var(--pgn-spacing-data-table-padding-cell);
     line-height: 24px;
diff --git a/src/DataTable/tests/TableHeaderCell.test.jsx b/src/DataTable/tests/TableHeaderCell.test.jsx
index 89ac45f1841..944907ae9c3 100644
--- a/src/DataTable/tests/TableHeaderCell.test.jsx
+++ b/src/DataTable/tests/TableHeaderCell.test.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import TableHeaderCell from '../TableHeaderCell';
 
-const sortByToggleProps = { foo: 'bar' };
+const sortByToggleProps = { 'data-sort-prop': 'bar' };
 const props = {
   getHeaderProps: () => ({ className: 'red' }),
   render: () => 'Title',
@@ -20,21 +21,35 @@ function FakeTable({ ...rest }) {
 
 describe('<TableHeaderCell />', () => {
   describe('unsorted', () => {
-    render(<FakeTable {...props} />);
-    const cell = screen.getByRole('columnheader');
-    const innerCell = cell.firstChild;
-
     it('renders a table header cell', () => {
+      render(<FakeTable {...props} />);
+      const cell = screen.getByRole('columnheader');
       expect(cell).toBeInTheDocument();
     });
 
     it('adds props to the cell', () => {
+      render(<FakeTable {...props} />);
+      const cell = screen.getByRole('columnheader');
       expect(cell.className).toBe('red');
     });
 
+    it('adds column scope to the cell', () => {
+      render(<FakeTable {...props} />);
+      const cell = screen.getByRole('columnheader');
+      expect(cell).toHaveAttribute('scope', 'col');
+    });
+
     it('adds the headerClassName to inner span', () => {
+      render(<FakeTable {...props} />);
+      const cell = screen.getByRole('columnheader');
+      const innerCell = cell.firstChild;
       expect(innerCell.className).toContain(props.headerClassName);
     });
+
+    it('does not render a button for non-sortable headers', () => {
+      render(<FakeTable {...props} />);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
   });
 
   describe('with sorting', () => {
@@ -56,10 +71,55 @@ describe('<TableHeaderCell />', () => {
       expect(sortIndicator).toBeInTheDocument();
     });
 
-    it('adds the toggle props to the header props if toggle props are available', () => {
+    it('renders the sort toggle as a button', () => {
+      render(<FakeTable {...props} canSort />);
+      expect(screen.getByRole('button', { name: 'Title' })).toBeInTheDocument();
+    });
+
+    it('adds ascending sort state to the header cell when sorted ascending', () => {
+      render(<FakeTable {...props} canSort isSorted />);
+      const cell = screen.getByRole('columnheader');
+      expect(cell).toHaveAttribute('aria-sort', 'ascending');
+    });
+
+    it('adds descending sort state to the header cell when sorted descending', () => {
+      render(<FakeTable {...props} canSort isSorted isSortedDesc />);
+      const cell = screen.getByRole('columnheader');
+      expect(cell).toHaveAttribute('aria-sort', 'descending');
+    });
+
+    it('does not add inactive sort state to unsorted header cells', () => {
+      render(<FakeTable {...props} canSort />);
+      const cell = screen.getByRole('columnheader');
+      expect(cell).not.toHaveAttribute('aria-sort');
+    });
+
+    it('adds the toggle props to the sort button if toggle props are available', () => {
+      render(<FakeTable {...props} canSort />);
+      const button = screen.getByRole('button', { name: 'Title' });
+      expect(button).toHaveAttribute('data-sort-prop', sortByToggleProps['data-sort-prop']);
+    });
+
+    it('does not pass toggle props to the header props', () => {
       const headerPropsSpy = jest.fn().mockReturnValueOnce({});
       render(<FakeTable {...props} canSort getHeaderProps={headerPropsSpy} />);
-      expect(headerPropsSpy).toHaveBeenCalledWith(sortByToggleProps);
+      expect(headerPropsSpy).toHaveBeenCalledWith();
+    });
+
+    it('makes sortable headers keyboard reachable and operable', async () => {
+      const user = userEvent.setup();
+      const handleSort = jest.fn();
+      render(<FakeTable {...props} canSort getSortByToggleProps={() => ({ onClick: handleSort })} />);
+      const button = screen.getByRole('button', { name: 'Title' });
+
+      await user.tab();
+      expect(button).toHaveFocus();
+
+      await user.keyboard('{Enter}');
+      expect(handleSort).toHaveBeenCalledTimes(1);
+
+      await user.keyboard(' ');
+      expect(handleSort).toHaveBeenCalledTimes(2);
     });
   });
 });

From 2da6161837e418cffc6ebe2f4e844ec3448ea69f Mon Sep 17 00:00:00 2001
From: Eddie <ed.byun@schema.education>
Date: Thu, 18 Jun 2026 13:42:37 -0400
Subject: [PATCH 2/9] fix(datatable): avoid nested aria sort ternary

Co-authored-by: Codex <codex@openai.com>
---
 src/DataTable/TableHeaderCell.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/DataTable/TableHeaderCell.tsx b/src/DataTable/TableHeaderCell.tsx
index a88bd5d817c..0d606590d0a 100644
--- a/src/DataTable/TableHeaderCell.tsx
+++ b/src/DataTable/TableHeaderCell.tsx
@@ -49,9 +49,10 @@ function TableHeaderCell({
   headerClassName,
 }: TableHeaderCellProps) {
   const toggleProps = canSort && getSortByToggleProps ? getSortByToggleProps() : {};
-  const ariaSort: React.AriaAttributes['aria-sort'] = isSorted
-    ? (isSortedDesc ? 'descending' : 'ascending')
-    : undefined;
+  let ariaSort: React.AriaAttributes['aria-sort'];
+  if (isSorted) {
+    ariaSort = isSortedDesc ? 'descending' : 'ascending';
+  }
   const headerContentClassName = classNames('pgn__data-table-header-content', headerClassName);
 
   return (

From 597f22428c72bdd8e3d40ae58a3815c5dd6f52c1 Mon Sep 17 00:00:00 2001
From: Eddie <ed.byun@schema.education>
Date: Thu, 18 Jun 2026 13:59:27 -0400
Subject: [PATCH 3/9] fix(datatable): preserve sortable header hit target

Co-authored-by: Codex <codex@openai.com>
---
 src/DataTable/TableHeaderCell.tsx            | 11 ++++++++++-
 src/DataTable/index.scss                     |  7 ++++++-
 src/DataTable/tests/TableHeaderCell.test.jsx | 14 ++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/DataTable/TableHeaderCell.tsx b/src/DataTable/TableHeaderCell.tsx
index 0d606590d0a..8a5ebb6825c 100644
--- a/src/DataTable/TableHeaderCell.tsx
+++ b/src/DataTable/TableHeaderCell.tsx
@@ -48,6 +48,7 @@ function TableHeaderCell({
   isSortedDesc = false,
   headerClassName,
 }: TableHeaderCellProps) {
+  const headerProps = getHeaderProps();
   const toggleProps = canSort && getSortByToggleProps ? getSortByToggleProps() : {};
   let ariaSort: React.AriaAttributes['aria-sort'];
   if (isSorted) {
@@ -56,7 +57,15 @@ function TableHeaderCell({
   const headerContentClassName = classNames('pgn__data-table-header-content', headerClassName);
 
   return (
-    <th {...getHeaderProps()} scope="col" aria-sort={ariaSort}>
+    <th
+      {...headerProps}
+      scope="col"
+      aria-sort={ariaSort}
+      className={classNames(
+        headerProps.className,
+        { 'pgn__data-table-sortable-header': canSort },
+      )}
+    >
       {canSort ? (
         <button
           {...toggleProps}
diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
index e3e4ebe2648..23aab3dd76f 100644
--- a/src/DataTable/index.scss
+++ b/src/DataTable/index.scss
@@ -146,6 +146,10 @@
     background-color: var(--pgn-color-light-300);
     padding: var(--pgn-spacing-data-table-padding-cell);
     text-align: start;
+
+    &.pgn__data-table-sortable-header {
+      padding: 0;
+    }
   }
 
   .pgn__data-table-header-content {
@@ -159,9 +163,10 @@
     color: inherit;
     cursor: pointer;
     font: inherit;
-    padding: 0;
+    padding: var(--pgn-spacing-data-table-padding-cell);
     text-align: inherit;
     width: 100%;
+    box-sizing: border-box;
   }
 
   td {
diff --git a/src/DataTable/tests/TableHeaderCell.test.jsx b/src/DataTable/tests/TableHeaderCell.test.jsx
index 944907ae9c3..29eefaf5639 100644
--- a/src/DataTable/tests/TableHeaderCell.test.jsx
+++ b/src/DataTable/tests/TableHeaderCell.test.jsx
@@ -50,6 +50,12 @@ describe('<TableHeaderCell />', () => {
       render(<FakeTable {...props} />);
       expect(screen.queryByRole('button')).not.toBeInTheDocument();
     });
+
+    it('does not add sortable header styling to non-sortable headers', () => {
+      render(<FakeTable {...props} />);
+      const cell = screen.getByRole('columnheader');
+      expect(cell).not.toHaveClass('pgn__data-table-sortable-header');
+    });
   });
 
   describe('with sorting', () => {
@@ -76,6 +82,14 @@ describe('<TableHeaderCell />', () => {
       expect(screen.getByRole('button', { name: 'Title' })).toBeInTheDocument();
     });
 
+    it('adds sortable header styling to preserve the sort button hit target', () => {
+      render(<FakeTable {...props} canSort />);
+      const cell = screen.getByRole('columnheader');
+      const button = screen.getByRole('button', { name: 'Title' });
+      expect(cell).toHaveClass('pgn__data-table-sortable-header');
+      expect(button).toHaveClass('pgn__data-table-sort-button');
+    });
+
     it('adds ascending sort state to the header cell when sorted ascending', () => {
       render(<FakeTable {...props} canSort isSorted />);
       const cell = screen.getByRole('columnheader');

From 6f073959a743fe156855949915ee9c5415f28b70 Mon Sep 17 00:00:00 2001
From: Eddie <ed.byun@schema.education>
Date: Thu, 18 Jun 2026 14:07:35 -0400
Subject: [PATCH 4/9] test(datatable): cover sortable header sorting

Co-authored-by: Codex <codex@openai.com>
---
 src/DataTable/tests/DataTable.test.jsx | 34 +++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/DataTable/tests/DataTable.test.jsx b/src/DataTable/tests/DataTable.test.jsx
index d9131aa41b5..e6a95bd3a67 100644
--- a/src/DataTable/tests/DataTable.test.jsx
+++ b/src/DataTable/tests/DataTable.test.jsx
@@ -1,5 +1,7 @@
 import React, { useContext } from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import {
+  render, screen, waitFor, within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as reactTable from 'react-table';
 import { IntlProvider } from 'react-intl';
@@ -145,6 +147,36 @@ describe('<DataTable />', () => {
     expect(screen.getAllByRole('row')).toHaveLength(props.data.length + 1); // (need + 1 to include header row)
   });
 
+  it('sorts rows when activating a sortable header button', async () => {
+    const getNameColumnValues = () => screen.getAllByRole('row')
+      .slice(1)
+      .map(row => within(row).getAllByRole('cell')[0].textContent);
+
+    render(<DataTableWrapper {...props} isSortable />);
+
+    expect(getNameColumnValues()).toEqual([
+      'Lil Bub',
+      'Grumpy Cat',
+      'Smoothie',
+      'Maru',
+      'Keyboard Cat',
+      'Long Cat',
+      'Zeno',
+    ]);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Name' }));
+
+    await waitFor(() => expect(getNameColumnValues()).toEqual([
+      'Grumpy Cat',
+      'Keyboard Cat',
+      'Lil Bub',
+      'Long Cat',
+      'Maru',
+      'Smoothie',
+      'Zeno',
+    ]));
+  });
+
   it('displays a table footer', () => {
     render(<DataTableWrapper {...props} />);
     expect(screen.getByTestId('table-footer')).toBeInTheDocument();

From 3e321e937a49fd91023ab83eacdf818b21e320f5 Mon Sep 17 00:00:00 2001
From: Eddie <ed.byun@schema.education>
Date: Thu, 18 Jun 2026 14:16:10 -0400
Subject: [PATCH 5/9] docs(datatable): document sortable header intent

Co-authored-by: Codex <codex@openai.com>
---
 src/DataTable/TableHeaderCell.tsx | 1 +
 src/DataTable/index.scss          | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/DataTable/TableHeaderCell.tsx b/src/DataTable/TableHeaderCell.tsx
index 8a5ebb6825c..bd1dbad562c 100644
--- a/src/DataTable/TableHeaderCell.tsx
+++ b/src/DataTable/TableHeaderCell.tsx
@@ -50,6 +50,7 @@ function TableHeaderCell({
 }: TableHeaderCellProps) {
   const headerProps = getHeaderProps();
   const toggleProps = canSort && getSortByToggleProps ? getSortByToggleProps() : {};
+  // Per W3C guidance, only the actively sorted header should expose aria-sort.
   let ariaSort: React.AriaAttributes['aria-sort'];
   if (isSorted) {
     ariaSort = isSortedDesc ? 'descending' : 'ascending';
diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
index 23aab3dd76f..95bf9bc2f7c 100644
--- a/src/DataTable/index.scss
+++ b/src/DataTable/index.scss
@@ -147,6 +147,7 @@
     padding: var(--pgn-spacing-data-table-padding-cell);
     text-align: start;
 
+    // The button owns sortable header padding so the full visible header remains the sort hit target.
     &.pgn__data-table-sortable-header {
       padding: 0;
     }

From 2ad9ac34551a59ab1d9a4d4f60c371ea0ede4877 Mon Sep 17 00:00:00 2001
From: Eddie <ed.byun@schema.education>
Date: Thu, 18 Jun 2026 14:22:30 -0400
Subject: [PATCH 6/9] docs(datatable): clarify aria sort guidance

Co-authored-by: Codex <codex@openai.com>
---
 src/DataTable/TableHeaderCell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataTable/TableHeaderCell.tsx b/src/DataTable/TableHeaderCell.tsx
index bd1dbad562c..08d57fea8d0 100644
--- a/src/DataTable/TableHeaderCell.tsx
+++ b/src/DataTable/TableHeaderCell.tsx
@@ -50,7 +50,7 @@ function TableHeaderCell({
 }: TableHeaderCellProps) {
   const headerProps = getHeaderProps();
   const toggleProps = canSort && getSortByToggleProps ? getSortByToggleProps() : {};
-  // Per W3C guidance, only the actively sorted header should expose aria-sort.
+  // Per WAI-ARIA APG sortable table guidance, only the actively sorted header should expose aria-sort.
   let ariaSort: React.AriaAttributes['aria-sort'];
   if (isSorted) {
     ariaSort = isSortedDesc ? 'descending' : 'ascending';

From 14561abeda4fe08b5758c94a85dcbd6e40ad70bf Mon Sep 17 00:00:00 2001
From: Eddie <ed.byun@schema.education>
Date: Thu, 18 Jun 2026 15:58:36 -0400
Subject: [PATCH 7/9] fix(datatable): extend sortable header click target

Co-authored-by: Codex <codex@openai.com>
---
 src/DataTable/index.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
index 95bf9bc2f7c..3a52cf35b4c 100644
--- a/src/DataTable/index.scss
+++ b/src/DataTable/index.scss
@@ -150,6 +150,7 @@
     // The button owns sortable header padding so the full visible header remains the sort hit target.
     &.pgn__data-table-sortable-header {
       padding: 0;
+      position: relative;
     }
   }
 
@@ -168,6 +169,13 @@
     text-align: inherit;
     width: 100%;
     box-sizing: border-box;
+
+    // Extend pointer hit testing to the full sortable th when row height is set by another header cell.
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+    }
   }
 
   td {

From 24e6fa4da5c2843af0c2868ba82e6cd9c7d886dd Mon Sep 17 00:00:00 2001
From: Eddie <ed.byun@schema.education>
Date: Thu, 18 Jun 2026 16:17:29 -0400
Subject: [PATCH 8/9] fix(datatable): preserve header prop targets

Co-authored-by: Codex <codex@openai.com>
---
 src/DataTable/TableHeaderCell.tsx            | 10 ++++++----
 src/DataTable/tests/TableHeaderCell.test.jsx |  7 +++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/DataTable/TableHeaderCell.tsx b/src/DataTable/TableHeaderCell.tsx
index 08d57fea8d0..ff752640930 100644
--- a/src/DataTable/TableHeaderCell.tsx
+++ b/src/DataTable/TableHeaderCell.tsx
@@ -48,7 +48,7 @@ function TableHeaderCell({
   isSortedDesc = false,
   headerClassName,
 }: TableHeaderCellProps) {
-  const headerProps = getHeaderProps();
+  const { key, ...headerProps } = getHeaderProps();
   const toggleProps = canSort && getSortByToggleProps ? getSortByToggleProps() : {};
   // Per WAI-ARIA APG sortable table guidance, only the actively sorted header should expose aria-sort.
   let ariaSort: React.AriaAttributes['aria-sort'];
@@ -59,6 +59,7 @@ function TableHeaderCell({
 
   return (
     <th
+      key={key}
       {...headerProps}
       scope="col"
       aria-sort={ariaSort}
@@ -73,12 +74,13 @@ function TableHeaderCell({
           type="button"
           className={classNames(
             'pgn__data-table-sort-button',
-            headerContentClassName,
             toggleProps.className,
           )}
         >
-          <span>{render('Header')}</span>
-          <SortIndicator isSorted={isSorted} isSortedDesc={isSortedDesc || false} />
+          <span className={headerContentClassName}>
+            <span>{render('Header')}</span>
+            <SortIndicator isSorted={isSorted} isSortedDesc={isSortedDesc || false} />
+          </span>
         </button>
       ) : (
         <span className={headerContentClassName}>
diff --git a/src/DataTable/tests/TableHeaderCell.test.jsx b/src/DataTable/tests/TableHeaderCell.test.jsx
index 29eefaf5639..7b656ec9343 100644
--- a/src/DataTable/tests/TableHeaderCell.test.jsx
+++ b/src/DataTable/tests/TableHeaderCell.test.jsx
@@ -90,6 +90,13 @@ describe('<TableHeaderCell />', () => {
       expect(button).toHaveClass('pgn__data-table-sort-button');
     });
 
+    it('adds headerClassName to sortable header content', () => {
+      render(<FakeTable {...props} canSort />);
+      const button = screen.getByRole('button', { name: 'Title' });
+      expect(button).not.toHaveClass(props.headerClassName);
+      expect(button.firstChild).toHaveClass(props.headerClassName);
+    });
+
     it('adds ascending sort state to the header cell when sorted ascending', () => {
       render(<FakeTable {...props} canSort isSorted />);
       const cell = screen.getByRole('columnheader');

From c2cc03cd16c1fcb5d8db14d036da2d8f318efdc8 Mon Sep 17 00:00:00 2001
From: Eddie <ed.byun@schema.education>
Date: Thu, 18 Jun 2026 18:34:45 -0400
Subject: [PATCH 9/9] fix(datatable): avoid header row key spreads

Co-authored-by: Codex <codex@openai.com>
---
 src/DataTable/TableHeaderRow.jsx            | 26 +++++++++------
 src/DataTable/tests/TableHeaderRow.test.jsx | 35 ++++++++++++++++++---
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/DataTable/TableHeaderRow.jsx b/src/DataTable/TableHeaderRow.jsx
index 04188ddec98..7aba3d64f56 100644
--- a/src/DataTable/TableHeaderRow.jsx
+++ b/src/DataTable/TableHeaderRow.jsx
@@ -5,13 +5,21 @@ import TableHeaderCell from './TableHeaderCell';
 function TableHeaderRow({ headerGroups }) {
   return (
     <thead>
-      {headerGroups.map(headerGroup => (
-        <tr {...headerGroup.getHeaderGroupProps()}>
-          {headerGroup.headers.map(column => (
-            <TableHeaderCell {...column} {...column.getHeaderProps()} />
-          ))}
-        </tr>
-      ))}
+      {headerGroups.map((headerGroup) => {
+        const { key: headerGroupKey, ...headerGroupProps } = headerGroup.getHeaderGroupProps();
+
+        return (
+          <tr key={headerGroupKey} {...headerGroupProps}>
+            {headerGroup.headers.map((column) => {
+              const { key: headerKey } = column.getHeaderProps();
+
+              return (
+                <TableHeaderCell key={headerKey} {...column} />
+              );
+            })}
+          </tr>
+        );
+      })}
     </thead>
   );
 }
@@ -19,10 +27,10 @@ function TableHeaderRow({ headerGroups }) {
 TableHeaderRow.propTypes = {
   headerGroups: PropTypes.arrayOf(PropTypes.shape({
     headers: PropTypes.arrayOf(PropTypes.shape({
-      /** Props for the TableHeaderCell component. Must include a key */
+      /** Props for the TableHeaderCell component. Must include a React key */
       getHeaderProps: PropTypes.func.isRequired,
     })).isRequired,
-    /** Returns props for the header tr element */
+    /** Returns props for the header tr element. Must include a React key */
     getHeaderGroupProps: PropTypes.func.isRequired,
   })).isRequired,
 };
diff --git a/src/DataTable/tests/TableHeaderRow.test.jsx b/src/DataTable/tests/TableHeaderRow.test.jsx
index feccb65511e..33e7a040d31 100644
--- a/src/DataTable/tests/TableHeaderRow.test.jsx
+++ b/src/DataTable/tests/TableHeaderRow.test.jsx
@@ -31,24 +31,51 @@ const props = {
   }],
 };
 
-describe('<TableHeaderRow />', () => {
+function renderTableHeaderRow() {
   render(<table><TableHeaderRow {...props} /></table>);
-  const head = screen.getByRole('rowgroup');
-  const row = screen.getByRole('row');
-  const cells = screen.getAllByRole('columnheader');
+}
 
+describe('<TableHeaderRow />', () => {
   it('renders a table head and row', () => {
+    renderTableHeaderRow();
+
+    const head = screen.getByRole('rowgroup');
+    const row = screen.getByRole('row');
+
     expect(head).toBeInTheDocument();
     expect(row).toBeInTheDocument();
   });
 
   it('adds props to the row', () => {
+    renderTableHeaderRow();
+
+    const row = screen.getByRole('row');
+
     expect(row.className).toEqual('red');
   });
 
   it('renders cells', () => {
+    renderTableHeaderRow();
+
+    const cells = screen.getAllByRole('columnheader');
+
     expect(cells.length).toEqual(2);
     expect(cells[0]).toHaveTextContent(header1Name);
     expect(cells[1]).toHaveTextContent(header2Name);
   });
+
+  it('does not spread React keys from react-table prop getters', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    try {
+      renderTableHeaderRow();
+
+      const keySpreadWarning = consoleError.mock.calls.some(([message]) => (
+        String(message).includes('A props object containing a "key" prop')
+      ));
+      expect(keySpreadWarning).toEqual(false);
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
 });