CODEWITHSUNDEEP
reactjsantd
lamhungypl
lamhungypl

Reputation: 195

Antd Design [Table] how to expand row by click in the column

I have an expandable table with the last Action column for Submit or ViewDetails (expand more information )

Antd Expaned Table

Idk how to make the expand function in column.render(), Currently, I do the trick with expandRowByClick: true.

<Table
  expandable={{
    expandedRowRender,
    rowExpandable: (record) => record.key % 2,
    // expandIconColumnIndex:7
    expandRowByClick: true,
    expandIcon: () => <div />
    }}
  dataSource={data}
/>

But it's not the answer, cuz there's some column that rendered with a link, other onClick callback, or the text More detail should be changed by the state of expanding (More/Less).

Antd design version 4.16.0

Codesandbox: https://codesandbox.io/s/antdnestedtables-zrtuw

Upvotes: 1

Views: 12622

Answers (1)

Lith
Lith

Reputation: 1325

The reason the row expands on a row click is because of expandRowByClick: true. Remove it. Now, if you want to render that hidable row on your custom button, then you need to manually set expandedRowKeys prop on Table component. You can read up on that more AntD documentation here: https://ant.design/components/table/#API

Now in your case its simple.

1st. Create somewhere to store your expended keys, that has to be done with the use of a state like so const [expended, setExpended] = useState()

2nd. Create a method that adds and removes the expended key on a click. NOTE it has to be do both as when you click the expend button, it send same index to same method. So you have to check if its already selected or not.

const expend = (index) => {
    if (expended === index) setExpended(undefined);
    else setExpended(index);
};

Here is an example that only 1 can be expanded at once. If any more is expanded - others will close down and that one will open. If you want to allow users to expand multiple at once - need to redo this to work with an array instead.

Pass this newly created method to your a element with onClick={() => expend(index)}. NOTE only do it whenever its a More details button.

3rd. Render it in a table like so

<Table
  className="components-table-demo-nested"
  columns={columns}
  expandable={{
    expandedRowRender,
    rowExpandable: (record) => record.key % 2,
    expandIcon: () => <></>
  }}
  expandedRowKeys={[expended]}
  dataSource={data}
/>

The expandedRowRender remains as in your case. expandIcon is set to an empty fragment and its Important as without it it will render the default AntD Icon on the left. The expandedRowKeys is the keys of the expended rows. It has to be an array hence why expended is in [] since, as mentioned, this example made so only 1 row at the time can be expanded.

Result: It only expands whenever you click your custom More Details button in Actions column. In addition, made it so if the row is expanded, instead of More details it would say Close details

Here is a live example: https://codesandbox.io/s/antdnestedtables-forked-orq20?file=/index.tsx

Upvotes: 4

Related Questions