reactjs - 在 React-Table 中，单击扩展器时如何从 api 获取数据并将其传递给子组件？

Question

我正在尝试实现一个表，其中有一个更多按钮可以从 api 加载更多数据。

获取的数据将在子组件中呈现。

如何使用 react-table 达到同样的效果？

这是我到目前为止所尝试的：

 <ReactTable
    data={data}
    freezeWhenExpanded={true}
    columns={[
      {
        Header: 'Name',
        accessor: 'name',
        width: 200
      },

      {
        Header: 'Email ID',
        accessor: 'emailId'
      },
      {
        Header: 'Phone',
        accessor: 'phone',
        maxWidth: 150
      },

      {
        expander: true,
        Header: () => <span>More</span>,
        width: 65,
        Expander: ({ isExpanded, ...rest }) => (
          <div>
            {isExpanded ? <span>&#x25B2;</span> : <span>&#x25BC;</span>}
          </div>
        ),
      }
    ]}
    SubComponent={() => (
      <div> fetched data from api to be shown here </div>
    )}
  />

标签： reactjsreact-table