preserving state of accordion and expanded table rows

Question

Is there any way in Ant Design to capture the state of whether particular table rows are expanded, and apply that state if the page refreshes or if the component remounts (ie when navigating between different routes on a SPA?)

Also is there way to make the expansion of table rows to work like an accordion. Ie only one row can be expanded at a time?

At this point I am just investigating Ant-D, reading the documentation and playing with small code snippets.

But I can find no documentation on how to do the above (ie preserve/restore the state of table/accordions), so I would not know what to try. I certainly could build out custom bits and pieces, but then that would defeat the purpose of having a nice framework.

Hoping for a more elegant solution.

Answer 1

Check the next example, props you should refer to are:

• onExpandedRowsChange
• onExpand
• expandedRowKeys

import { Table, Typography, Select, Radio } from 'antd';

const expandedRowRender = record => (
  <Typography.Text code>{record.key}</Typography.Text>
);

export default function App() {
  const [expandedRow, setExpandedRow] = useState(0);
  const [radioValue, setRadioValue] = useState('accordion');

  const [currentRow, setCurrentRow] = useState([]);
  return (
    <FlexBox>
      <Radio.Group
        style={{ width: 200 }}
        value={radioValue}
        onChange={e => setRadioValue(e.target.value)}
      >
        <Radio value="accordion">Accordion</Radio>
        <Radio value="rowState">rowState</Radio>
      </Radio.Group>
      {radioValue === 'accordion' ? (
        <Table
          dataSource={dataSource}
          columns={columns}
          onExpand={(isExpanded, record) =>
            setExpandedRow(isExpanded ? record.key : undefined)
          }
          expandedRowRender={expandedRowRender}
          expandedRowKeys={[expandedRow]}
        />
      ) : (
        <>
          <Typography.Title>{currentRow}</Typography.Title>
          <Table
            dataSource={dataSource}
            columns={columns}
            expandedRowRender={expandedRowRender}
            onExpandedRowsChange={setCurrentRow}
          />
        </>
      )}
    </FlexBox>
  );
}