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

Question

我正在使用 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'
      }
    ]
  }
];

Answer 1

为了从头开始扩展所有行，您可以使用道具，您可以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>
    );
  }

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

Answer 2

https://codesandbox.io/s/pjmk93281j?file=/index.js

// all the rows are expanded now
let expandedRows = data.map((i, index) => { index:true }); 

const [expanded, setExpanded] = useState(expandedRows);

<ReactTable data={data}
    ...
    expanded={expanded}
    onExpandedChange={(expanded, index, event) => {
        // console.log(index, expanded);
        // don't for get to save the 'expanded'
        // so it can be fed back in as a prop

        console.log(expanded);
        setExpanded(expanded);
    }}
/>

试试看，它对我有用。

Answer 3

为了在 react-table v6 中获得多个子行 1.首先让你的数据数组像这样

     data = [
            0:{name:'abc', age: 34, friends: [
                        0:{name:'xyz', age: 12, friends:[]}
                        1:{name:'john', age: 45, friends:[]}
                        2:{name:'kim', age: 23 , friends: [
                            0:{name:'ray', age: 15}
                            ]
                        }
                    ]
            }
            1:{name:'john', age: 45, friends:[]}
        ]

2. 将您的子行键添加到您的反应表中

    <ReactTable 
                data={data}
                columns={ columns }
                expandedRows={true}
                subRowsKey= {'friends'}
                />

3. 然后在最后一步在表列中使用 Expender 回调

       columns = [
            {
                Header: "Name",
                accessor: 'name'
            },
            {
                Header: "AGE",
                accessor: 'age'
            },
            {
                Header: "Have Friend",
                Expander: ({ isExpanded, ...rest }) =>
                    {
                      if(rest.original.friends.length === 0) {
                        return null;
                      }
                       else {
                        return (
                          <div>
                            {isExpanded
                                    ? <span>-</span>
                                    : <span>+</span>
                            }
                          </div>
                        );
                      }
                    },
            },
        
        ]

Answer 4

Orlyyn 的回答有效，但我不明白，为什么我们需要返回一个带有索引和的对象true？只是返回true作品，以后很容易更新。

const defaultExpandedRows = data.map(() => {return true});

要使切换工作，您可以存储defaultExpandedRows在状态中并将索引的值更改为false onExpandedChange