fix(datatable): preserve header prop targets

Co-authored-by: Codex <codex@openai.com>

Author: edschema

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}>

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');