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

Question

I am new to react. I am stuck here. please help me with this.

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 the property expandRowByClick to expand a row when it is clicked. But here the problem is when the toggle is off it should not clickable, but right now an empty row will expand. How can I avoid it?

Anyone help me out. Thank you.

SandBox link: https://codesandbox.io/s/purple-sun-1rtz1?file=/index.js

Answer 1

Here you go , all you need is rowExpandable :

expandable = {{
    expandedRowRender: record => this.handleRowRender(record),
        rowExpandable: record => {
            if (record.name === "Edward King 0" && !this.state.firstRow) {
                return false;
            } else if (record.name === "Edward King 1" && !this.state.secondrow) {
                return false;
            }
            return true;
        },
}}

WORKING DEMO :