aws-amplify / aws-amplify/amplify-ui

TableCell throws warnings on rowspan and colspan usage

Open
#4,284 1 comment 0 reactions 0 assignees View on GitHub
bug Primitive React
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

### Before creating a new issue, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).

### On which framework/platform are you having an issue?

React

### Which UI component?

Primitive components

### How is your app built?

Create React App

### What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari

### Which region are you seeing the problem in?

_No response_

### Please describe your bug.

Getting errors when trying to use Table with rowspan following the example here: https://ui.docs.amplify.aws/react/components/table#spanning-multiple-columns-or-rows

```
Warning: Invalid DOM property `rowspan`. Did you mean `rowSpan`?
```
The table renders correctly, but the errors in the console should not be there.

I tried changing to `rowSpan` but that does not merge the rows as `rowspan` does.

### What's the expected behaviour?

The table renders without errors in the console

### Help us reproduce the bug!

run this example: https://ui.docs.amplify.aws/react/components/table#spanning-multiple-columns-or-rows

### Code Snippet
```
import { Table, TableBody, TableCell, TableRow } from '@aws-amplify/ui-react';

export const SpanExample = () => (






















);
```

### Console log output
```
Warning: Invalid DOM property `rowspan`. Did you mean `rowSpan`?
at td
at http://localhost:3006/static/js/bundle.js:244087:11
at http://localhost:3006/static/js/bundle.js:243601:11
at tr
at http://localhost:3006/static/js/bundle.js:244087:11
at http://localhost:3006/static/js/bundle.js:243678:17
at tbody
at http://localhost:3006/static/js/bundle.js:244087:11
at http://localhost:3006/static/js/bundle.js:243563:17
at table
```
### Additional information and screenshots

"@aws-amplify/ui-react": 5.0.3

Contributor guide

Open the contributing guide

Research direction

Start with the TableCell implementation and reproduce the warning using the spanning example in the Table documentation. Check how the example passes rowspan and colspan to the rendered table cells, then verify that the table still spans rows and columns and the browser console is warning-free.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.