fix(TableContainer): conditionally render header components

packages/react/src/components/DataTable/TableContainer.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -64,16 +64,22 @@ const TableContainer = ({
   return (
     <TableContext.Provider value={value}>
       <div {...rest} className={tableContainerClasses}>
-        {title && (
+        {(title || description) && (
           <div className={`${prefix}--data-table-header`}>
-            <h4 className={`${prefix}--data-table-header__title`} id={titleId}>
-              {title}
-            </h4>
-            <p
-              className={`${prefix}--data-table-header__description`}
-              id={descriptionId}>
-              {description}
-            </p>
+            {title && (
+              <h4
+                className={`${prefix}--data-table-header__title`}
+                id={titleId}>
+                {title}
+              </h4>
+            )}
+            {description && (
+              <p
+                className={`${prefix}--data-table-header__description`}
+                id={descriptionId}>
+                {description}
+              </p>
+            )}
           </div>
         )}
         {children}

packages/react/src/components/DataTable/__tests__/TableContainer-test.js

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { TableContainer } from '../';
 
@@ -31,4 +31,80 @@ describe('TableContainer', () => {
     const { container } = render(<TableContainer data-testid="test" />);
     expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
+
+  describe('Header', () => {
+    it('should render a header with only a `title`', () => {
+      const title = 'Random title';
+
+      const { container } = render(
+        <TableContainer title={title}>
+          <div>Child content</div>
+        </TableContainer>
+      );
+
+      const headerEl = container.querySelector('[class*="data-table-header"]');
+      const titleEl = headerEl.querySelector('h4');
+      const descriptionEl = headerEl.querySelector('p');
+
+      expect(headerEl).toBeInTheDocument();
+      expect(headerEl.childElementCount).toBe(1);
+      expect(titleEl).toHaveTextContent(title);
+      expect(descriptionEl).toBeNull();
+    });
+
+    it('should render a header with only a `description`', () => {
+      const description = 'Random description';
+
+      const { container } = render(
+        <TableContainer description={description}>
+          <div>Child content</div>
+        </TableContainer>
+      );
+
+      const headerEl = container.querySelector('[class*="data-table-header"]');
+      const titleEl = headerEl.querySelector('h4');
+      const descriptionEl = headerEl.querySelector('p');
+
+      expect(headerEl).toBeInTheDocument();
+      expect(headerEl.childElementCount).toBe(1);
+      expect(descriptionEl).toHaveTextContent(description);
+      expect(titleEl).toBeNull();
+    });
+
+    it('should render a header with both a `title` and a `description`', () => {
+      const title = 'Random title';
+      const description = 'Random description';
+
+      const { container } = render(
+        <TableContainer title={title} description={description}>
+          <div>Child content</div>
+        </TableContainer>
+      );
+
+      const headerEl = container.querySelector('[class*="data-table-header"]');
+      const titleEl = headerEl.querySelector('h4');
+      const descriptionEl = headerEl.querySelector('p');
+
+      expect(headerEl).toBeInTheDocument();
+      expect(headerEl.childElementCount).toBe(2);
+      expect(titleEl).toHaveTextContent(title);
+      expect(headerEl.firstChild).toHaveTextContent(title);
+      expect(descriptionEl).toHaveTextContent(description);
+      expect(headerEl.lastChild).toHaveTextContent(description);
+    });
+
+    it('should not render a header when neither a `title` nor a `description` is provided', () => {
+      const { container } = render(
+        <TableContainer>
+          <div data-testid="child-content">Child content</div>
+        </TableContainer>
+      );
+
+      const headerEl = container.querySelector('[class*="data-table-header"]');
+      const childContent = screen.getByTestId('child-content');
+
+      expect(childContent).toHaveTextContent('Child content');
+      expect(headerEl).not.toBeInTheDocument();
+    });
+  });
 });

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -14,10 +14,6 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
       >
         DataTable with selection
       </h4>
-      <p
-        class="cds--data-table-header__description"
-        id="tc-:r71:-description"
-      />
     </div>
     <div
       class="cds--data-table-content"
@@ -192,10 +188,6 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
       >
         DataTable with selection
       </h4>
-      <p
-        class="cds--data-table-header__description"
-        id="tc-:r6o:-description"
-      />
     </div>
     <div
       class="cds--data-table-content"
@@ -370,10 +362,6 @@ exports[`DataTable behaves as expected selection should render and match snapsho
       >
         DataTable with selection
       </h4>
-      <p
-        class="cds--data-table-header__description"
-        id="tc-:r2e:-description"
-      />
     </div>
     <section
       aria-label="data table toolbar"
@@ -819,10 +807,6 @@ exports[`DataTable renders as expected - Component API should render and match s
       >
         DataTable with toolbar
       </h4>
-      <p
-        class="cds--data-table-header__description"
-        id="tc-:rd:-description"
-      />
     </div>
     <section
       aria-label="data table toolbar"