Как преобразовать обычную таблицу в реагировать JS для использования реактивной таблицы начальной загрузки далее

Question

У меня есть обычная таблица в реагирующем js, которая генерируется следующим образом (это просто извлечение для генерации элементов td, другой код - это класс с именем CompanyList, который является компонентом реагирования, который визуализирует таблицу;

import React from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Line } from 'react-chartjs-2';
import { actionCreators as companiesActionCreators } from '../../reducers/companies'
import { getSelectedAndFilteredCompanies, getChartData } from '../../selectors/companies';
import DropBox from '../DropBox'
import { getRevenueSelectedRange, getTotalAssetsSelectedRange } from '../../selectors/companies'
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

const Company = ({ company, selectCompany, deselectCompany }) => (
  <tr>
    <td><input type='checkbox' checked={company.selected} onChange={() => company.selected ? deselectCompany(company.id) : selectCompany(company.id)} /></td>
    <td>{ company['Company Name'] }</td>
    <td>{ company['Revenue bucket'] }</td>
    <td>{ company['Current Yield'] }</td>
    <td>{ company['Sector'] }</td>
    <td>{ company['Revenue bucket'] }</td>
    <td>{ company['Revenue 2007'] }</td>
    <td>{ company['Company Name'] }</td>
    <td>{ company['Company Name'] }</td>
  </tr>
);

Однако я хочу преобразовать эту таблицу, чтобы использовать плагин реагировать js act-bootstrap-table-2 , но после прочтения документов я не уверен,массив продуктов должен быть таким:

products = [{ 'Name' : { company['Company Name'] } , 'checkbox' : <input type='checkbox' checked={company.selected} onChange={() => company.selected ? deselectCompany(company.id) : selectCompany(company.id)} /> }]

Answer 1

Вот пример того, как ваша таблица будет выглядеть при сборке с react-bootstrap-table-2:

import BootstrapTable from 'react-bootstrap-table-next';

class Component extends React.Component {
    renderColumns () {
        return [
            { dataField: 'id', text: 'Id', hidden: true },
            { dataField: 'isSelected', text: 'Selected' },
            { dataField: 'companyName', text: 'Company name' },
            { dataField: 'revenueBucket', text: 'Revenue bucket' },
            { dataField: 'currentYield', text: 'Current Yield' },
            { dataField: 'sector', text: 'Sector' },
        ]
    }

    renderRows () {
        const { companies, deselectCompany, selectCompany} = this.props 
        companies.map(company => {
            return {
                id: company.id,
                isSelected: <input type='checkbox' checked={company.isSelected} onChange={() => company.isSelected ? deselectCompany(company.id) : selectCompany(company.id)} />,
                companyName: company['Company Name'],
                revenueBucket: company['Revenue bucket'],
                currentYield: company['Current Yield'],
                sector: company['Sector']
            }
        })
    }

    render () {
        return <BootstrapTable
            keyField='id'
            data={ this.renderRows(companies) }
            columns={ this.renderColumns() }
        />
    }

}

Пожалуйста, имейте в виду, что столбец dataField и ключ строки должны совпадать.И еще один совет - разделять рендеринг столбцов и строк, как я, чтобы избежать путаницы.