来自其他列之和的反应表列

Question

我在 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是什么意思？

Answer 1

好吧，我刚刚添加了一个函数来总结表外请求的列。在桌子里面我做了&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Cell: cell => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const value = sumColumnFormatter(cell.row, param1, param2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span> {value}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }

Answer 2

我用.请检查它。version 7.1.0import React from 'react'import styled from 'styled-components'import {useTable} from 'react-table'import namor from 'namor';const range = len => {&nbsp; &nbsp; const arr = [];&nbsp; &nbsp; for (let i = 0; i < len; i++) {&nbsp; &nbsp; &nbsp; &nbsp; arr.push(i)&nbsp; &nbsp; }&nbsp; &nbsp; return arr};const newPerson = () => {&nbsp; &nbsp; const statusChance = Math.random();&nbsp; &nbsp; const jIncome = Math.floor(Math.random() * 30);&nbsp; &nbsp; const bIncome = Math.floor(Math.random() * 100);&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; firstName: namor.generate({words: 1, numbers: 0}),&nbsp; &nbsp; &nbsp; &nbsp; lastName: namor.generate({words: 1, numbers: 0}),&nbsp; &nbsp; &nbsp; &nbsp; jIncome: jIncome,&nbsp; &nbsp; &nbsp; &nbsp; bIncome: bIncome,&nbsp; &nbsp; &nbsp; &nbsp; tIncome: jIncome + bIncome,&nbsp; &nbsp; &nbsp; &nbsp; progress: Math.floor(Math.random() * 100),&nbsp; &nbsp; &nbsp; &nbsp; status:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; statusChance > 0.66&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? 'relationship'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : statusChance > 0.33&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? 'complicated'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : 'single',&nbsp; &nbsp; }};function makeData(...lens) {&nbsp; &nbsp; const makeDataLevel = (depth = 0) => {&nbsp; &nbsp; &nbsp; &nbsp; const len = lens[depth];&nbsp; &nbsp; &nbsp; &nbsp; return range(len).map(d => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...newPerson(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; };&nbsp; &nbsp; return makeDataLevel()}const Styles = styled.div`&nbsp; padding: 1rem;&nbsp; table {&nbsp; &nbsp; border-spacing: 0;&nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; tr {&nbsp; &nbsp; &nbsp; :last-child {&nbsp; &nbsp; &nbsp; &nbsp; td {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; th,&nbsp; &nbsp; td {&nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; padding: 0.5rem;&nbsp; &nbsp; &nbsp; border-bottom: 1px solid black;&nbsp; &nbsp; &nbsp; border-right: 1px solid black;&nbsp; &nbsp; &nbsp; :last-child {&nbsp; &nbsp; &nbsp; &nbsp; border-right: 0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }`;function Table({columns, data}) {&nbsp; &nbsp; // Use the state and functions returned from useTable to build your UI&nbsp; &nbsp; const {&nbsp; &nbsp; &nbsp; &nbsp; getTableProps,&nbsp; &nbsp; &nbsp; &nbsp; getTableBodyProps,&nbsp; &nbsp; &nbsp; &nbsp; headerGroups,&nbsp; &nbsp; &nbsp; &nbsp; rows,&nbsp; &nbsp; &nbsp; &nbsp; prepareRow,&nbsp; &nbsp; } = useTable({&nbsp; &nbsp; &nbsp; &nbsp; columns,&nbsp; &nbsp; &nbsp; &nbsp; data,&nbsp; &nbsp; });&nbsp; &nbsp; // Render the UI for your table&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <table {...getTableProps()}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {headerGroups.map(headerGroup => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr {...headerGroup.getHeaderGroupProps()}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {headerGroup.headers.map(column => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th {...column.getHeaderProps()}>{column.render('Header')}</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody {...getTableBodyProps()}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {rows.map((row, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; prepareRow(row);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr {...row.getRowProps(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style: {backgroundColor: row.values.tIncome > 50? 'skyblue': 'lightgray'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {row.cells.map(cell => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; )}function ReactTableRowColor() {&nbsp; &nbsp; const columns = React.useMemo(&nbsp; &nbsp; &nbsp; &nbsp; () => [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Header: 'Name',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columns: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Header: 'First Name',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessor: 'firstName',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Header: 'Last Name',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessor: 'lastName',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Header: 'Info',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columns: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Header: 'Job Income',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessor: 'jIncome',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Header: 'Business Income',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessor: 'bIncome',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Header: 'Total Income',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessor: 'tIncome',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Header: 'Status',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessor: 'status',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Header: 'Profile Progress',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accessor: 'progress',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; []&nbsp; &nbsp; );&nbsp; &nbsp; const data = React.useMemo(() => makeData(20), []);&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Styles>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Table columns={columns} data={data}/>&nbsp; &nbsp; &nbsp; &nbsp; </Styles>&nbsp; &nbsp; )}export default ReactTableRowColor如果你想使用，那么你可以检查这个例子version 6.8.6