[Bug]: TableExpandRow throws an error for more required props

[AlvinChacko]

Package

@carbon/react

Browser

Firefox

Package version

v1.52

React version

v16.12.0

Description

When adding the TableExpandRow in a ts file like the example provided with getRowProps it still requires more required props.

 <TableExpandRow { ...getRowProps({row}) } >

Error:

Type '{ children: (Element | Element[])[]; ariaLabel: string; "aria-label": string; disabled: boolean; isExpanded?: boolean; isSelected?: boolean; key: string; onExpand: (e: MouseEvent) => void; }' is not assignable to type 'TableExpandRowProps'.

It happens to multiple components in the TS file configuration. Check the stackblitz for an example.

Reproduction/example

https://stackblitz.com/edit/github-zacbic?file=src%2FApp.tsx&preset=node=

Steps to reproduce

Just create a TS file and import the DataTable and the require components. Render the table with TableExpandRow and the error will be shown

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[oliver-wymer]

I'm seeing the same problem here but with a slightly different scenario:

<DataTable
            headers={mapTableHeaders}
            rows={dataWithID}
            render={({ rows, headers, getHeaderProps, getRowProps }) => {
              return (
                <TableContainer>
                  {isFetching ? (
                    <DataTableSkeleton
                      className="table-skeleton"
                      showHeader={false}
                      showToolbar={false}
                      headers={headers}
                      columnCount={2}
                    />
                  ) : (
                    <Table>
                      <TableHead>
                        <TableRow>
                          {headers.map((header) => (
                            <TableHeader
                              {...getHeaderProps({ header })}
                              key={header.key}
                            >
                              {header.header}
                            </TableHeader>
                          ))}
                        </TableRow>
                      </TableHead>
                      <TableBody>
                        {rows.map((row) => (
                          <TableRow {...getRowProps({ row })} key={row.key}>
                            {row.cells.map((cell) => (
                              <TableCell key={cell.key}>{cell.value}</TableCell>
                            ))}
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  )}
                </TableContainer>
              )
            }}
          />

The following section:

<TableHeader
    {...getHeaderProps({ header })}
    key={header.key}
>

Is giving type error:

Type '{ children: ReactNode; key: string; isSortable: boolean | undefined; isSortHeader: boolean; onClick: (e: MouseEvent) => void; sortDirection: DataTableSortState; }' is not assignable to type 'TableHeaderProps'.
  Types of property 'onClick' are incompatible.
    Type '(e: MouseEvent) => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.
      Types of parameters 'e' and 'event' are incompatible.
        Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is missing the following properties from type 'MouseEvent': layerX, layerY, offsetX, offsetY, and 16 more.ts(2322)