默认展开子组件行 react-table

Question

我正在使用 react-table 来显示一些行，每行都有一个子组件，它只会渲染更多 "subrows." 但是，您必须单击该行才能显示子行。 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 的回答有效，但我不明白，为什么我们需要 return 具有索引和 true 的对象？只需 returning true 即可，以后更新也很容易。

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

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

Answer 3

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

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

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

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

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

Expand subcomponent rows by default with react-table

reactjs

react-table-v6