Развернуть строки подкомпонента по умолчанию с помощью таблицы реакции - PullRequest
Новая
       11

Развернуть строки подкомпонента по умолчанию с помощью таблицы реакции

0 голосов
/ 20 июня 2019

Я использую реагирующую таблицу для отображения некоторых строк, каждая строка имеет подкомпонент, который просто отображает еще несколько «подстрочек». Тем не менее, вы должны нажать на строку, чтобы показать подстроек. React-таблица не имеет параметра, который затем расширяется по умолчанию. Есть некоторые дискуссии о том, как это сделать, но я не могу заставить что-то работать с моим примером.

Ток выглядит так при нагрузке: enter image description here

После нажатия на каждую строку (как я пытаюсь заставить ее выглядеть по умолчанию) enter image description here

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 из 'реакции'; 

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'
      }
    ]
  }
];

1 Ответ

1 голос
/ 04 июля 2019

Чтобы развернуть все строки с самого начала, вы можете использовать реквизит 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>
    );
  }

Для получения дополнительной информации вы можете посмотреть здесь .

...