DataTable header rendering is not aligned properly

[ThinkOpenly]

[DataTable improper header rendering]: render of DataTable header is poorly aligned, especially with TableExpandRow

Detailed description

Describe in detail the issue you're having.

I want to render a simple DataTable with 3 columns, and each row being a TableExpandRow. The rendering has the header for the first column directly above the "expando", the 2nd column header directly above the 1st column data, etc. From CodeSandbox, I can provide a screenshot upon request.

Is this issue related to a specific component?

DataTable, TableExpandRos

What did you expect to happen? What happened instead? What would you like to see changed?

Align column headers with columnar data.

What browser are you working in?

Chrome Version 74.0.3729.108 (Official Build) (64-bit)

What version of the Carbon Design System are you using?

Whatever is currently offered when clicking on the "CodeSandbox" link in the README (https://codesandbox.io/s/github/IBM/carbon-components-react/tree/master/examples/codesandbox):

• carbon-components 10.1.0
• carbon-components-react 7.0.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

It's a mock-up of a new interactive version of the IBM Power Instruction Set Architecture Reference. No release date.

Steps to reproduce the issue

Please create a reduced test case in CodeSandbox https://codesandbox.io/s/github/IBM/carbon-components-react/tree/master/examples/codesandbox https://codesandbox.io/s/0xlzqrjrzw

Additional information

• Screenshots or code Is it possible to include screenshots here??

  <div className="searchContainer">
  <DataTable rows={[{
    id: 'lbz',
    name: 'Load Byte with Zero',
    form: 'D-Form'
  },{
    id: 'lwz',
    name: 'Load Word with Zero',
    form: 'X-Form'
  }]}
  headers = {[
    { key: 'id', header: "Mnemonic" },
    { key: 'name', header: "Name" },
    { key: 'form', header: "Form" }
  ]}
  size={null}
  render={({
    rows,
    headers,
    getHeaderProps,
    getRowProps,
    getTableProps,
    onInputChange
  }) => (
    <div>
      <Table>
        <TableHead>
          <tr>
            {headers.map(header => (
              <TableHeader
                {...getHeaderProps({
                  header
                })}
              >
              {header.header}
              </TableHeader>
            ))}
           </tr>
         </TableHead>
         <TableBody>
           {rows.map(row => (
             <React.Fragment key={row.id}>
             <TableExpandRow {...getRowProps({ row })}>
               {row.cells.map(cell => (
                 <TableCell key={cell.id}>{cell.value}</TableCell>
               ))}
               </TableExpandRow>
                 {/* toggle based off of if the row is expanded. If it is, render TableExpandedRow */}
                 {row.isExpanded && (
                   <TableExpandedRow colSpan={headers.length + 1}>
                     <h1>Expandable row content</h1>
                     <p>Description here</p>
                     </TableExpandedRow>
                   )}
             </React.Fragment>
          ))}
        </TableBody>
      </Table>
    </div>
  )}
  />
  </div>

• Notes I am not an expert on any of this, so apologies if I'm doing something fundamentally wrong. :-/

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[ThinkOpenly]

User [not-a-bot] noting that it's stale because Developer [not-a-bot] hasn't done anything with it! ;-)

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[asudoh]

Just noticed this - In the CodeSandbox link, <TableExpandHeader /> is missing in the <tr> in <TableHead>.