Expand a row by click of table on a certain condition Ant Design table react js

Question

I need a small help.

I need to write the code such that the table row should expand only when it\'s toggle is on when the toggle is off it should not expand. I have used

Answer 1

just paste this code . it is working . Hope this'll help you .

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Switch } from "antd";

const { Column } = Table;

class EditableTable extends React.Component {
  state = {
    firstRow: false,
    secondrow: false
  };
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [
        {
          key: "0",
          name: "Edward King 0",
          expandable: false
        },
        {
          key: "1",
          name: "Edward King 1",
          expandable: false
        }
      ]
    };
  }
  handleChnage = key => {
    let k = parseInt(key);
    let data = this.state.dataSource;
    let value = data[k].expandable;
    data[k].expandable = !value;
    this.setState({
      dataSource: data
    });
  };

  render() {
    const { dataSource } = this.state;
    return (
       (
            
{"Here is expandable row"}
          ),
          rowExpandable: record => record.expandable
        }}
      >
        
         {
            return  this.handleChnage(record.key)} />;
          }}
        />
      
    );
  }
}

ReactDOM.render(, document.getElementById("container"));