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

Question

我是 react-table v6 的新手（我发现 v7 过于复杂），所以我无法得到一些东西：

我想从元素周期表的其他列的总和中创建一列，例如。元素铁+元素钼。我想将行中的两个值相加，如果它超过某个特定值，则将其着色为不同的颜色。我可以从一个单元格调用一个函数，但是...... 我从这里挑选一些代码 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 访问带有总和的列并根据总和对其进行着色时，我必须输入什么？有 undefined : undefined 列在 rowInfo 的其他列中，当 rowInfo 不是 undefined 时

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

Answer 1

我刚刚添加了一个函数，用于汇总表外请求的列。 在我做的桌子里面

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

Answer 2

我用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，那么你可以检查这个example