Include colSpan values, while comparing the actual cell values with header columns count.

awkward-minion commented 11 months ago

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/table@3.13.1

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

snowystinger commented 11 months ago

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.

awkward-minion commented 11 months ago

Thank you for quick response. Thank you @snowystinger 😊

kysley commented 10 months ago

Support for this is pretty crucial for us @lightspeed 😄 We may be able to assist if necessary!

snowystinger commented 10 months ago

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

kysley commented 10 months ago

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 🙂

snowystinger commented 10 months ago

Great, I think we can start by creating this with a colspan prop on Cells. Would you like to get this started?

nonken commented 3 months ago

I am also curious about this. Are there any workarounds I could apply to create expandable rows as @kysley suggested?

adneforslund commented 2 months ago

Any news on this?

adobe / react-spectrum