feat(Table): allow extra content to be appended to th

Author: kmcfaul

packages/react-table/src/components/Table/Th.tsx

@@ -65,6 +65,8 @@ export interface ThProps
    * content, such as a "select all" checkbox or "expand all" toggle.
    */
   'aria-label'?: string;
+  /** Additional content to render in the column header, appended to the end of the header content. */
+  additionalContent?: React.ReactNode;
 }
 
 const ThBase: React.FunctionComponent<ThProps> = ({
@@ -94,6 +96,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   isSubheader = false,
   screenReaderText,
   'aria-label': ariaLabel,
+  additionalContent,
   ...props
 }: ThProps) => {
   const { variant } = useContext(TableContext);
@@ -241,6 +244,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
     >
       {transformedChildren ||
         (screenReaderText && <span className={accessibilityStyles.screenReader}>{screenReaderText}</span>)}
+      {additionalContent && additionalContent}
     </MergedComponent>
   );
 

packages/react-table/src/components/Table/__tests__/Th.test.tsx

@@ -28,3 +28,29 @@ test('Renders with screen reader text when screenReaderText is passed in', () =>
 
   expect(screen.getByRole('columnheader')).toHaveTextContent('Test');
 });
+
+test('Does not render with additional content by default', () => {
+  render(<Th />);
+
+  expect(screen.getByRole('columnheader')).toBeEmptyDOMElement();
+});
+
+test('Render with additional content when additionalContent is passed in', () => {
+  render(<Th additionalContent={<div>Extra</div>}>Test</Th>);
+
+  expect(screen.getByRole('columnheader')).toHaveTextContent('Extra');
+});
+
+test('Additional content renders after children when additionalContent is passed in', () => {
+  render(
+    <Th additionalContent={<div>Extra</div>}>
+      <div>Test</div>
+    </Th>
+  );
+
+  const th = screen.getByRole('columnheader');
+  const thChildren = th.children;
+
+  expect(thChildren.item(0)?.textContent).toEqual('Test');
+  expect(thChildren.item(1)?.textContent).toEqual('Extra');
+});