fix(TableContainer): conditionally render header components

[adamalston]

Closes #18134

Rendered TableContainer header components conditionally.

Changelog

Changed

• Rendered TableContainer header components conditionally.

Testing / Reviewing

yarn test packages/react/src/components/DataTable

Does anyone know if the following code should be updated to make the padding all fhte way around the container uniform?

carbon/packages/styles/scss/components/data-table/_data-table.scss

Line 52 in 448a2b7

padding-block: $spacing-05 $spacing-06;

Test story:

export const _test = () => {
  const headers = [
    { key: 'name', header: 'Name' },
    { key: 'protocol', header: 'Protocol' },
    { key: 'port', header: 'Port' },
    { key: 'rule', header: 'Rule' },
    { key: 'attached_groups', header: 'Attached groups' },
    { key: 'status', header: 'Status' },
  ];

  const genRows = () => [
    {
      id: crypto.randomUUID(),
      name: crypto.randomUUID(),
      protocol: 'HTTP',
      port: 3000,
      rule: 'Round robin',
      attached_groups: 'Gateway',
      status: <a href="#">Status</a>,
    },
  ];

  const renderTable = () => (
    <Table aria-label="sample table">
      <TableHead>
        <TableRow>
          {headers.map(({ header, key }) => (
            <TableHeader id={key} key={key}>
              {header}
            </TableHeader>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {genRows().map((row) => (
          <TableRow key={row.id}>
            {Object.keys(row).reduce(
              (acc, key) => [
                ...acc,
                key === 'id' ? null : (
                  <TableCell key={key}>{row[key]}</TableCell>
                ),
              ],
              []
            )}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );

  return (
    <div style={{ display: 'flex', gap: '2rem', flexDirection: 'column' }}>
      <div>
        Title and description
        <TableContainer
          title="Container title"
          description="Container description">
          {renderTable()}
        </TableContainer>
      </div>
      <div>
        Title
        <TableContainer title="Container title">{renderTable()}</TableContainer>
      </div>
      <div>
        Description
        <TableContainer description="Container description">
          {renderTable()}
        </TableContainer>
      </div>
      <div>
        No title or description
        <TableContainer>{renderTable()}</TableContainer>
      </div>
    </div>
  );
};

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	3159c31
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67c48428b8f5c400082d0fb0
😎 Deploy Preview	https://deploy-preview-18738--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	3159c31
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67c484280035de0008713fc0
😎 Deploy Preview	https://deploy-preview-18738--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3159c31
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67c48428e3d8330008c29335
😎 Deploy Preview	https://deploy-preview-18738--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.34%. Comparing base (448a2b7) to head (3159c31).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18738   +/-   ##
=======================================
  Coverage   84.34%   84.34%           
=======================================
  Files         408      408           
  Lines       14645    14649    +4     
  Branches     4771     4795   +24     
=======================================
+ Hits        12352    12356    +4     
+ Misses       2132     2131    -1     
- Partials      161      162    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kennylam]

@adamalston I can't answer the question in your original issue about whether title should be optional, but it looks like the table header spacing at least is correct https://carbondesignsystem.com/components/data-table/style/#structure.

[adamalston]

Sounds good, thanks.