时间戳

首页 > 解决方案 > 默认情况下使用 react-table 展开子组件行

reactjs - 默认情况下使用 react-table 展开子组件行

问题描述

我正在使用 react-table 显示一些行，每一行都有一个子组件，它只是呈现更多的“子行”。但是，您必须单击该行才能显示子行。React-table 没有设置然后默认扩展。有一些关于这样做的讨论，但我似乎无法用我的例子做任何事情。

加载时电流看起来像这样： 在此处输入图像描述

单击每一行后（我如何尝试使其默认显示） 在此处输入图像描述

表.js

import React, { Component } from 'react';
import ReactTable from 'react-table';
import { columns, subComponent } from './tableSetup';


class Table extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ReactTable data={ data }
        columns={ columns }
        SubComponent={ subComponent }
        expandedRows={ true }
        resizable={ false }
        minRows={ 1 }
        pageSize={ 8 }
        showPageSizeOptions={ false } />
    );
  }
}

export default Table;

带有示例数据的 tableSetup.js 从“react”导入 React；

export const columns = [
  {
    Header: () => (
      <div />
    ),
    accessor: 'name',
    maxWidth: 300,
    Cell: row => (
      <div className='first-column'>{row.value}</div>
    )
  }
];

export const subComponent = row => {
  return (
    <div>
      {row.original.types.map((type, id) => {
        return (
          <div className='subRow' key={ id }>{ type.name }</div>
        );
      })}
    </div>
  );
};

export const data = [
  {
    id: '12345',
    name: 'sports',
    types: [
      {
        name: 'basketball',
        id: '1'
      },
      {
        name: 'soccer',
        id: '2'

      },
      {
        name: 'baseball',
        id: '3'
      }
    ]
  },
  {
    id: '678910',
    name: 'food',
    types: [
      {
        name: 'pizza',
        id: '4'
      },
      {
        name: 'hamburger',
        id: '5'

      },
      {
        name: 'salad',
        id: '6'
      }
    ]
  }
];

标签： reactjsreact-table-v6

解决方案

为了从头开始扩展所有行，您可以使用道具，您可以defaultExpanded在其中提供要扩展的所有行索引。（在这种情况下，所有这些），像这样：

  render() {
    // Set all the rows index to true
    const defaultExpandedRows = data.map((element, index) => {return {index: true}});
    return (
      <div>
        <ReactTable
          data={data}
          // Use it here
          defaultExpanded={defaultExpandedRows}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
          SubComponent={subComponent}
        />
      </div>
    );
  }

有关更多信息，您可以查看此处。

推荐阅读