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

У меня есть обычная таблица в реакции 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 для реагирования react-bootstrap-table -2, но после прочтения docs Я не уверен, должен ли мой массив продуктов быть таким;

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

reactjs javascript react-bootstrap-table
person mp252    schedule 05.06.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот пример того, как ваша таблица будет выглядеть при сборке с 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 и ключ строки должны быть равны. И еще один совет — разделяйте рендеринг столбцов и строк, как я, чтобы не было путаницы.

person Nadezhda Serafimova    schedule 19.07.2018