adobe
Include colSpan values, while comparing the actual cell values with header columns count.
Provide a general summary of the issue here
Unable to make cell span over multiple columns headers
🤔 Expected Behavior?
Must pass the column length and cell count validation here, and render the table
😯 Current Behavior
Due to strict cell count (excluding colSpan) and column headers count, it is throwing an error
💁 Possible Solution
Include colSpan count while comparing with column headers vice-versa
🔦 Context
I have a requirement, where the UI needs to merge two columns into one in header, while maintaing two individula cells under same column header.
Plain HTML Example my usecase:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
</body>
</html>
It seems to be achievable at this stage.
🖥️ Steps to Reproduce
TODO
Version
@react-aria/[email protected]
What browsers are you seeing the problem on?
Firefox, Chrome
If other, please specify.
No response
What operating system are you using?
OSx
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
We don't support this at the moment. Seems like a reasonable request, though may be difficult to implement due to the information needed in the columns as well as in the rows. We'll need to discuss API for it.
Support for this is pretty crucial for us @lightspeed 😄 We may be able to assist if necessary!
That'd be great. We took a look at this today and noticed the description on the issue logged against us is different than the description in the linked issue on NextUI. Before starting, we'd like clarification about what is actually needed. Is it a cell that spans multiple columns or a column which spans multiple cells?
<td colspan...
vs
<th colspan...
We hope that it's the cell spanning multiple columns as the other one is more complicated we believe.
Things that will need some extra consideration while implementing:
- TableKeyboardDelegate getKeyAbove/Below, columns in the collection are organized differently than rows in the collection
- Do not worry about Spectrum's TableView component, it should continue to work as is
- Resizing, scenario 1 may not be an issue, but definitely would be for scenario 2
Thankfully we are looking for a cell that spans multiple columns. <td colspan.... We use this in conjunction with Expandable rows. We are using the entire react-aria suite for our new design system are now onto useTable for our table needs.
Here is a crude example in paint
I managed to hack expandable rows together with #4758 as a guideline using UNSTABLE_useTreeGridState and looking at spectrum's TableViewWrapper. It doesn't play well with selecting rows, but that is expected of an undocumented alpha api 🙂
Great, I think we can start by creating this with a colspan prop on Cells. Would you like to get this started?
I am also curious about this. Are there any workarounds I could apply to create expandable rows as @kysley suggested?
@kysley 's paint picture explains exactly the behavior we would need also. Is there some progress on this issue yet? And I would be very grateful for any more explained workaround for this.
