Using rowSpan in table rows (rows span based data)

[basith-rahman]

Is your feature request related to a problem? Please describe.

Yes, For many hours, I have been searching for a solution to add rowSpan for my data-table. I found some answers, but all of these are related to Table headers. But my I want to implement the rowSpan in my Table rows not on the Table headers. My Data is something like that:-

[
    {
        "id": 1,
        "investments": [
            {
                "id": 8,
                "uuid": "0158fe2d-9adc-4702-ace2-4f9220cd3a53",
                "no_of_shares": 7,
                "is_active": true,
                "amount": "7000.0000",
                "opportunity": 8,
                "buyer": 1,
                "wallet_transaction": 12
            },
            {
                "id": 9,
                "uuid": "2a3d7c20-512e-437a-a90f-b34e283aed57",
                "no_of_shares": 2,
                "is_active": true,
                "amount": "200.0000",
                "opportunity": 8,
                "buyer": 1,
                "wallet_transaction": 1
            },
            {
                "id": 11,
                "uuid": "03d50c6b-0860-4a1a-8b68-3de28b980ebb",
                "no_of_shares": 5,
                "is_active": true,
                "amount": "500.0000",
                "opportunity": 8,
                "buyer": 1,
                "wallet_transaction": 2
            }
        ],
        "name": "abc",
        "email": "[email protected]"
    },
    {
        "id": 2,
        "investments": [
            {
                "id": 12,
                "uuid": "da82dc2c-5a2b-43e8-b059-2c8ccb052993",
                "no_of_shares": 1,
                "is_active": true,
                "amount": "100.0000",
                "opportunity": 8,
                "buyer": 2,
                "wallet_transaction": 1
            }
        ],
        "name": "seeker2",
        "email": "[email protected]"
    },
    {
        "id": 3,
        "investments": [
            {
                "id": 10,
                "uuid": "9ef70d26-c0c0-475b-bd0b-14c3b1fe3737",
                "no_of_shares": 3,
                "is_active": true,
                "amount": "300.0000",
                "opportunity": 8,
                "buyer": 3,
                "wallet_transaction": 5
            },
            {
                "id": 13,
                "uuid": "3b0cb1f3-0f79-4a88-a644-542fabe39379",
                "no_of_shares": 3,
                "is_active": true,
                "amount": "40.0000",
                "opportunity": 8,
                "buyer": 3,
                "wallet_transaction": 3
            }
        ],
        "name": "asdf",
        "email": "[email protected]"
    }
]

Describe the solution you'd like
First of all created a function to re-arrange the data:-

reFormatTableData=(results)=>{
    var theData = []
    results.map((item,index)=>{
      item.investments.map((inv,ind)=>{
        if(ind==0){
          let dict = {
            id:index+""+ind,
            sl_id:index+1,
            buyer:item?.email,
            rowSpan:item?.investments.length,
            buyer_id:item?.id,
            no_of_shares:inv?.no_of_shares,
            amount:inv?.amount,
          }
          theData.push(dict)
        }else{
          let dict = {
            id:index+""+ind,
            buyer:item?.email,
            buyer_id:item?.id,
            no_of_shares:inv?.no_of_shares,
            amount:inv?.amount,
          }
          theData.push(dict)
        }
      })
    })
    return theData;
  }

The retuned data from the function will looks like this:-

[
    {
        "id": "00",
        "sl_id": 1,
        "buyer": "[email protected]",
        "rowSpan": 3,
        "buyer_id": 1,
        "no_of_shares": 7,
        "amount": "7000.0000"
    },
    {
        "id": "01",
        "buyer": "[email protected]",
        "buyer_id": 1,
        "no_of_shares": 2,
        "amount": "200.0000"
    },
    {
        "id": "02",
        "buyer": "[email protected]",
        "buyer_id": 1,
        "no_of_shares": 5,
        "amount": "500.0000"
    },
    {
        "id": "10",
        "sl_id": 2,
        "buyer": "[email protected]",
        "rowSpan": 1,
        "buyer_id": 2,
        "no_of_shares": 1,
        "amount": "100.0000"
    },
    {
        "id": "20",
        "sl_id": 3,
        "buyer": "[email protected]",
        "rowSpan": 2,
        "buyer_id": 3,
        "no_of_shares": 3,
        "amount": "300.0000"
    },
    {
        "id": "21",
        "buyer": "[email protected]",
        "buyer_id": 3,
        "no_of_shares": 3,
        "amount": "40.0000"
    }
]

Then describe your column data structure as follows:-

  sortableColumn = [
    {
      dataField: "sl_id",
      text: "ID",
      sort: true,
      align: "center",
      headerAlign: "center",
      headerStyle: (colum, colIndex) => {
        return { width: 40 };
      },
      style: function callback(cell, row, rowIndex, colIndex) {
        return row.rowSpan? {} : {visibility:'hidden'}
      },
      attrs: function callback(cell, row, rowIndex, colIndex) { 
        return row.rowSpan? {title: 'Buyer',rowSpan:row.rowSpan} : {title: 'Buyer',hidden:true};
      }      
    },
    {
      dataField: "buyer",
      text: "Buyer",
      sort: true,
      formatter: (cell, row)=>{
        return(
          <Link to={ '/users/investors/'+ row.buyer_id}  className="" size="sm">{row.buyer}</Link>
          
        )
      },
      style: function callback(cell, row, rowIndex, colIndex) {
        return row.rowSpan? {} : {visibility:'hidden'}
      },
      attrs: function callback(cell, row, rowIndex, colIndex) { 
        return row.rowSpan? {title: 'Buyer',rowSpan:row.rowSpan} : {title: 'Buyer',hidden:true};
      }
    },    
    
    {
      dataField: "no_of_shares",
      text: "No of shares",
      sort: true,
      align: "center",
      headerAlign: "center",
      headerStyle: (colum, colIndex) => {
        return { width: 80 };
      },
    },
    {
      dataField: "amount",
      text: "Amount",
      sort: true,
      align: "center",
      headerAlign: "center",
      headerStyle: (colum, colIndex) => {
        return { width: 100 };
      }
    },
    {
      dataField: 'actions',
      text: 'Actions',
      isDummyField: true,
      csvExport: false,
      formatter: (cell, row)=>{
        return(<div className="text-center">
          <Link to={ '/inv/investments/'+ row['id']}  className="btn btn-outline-info btn-sm ts-buttom mx-1 mb-1" size="sm"><i className="i-Eye  mr-2"></i>  View</Link>
          </div>
        )
      },
      headerStyle: (sortableColumn, colIndex) => {
        return { textAlign: 'center' };
      }
    },
  ];

Finally your table looks like this:-

[anvark7]

@basith-rahman
its worked.
Thanks bro ,You Saved my Day.

[yurtra]

In the example above, if I use filter and I try to filter for No of shares =2, I have the cell "Id" and "Buyer" that are hidden, so the will translate to left.
How can I resolve the iusse?

[yurtra]

I resolved in this way:

1. I create a hook const [rowsFiltered,setRowsFiltered] = useState([]); in which I save the filtred rows.
   I do so using this How to get the filtered json object after filtering by react-bootstrap-table2-filter #1324
2. I order my rows by the 2 ids (in this case the id of buyer and then id of investement)
3. in the column props style and attrs I put a callback function that check that in rowsFiltered there is a row with same id buyer and smallest id investemnt.
   a) if there is I hide the cell how is done above
   b) if there isn't, it means that is the rows to show to the user. I calculate the number of rows in rowsFiltered with same id
   and use this number as rowSpan, always as mentioned before.
   Hope this is helpfull :)