Breaking News: Grepper is joining You.com. Read the official announcement!

close expanded row antd table externally

Grieving Gharial answered on December 13, 2023 Popularity 3/10 Helpfulness 4/10

answer close expanded row antd table externally

related close expanded row antd table when clicked on button

close expanded row antd table externally

Comment

// useState()
const [expandedRowKeys, setExpandedRowKeys] = useState([]);

const onTableRowExpand = (expanded, record) => {
    const keys = [];
    if(expanded){
        keys.push(record.id); // I have set my record.id as row key. Check the documentation for more details.
    }

    setExpandedRowKeys(keys);
}

<Table
    expandedRowKeys={expandedRowKeys}
    onExpand={onTableRowExpand}
/>

Popularity 3/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: antd javascript row

Link to this answer
Share Copy Link

Contributed on Dec 13 2023

Grieving Gharial

0 Answers Avg Quality 2/10

Closely Related Answers

close expanded row antd table when clicked on button

Comment

//First, you need a key property for each record in your data. 

  const [expandedRowKeys, setExpandedRowKeys] = useState([]);

  const handleClose = (record) => {
	setExpandedRowKeys(expandedRowKeys.filter((key) => key !== record.id));
  }
  const expandedRow = (record, parentRecord) => {
    return (
      <Row justify="center" style={{ background: '#feffe6' }}>
        <Col span={18}>
          <Row justify="end">
            <Button type="primary" style={{ margin: '10px' }} onClick={() => handleClose(parentRecord)}>Close expanded row</Button>
          </Row>
        </Col>
      </Row>
    );
  };
  return (
	<Table
      dataSource={
        tableData
        || []
      }
      columns={columns}
      expandable={{
        expandedRowRender: (record) => expandedRow(record.thing, record),
        defaultExpandedRowKeys: ['0'],
        expandedRowKeys,
        onExpand: onTableRowExpand,
      }}
      size="medium"
      sticky
      pagination={tableParams.pagination}
      onChange={handleTableChange}
      rowClassName={(record) => (record.delete ? styles.deleted : '')}
    />
  )

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: row javascript when antd button

Link to this answer
Share Copy Link

Contributed on Dec 13 2023

Grieving Gharial

0 Answers Avg Quality 2/10

close expanded row antd table externally

Contents

More Related Answers

close expanded row antd table externally

Closely Related Answers

close expanded row antd table when clicked on button

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.