Search code examples
reactjsantd

Table with dynamic expandableRowKeys isnt allowing for expand on click Antd React


I have a antd Table and a search bar. The search looks if a name is in the nested children of the dataSource , and i return the parent keys as well so the expandableRowKeys can properly expand them. However i am now unable to expand by clicking. I thought it would be easier to show then just describe it. So here is my code Sandbox Code

  <Table
    dataSource={dataSource}
    columns={columns}
    expandable={{
      expandedRowKeys: expandedRowKeys,
      rowExpandable: (record) => record.children?.length > 0
    }}
    // add the rowClassName prop to set the class name of the selected row
    rowClassName={(record) =>
      record.key === selectedRowKey ? "selected-row" : ""
    }
    // add the onRow prop to set the on-click event handler for each row
    onRow={(record) => {
      return {
        onClick: () => handleRowClick(record)
      };
    }}
  />

This is my table code.


Solution

  • You forgot to setExpandedRowKeys onClick onRow. Sandbox Code should work.