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

close expanded row antd table when clicked on button

Grieving Gharial answered on December 13, 2023 Popularity 2/10 Helpfulness 1/10

answer close expanded row antd table when clicked on button

related close expanded row antd table externally

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: antd button javascript row when

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 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: javascript row antd

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 when clicked on button

Contents

More Related Answers

close expanded row antd table when clicked on button

Closely Related Answers

close expanded row antd table externally

Grepper

Documentation

Social

Legal

Contact

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