我在 react-table v6 中真的很陌生（我发现 v7 过于复杂），所以我不能得到一些东西：我想从期刊表的其他列的总和中制作一列，例如元素Ferrum + 元素Molybdenum。我想对行中的两个值求和，如果它超过某个特定值，则用不同的颜色着色。我可以从细胞中调用函数，但是...我从这里选择一些代码 React-table Individual Cell Style { Header: 'Fe + Mo', headerClassName: "header-class", className: "row-class", getProps: (state, rowInfo, column) => { console.log(rowInfo); return { style: { background: rowInfo && rowInfo.row.WHAT_SHOULD_BE_THERE > 10 ? 'red' : null, }, }; }, width: 80, Cell: props => <span> {sumColumnFormatter(props.row, "elementFe", "elementMo" )}</span> },我也试图在像这样的某个列之后放一些边框 getProps: (state, rowInfo, column) => { return { style: { borderRight: '10px black' } } }但它不起作用。因此，该列的代码在上面。不清楚的时刻是：为什么使用 getProps，什么是 rowInfo、state 和 column？为什么它有时是 rowInfo 未定义的？当我使用rowInfo.row访问包含总和的列并根据该总和对其进行着色时，我必须键入什么？有未定义：未定义列在rowInfo中的其他列中，当rowInfo未未定义时我设置宽度的单位是什么？80是什么意思？
2 回答
蛊毒传说
TA贡献1895条经验 获得超3个赞
好吧，我刚刚添加了一个函数来总结表外请求的列。在桌子里面我做了
Cell: cell => {
const value = sumColumnFormatter(cell.row, param1, param2);
return (
<span> {value}</span>
)
}
慕哥9229398
TA贡献1877条经验 获得超6个赞
我用.请检查它。version 7.1.0
import React from 'react'
import styled from 'styled-components'
import {useTable} from 'react-table'
import namor from 'namor';
const range = len => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i)
}
return arr
};
const newPerson = () => {
const statusChance = Math.random();
const jIncome = Math.floor(Math.random() * 30);
const bIncome = Math.floor(Math.random() * 100);
return {
firstName: namor.generate({words: 1, numbers: 0}),
lastName: namor.generate({words: 1, numbers: 0}),
jIncome: jIncome,
bIncome: bIncome,
tIncome: jIncome + bIncome,
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? 'relationship'
: statusChance > 0.33
? 'complicated'
: 'single',
}
};
function makeData(...lens) {
const makeDataLevel = (depth = 0) => {
const len = lens[depth];
return range(len).map(d => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
};
return makeDataLevel()
}
const Styles = styled.div`
padding: 1rem;
table {
border-spacing: 0;
border: 1px solid black;
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
:last-child {
border-right: 0;
}
}
}
`;
function Table({columns, data}) {
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
data,
});
// Render the UI for your table
return (
<table {...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, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps(
{
style: {backgroundColor: row.values.tIncome > 50? 'skyblue': 'lightgray'}
}
)}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
}
function ReactTableRowColor() {
const columns = React.useMemo(
() => [
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'Last Name',
accessor: 'lastName',
},
],
},
{
Header: 'Info',
columns: [
{
Header: 'Job Income',
accessor: 'jIncome',
},
{
Header: 'Business Income',
accessor: 'bIncome',
},
{
Header: 'Total Income',
accessor: 'tIncome',
},
{
Header: 'Status',
accessor: 'status',
},
{
Header: 'Profile Progress',
accessor: 'progress',
},
],
},
],
[]
);
const data = React.useMemo(() => makeData(20), []);
return (
<Styles>
<Table columns={columns} data={data}/>
</Styles>
)
}
export default ReactTableRowColor
如果你想使用，那么你可以检查这个例子version 6.8.6
添加回答
举报
0/150
提交
取消