Feature Request: How can we handle rowspan and colspan

[onesinus]

In table we can set rowspan and colspan, how about TableWindow?

[pupudu]

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:

https://github.com/bvaughn/react-virtualized/issues/123 https://github.com/bvaughn/react-window/issues/60#issuecomment-479953599

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.

[geyang]

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.

[pupudu]

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.

[giiska]

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