我正在使用react-table呈现一组数据。我正在从外部文件调用列映射。我想用专用数据来格式化某些单元格(例如,在一个单元格中连接两组数据),但是我不能在一个简单的对象数组中做到这一点。这是我的js文件:
import React, { useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Moment from 'react-moment';
import { useTable } from 'react-table';
import { Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { MY_PROJECT_COLUMNS } from '../columns/columns';
import { projectsDetails } from '../actions/projectActions';
import Button from '../components/Button';
const ProjectSummary = () => {
const dispatch = useDispatch();
const projectDetails = useSelector(state => state.projectDetails);
const { loading, error, projects } = projectDetails;
useEffect(() => {
dispatch(projectsDetails());
}, [dispatch]);
const columns = useMemo(() => MY_PROJECT_COLUMNS, []);
const data = useMemo(() => projects, []);
console.log(data);
const tableInstance = useTable({
columns,
data
});
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = tableInstance;
return (
<Table striped {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
})}
</tr>
);
})}
</tbody>
</Table>
);
};
export default ProjectSummary;
这是Columns.js文件:
export const MY_PROJECT_COLUMNS = [
{
Header: 'Status',
accessor: 'status'
},
{
Header: 'Name',
accessor: 'name'
},
{
Header: 'Funding Source',
accessor: 'fundingSource'
},
{
Header: 'Project Id',
accessor: 'projectId'
},
{
Header: 'Start Date',
accessor: 'startDate'
},
{
Header: 'End Date',
accessor: 'endDate'
},
{
Header: 'Type',
accessor: 'type'
},
{
Header: 'Location',
accessor: 'state'
}
];
提前谢谢!