title: Merging rows in antd table if it has the same value
body: <p>So I have an antd table in ReactJS that gets its data from an API call. So in my &quot;account name&quot; column, I have multiple values that are the same and I want to merge them into one row. I've tried looking for questions here and found this <a href="https://stackblitz.com/edit/react-bubauz-vd5trm?file=index.js" rel="nofollow noreferrer">codesandbox</a> project that does exactly what I want but when I applied it to my code, it wouldn't work. It drops the cells in my account name column and replaces it with values from the next column (Basically, moving my rows to the left and leaving the last column blank.)</p>
  <p>UPDATE: I've added another <a href="https://codesandbox.io/s/hungry-moser-3pk77" rel="nofollow noreferrer">sandbox link</a> to recreate my problem or where I am at.</p>
  <pre><code>const names = new Set();
  
    useEffect(() =&gt; {
      names.clear();
    });
  
  
  
    const columns = [
      {
        key: &quot;1&quot;,
        title: &quot;Account Name&quot;,
        dataIndex: &quot;account-name&quot;,
        rowSpan: 1,
        render: (value, row, index) =&gt; {
          const obj = {
            children: value,
            props: {}
          };
  
          console.log(names.has(value), value);
  
          if (names.has(value)) {
            obj.props.rowSpan = 0;
          } else {
            const occurCount = dataSource.filter(data =&gt; data['account-name'] === value).length;
            console.log(occurCount);
  
            obj.props.rowSpan = occurCount;
            names.add(value);
          }
  
          return obj;
        },
        sorter: (record1,record2) =&gt; record1['account-name'].localeCompare(record2['account-name']),
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) =&gt; {
          return (
            &lt;Input
              autoFocus
              placeholder=&quot;Search Column...&quot;
              value={selectedKeys[0]}
              onChange={(e) =&gt; {
                setSelectedKeys(e.target.value ? [e.target.value] : []);
              }}
              onPressEnter={() =&gt; {
                confirm();
              }}
              onBlur={() =&gt; {
                confirm();
              }}
            &gt;&lt;/Input&gt;
          );
        },
        filterIcon: () =&gt; {
          return &lt;SearchOutlined /&gt;;
        },
        onFilter: (value, record) =&gt; {
          return record['account-name'].toLowerCase().includes(value.toLowerCase());
        }
      },
      {
        key:&quot;2&quot;,
        title:'Group ID',
        dataIndex:'group-id',
        sorter: (record1,record2) =&gt; record1['group-id'].localeCompare(record2['group-id']),
        width: '18%',
        rowSpan: 1,
    },
    {
        key:&quot;3&quot;,
        title:'Financial Account ID',
        dataIndex:'financial-account-id',
        sorter: (record1,record2) =&gt; record1['financial-account-id'].localeCompare(record2['financial-account-id']),
        width: '15%',
        rowSpan: 1,
    },
    {
        key:&quot;4&quot;,
        title:'Industry',
        dataIndex:'industry',
        sorter: (record1,record2) =&gt; record1.industry.localeCompare(record2.industry),
        width: '15%',
        rowSpan: 1,
    },
    {
        key:&quot;5&quot;,
        title:'Billing Address',
        dataIndex:'billing-address',
        rowSpan: 1,
    },
    ];
      return (
          &lt;div&gt;
          &lt;Table
          bordered={true}
          loading={loading}
          columns={columns}
          dataSource={dataSource}
          pagination={true}
          /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>When I change the value of <code>obj.props.rowSpan</code> into 0 it drops the whole columns of values. but when I change it into 1, it looks normal but without merging the rows.</p>
  <p>Any help would be greatly appreciated I've been trying to fix this for a week.</p>