反应表列由其他列的总和得出

Question

我对react-table v6很陌生(我觉得v7太复杂了)，所以我无法理解一些东西。

我想用周期表的其他列的总和来做一列，例如：元素铁+元素钼。我想把行中的两个值相加，如果超过某个值，就用不同的颜色来表示。我可以从单元格中调用func，但是......我从这里挑选了一些代码。React-table单个单元格样式

                    {
                        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 不是 undefined 时，在 rowInfo 的其他列中会出现 undefined : undefined。

• 我设置宽度的单位是什么？80是什么意思？

Answer 1

我准备了一个例子 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 那么你可以看看这个 例子

Answer 2

好吧，我只是添加了一个func，总结要求的列在表外.在表内，我做了

                    Cell: cell => {
                        const value = sumColumnFormatter(cell.row, param1, param2);
                        return (
                        <span> {value}</span>
                        )
                    }