Skip to content

Commit 8cc7994

Browse files
adamalstonadamalston
authored
fix(TableContainer): conditionally render header components (#18738)
1 parent 3fb4281 commit 8cc7994

File tree

3 files changed

+94
-28
lines changed

3 files changed

+94
-28
lines changed

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2023
2+
* Copyright IBM Corp. 2016, 2025
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -64,16 +64,22 @@ const TableContainer = ({
6464
return (
6565
<TableContext.Provider value={value}>
6666
<div {...rest} className={tableContainerClasses}>
67-
{title && (
67+
{(title || description) && (
6868
<div className={`${prefix}--data-table-header`}>
69-
<h4 className={`${prefix}--data-table-header__title`} id={titleId}>
70-
{title}
71-
</h4>
72-
<p
73-
className={`${prefix}--data-table-header__description`}
74-
id={descriptionId}>
75-
{description}
76-
</p>
69+
{title && (
70+
<h4
71+
className={`${prefix}--data-table-header__title`}
72+
id={titleId}>
73+
{title}
74+
</h4>
75+
)}
76+
{description && (
77+
<p
78+
className={`${prefix}--data-table-header__description`}
79+
id={descriptionId}>
80+
{description}
81+
</p>
82+
)}
7783
</div>
7884
)}
7985
{children}

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

Lines changed: 78 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2023
2+
* Copyright IBM Corp. 2016, 2025
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import { render } from '@testing-library/react';
8+
import { render, screen } from '@testing-library/react';
99
import React from 'react';
1010
import { TableContainer } from '../';
1111

@@ -31,4 +31,80 @@ describe('TableContainer', () => {
3131
const { container } = render(<TableContainer data-testid="test" />);
3232
expect(container.firstChild).toHaveAttribute('data-testid', 'test');
3333
});
34+
35+
describe('Header', () => {
36+
it('should render a header with only a `title`', () => {
37+
const title = 'Random title';
38+
39+
const { container } = render(
40+
<TableContainer title={title}>
41+
<div>Child content</div>
42+
</TableContainer>
43+
);
44+
45+
const headerEl = container.querySelector('[class*="data-table-header"]');
46+
const titleEl = headerEl.querySelector('h4');
47+
const descriptionEl = headerEl.querySelector('p');
48+
49+
expect(headerEl).toBeInTheDocument();
50+
expect(headerEl.childElementCount).toBe(1);
51+
expect(titleEl).toHaveTextContent(title);
52+
expect(descriptionEl).toBeNull();
53+
});
54+
55+
it('should render a header with only a `description`', () => {
56+
const description = 'Random description';
57+
58+
const { container } = render(
59+
<TableContainer description={description}>
60+
<div>Child content</div>
61+
</TableContainer>
62+
);
63+
64+
const headerEl = container.querySelector('[class*="data-table-header"]');
65+
const titleEl = headerEl.querySelector('h4');
66+
const descriptionEl = headerEl.querySelector('p');
67+
68+
expect(headerEl).toBeInTheDocument();
69+
expect(headerEl.childElementCount).toBe(1);
70+
expect(descriptionEl).toHaveTextContent(description);
71+
expect(titleEl).toBeNull();
72+
});
73+
74+
it('should render a header with both a `title` and a `description`', () => {
75+
const title = 'Random title';
76+
const description = 'Random description';
77+
78+
const { container } = render(
79+
<TableContainer title={title} description={description}>
80+
<div>Child content</div>
81+
</TableContainer>
82+
);
83+
84+
const headerEl = container.querySelector('[class*="data-table-header"]');
85+
const titleEl = headerEl.querySelector('h4');
86+
const descriptionEl = headerEl.querySelector('p');
87+
88+
expect(headerEl).toBeInTheDocument();
89+
expect(headerEl.childElementCount).toBe(2);
90+
expect(titleEl).toHaveTextContent(title);
91+
expect(headerEl.firstChild).toHaveTextContent(title);
92+
expect(descriptionEl).toHaveTextContent(description);
93+
expect(headerEl.lastChild).toHaveTextContent(description);
94+
});
95+
96+
it('should not render a header when neither a `title` nor a `description` is provided', () => {
97+
const { container } = render(
98+
<TableContainer>
99+
<div data-testid="child-content">Child content</div>
100+
</TableContainer>
101+
);
102+
103+
const headerEl = container.querySelector('[class*="data-table-header"]');
104+
const childContent = screen.getByTestId('child-content');
105+
106+
expect(childContent).toHaveTextContent('Child content');
107+
expect(headerEl).not.toBeInTheDocument();
108+
});
109+
});
34110
});

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
1414
>
1515
DataTable with selection
1616
</h4>
17-
<p
18-
class="cds--data-table-header__description"
19-
id="tc-:r7g:-description"
20-
/>
2117
</div>
2218
<div
2319
class="cds--data-table-content"
@@ -192,10 +188,6 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
192188
>
193189
DataTable with selection
194190
</h4>
195-
<p
196-
class="cds--data-table-header__description"
197-
id="tc-:r77:-description"
198-
/>
199191
</div>
200192
<div
201193
class="cds--data-table-content"
@@ -370,10 +362,6 @@ exports[`DataTable behaves as expected selection should render and match snapsho
370362
>
371363
DataTable with selection
372364
</h4>
373-
<p
374-
class="cds--data-table-header__description"
375-
id="tc-:r2k:-description"
376-
/>
377365
</div>
378366
<section
379367
aria-label="data table toolbar"
@@ -819,10 +807,6 @@ exports[`DataTable renders as expected - Component API should render and match s
819807
>
820808
DataTable with toolbar
821809
</h4>
822-
<p
823-
class="cds--data-table-header__description"
824-
id="tc-:re:-description"
825-
/>
826810
</div>
827811
<section
828812
aria-label="data table toolbar"

0 commit comments

Comments
 (0)