Feature Request: How can we handle rowspan and colspan
onesinus opened this issue · 4 comments
Hi @onesinus
This is something I was keen on doing as well. Unfortunately, there's no easy and trivial way to do that yet.
Even the primitive react-virtualized and react-window libraries don't support this feature yet.
See:
bvaughn/react-virtualized#123
bvaughn/react-window#60 (comment)
However, I'm still hopeful that I can find a way to do at least one of colspan
and rowspan
. I'll leave this issue open for now, and do some digging into the concepts to see if we can see some light.
I think we really need a virtualized grid component in react, that supports colSpan
, rowSpan
, and sticky components. Some companies have internal versions that work supremely well. it is a shame nothing like those are available outside.
Hi @episodeyang
Thanks for paying interest in this library and this issue.
I am actually willing to look into adding support for those 3 features. But for me, it's still unclear how the API would look like.
For example:
Where do you think we should define the respective colspan/rowspan attributes? Should it be in the data array itself? Should it be given as a separate data array? Is it possible to define it in column meta-data?
I am still doing research around these topics and haven't really found a decent solution so far. I'll check with Brian Vaughn to see if he has time to enlighten us with his point of view on the subject.
Some references for you:
This library has feature of cospan and it's based on react-window as well.
https://autodesk.github.io/react-base-table/examples/row-span
Some react ui library like antd define cospan as column prop
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text, row, index) => {
if (index < 4) {
return <a>{text}</a>;
}
return {
children: <a>{text}</a>,
props: {
colSpan: 5,
},
};
},
},
https://ant.design/components/table/#components-table-demo-colspan-rowspan