Question

我正在使用react-table来显示一些行，每行都有一个子组件，该子组件仅呈现更多的“子行”。但是，您必须单击该行才能显示子行。 React-table没有默认设置然后可以扩展。关于此操作，目前已有一些讨论，但我的示例似乎无法解决任何问题。

当前在加载时如下所示：

单击每一行后（默认情况下，即时消息尝试显示的方式）

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>
    );
  }

有关更多信息，请查看here。

Answer 2

Orlyyn的答案有效，但我不明白，为什么我们需要返回带有索引和true的对象？只需返回true即可，并且以后易于更新。

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

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

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:[]}
        ]

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

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

然后在最后一步在表列中使用 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

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);
    }}
/>

试试吧，它对我有用。

默认情况下，使用react-table扩展子组件行

4 个答案: