1

我正在尝试根据单元格的值使用反应表来设置表格的样式，首先我试图更改每个单元格的背景颜色，但是我基于反应表 api 文档并添加了 getProps () 到列数组似乎不起作用。

首先，我只想根据值更新单元格的样式，但是根据单元格值添加自定义类名也可以。

这是创建列的数组：

const columns = [
  {
    Header: 'Things to Do',
    accessor: 'item',
    getProps: (rowInfo) => {
      return {
        style: {
            backgroundColor: rowInfo && rowInfo.row.item === 'Do a thing' ? 'red' : null,
        },
      }
    }
  },
  {
    Header: '2020-04-01',
    accessor: 'date.2020-04-01',
    getProps: (rowInfo) => {
      return {
        style: {
          backgroundColor: rowInfo && rowInfo.row['date.2020-04-01'] === 'Y' ? 'red' : null,
        },
      }
    }
  },

这是一个示例数据（您可以看到在访问它们以生成单元格时会嵌套标题，例如 date.2020-04-01。

const data = [
  {
    item: 'Do a thing',
    date: {
      '2020-04-01': 'Y',
      '2020-04-02': 'Y',
      '2020-04-03': 'N',
      '2020-04-04': 'Y',
    }
  },
]

需要明确的是，我的表格是使用一些非常标准的东西生成的：

const Table = ({ columns,  data }) => {
        const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
        } = useTable({
            columns,
            data,
        });


    return (
        <table {...getTableProps()} className="table">
            <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()}>
                        {row.cells.map(cell => {
                        return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                        })}
                    </tr>
                    )
                })}
            </tbody>
        </table>
        );
  }
4

3 回答 3

2

是的，您可以设置行和单元格的样式：

由于它是无头 UI 库，我们可以随意设置表格样式：

在您的 React 表格​​标记代码中，您基本上有一个表格行 (tr) 和表格数据 (td) html 元素。您可以在那里设置行或单元格样式，或者您可以扩展row.getRowProps或cell.getCellProps的功能-> 这也称为prop getter 模式（阅读更多：https ://kentcdodds.com/blog/how-to-give-rendering -control-to-users-with-prop-getters )

例如，在这里我为行或单元格设置样式：（控制台日志：cell.getCellProps() 并查看你得到了什么，现在你可以像这样扩展它的功能）

                 cell.getCellProps({
                     style: {color : 'red'}
                  })

将样式对象传递给 cell.getCellProps()

或者

                <div
                  className="tr"
                  {...row.getRowProps()}
                  style={{ ...row.getRowProps().style, ...getRowStyle(row) }}
                  >

在上面的代码中，getRowStyle(row)是返回特定行/单元格样式的自定义函数。

我也在 github 讨论中回答了同样的问题！快乐编码:)

于 2020-06-08T19:21:46.907 回答
2

1. 应用内联样式表头部分：

   <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((column) => (
            <th  {...column.getHeaderProps(column.getSortByToggleProps())}
                 style={{
                   borderBottom: "solid 3px red",
                   background: "aliceblue",
                   color: "black",
                   fontWeight: "bold",
                 }}
            >
            </th>
          ))}
        </tr>

2. 应用内联样式表数据部分：

        <tr {...row.getRowProps()}>
            {row.cells.map((cell) => {
              return (
                <td
                  {...cell.getCellProps()}
                  style={{
                    paddingLeft: "20px",
                    textAlign: "center",
                    border: "solid 1px gray",
                    background: "papayawhip",
                  }}
                >
                  {cell.render("Cell")}
                </td>
              );
            })}
          </tr>

3. 或者：您可以设置任何列的样式，如下所示：

使用条件渲染来分配不同的 className & 您可以使用外部 CSS 设置样式。

Header: "Status",
accessor: "status",
Cell: s => (
          <span className={s.value === Completed ? "GreenColor" : "RedColor"}>
            {s.value} 
          </span>
        ),

我使用这个技巧以绿色显示已完成的任务。

于 2021-06-11T19:05:30.900 回答
1

您可以在列定义中定义自定义道具，然后在渲染单元格时使用它们。

列定义：

const columns = [
  {
    id: 'item',
    Header: 'Things to Do',
    accessor: 'item',
    className: 'bg-red',
  },
  ...
}

使成为：

{row.cells.map((cell) => {
  return (
    <td
      {...cell.getCellProps()}
      className={`text-white ${cell.column.className ?? ""}`}
    >
      {cell.render("Cell")}
    </td>
  );
})}

在此示例中，text-white类将应用于每一行中的单元格，而bg-red仅应用于“待办事项”列中的单元格。

我在此示例中使用了 tailwind 类，但您也可以在 css 文件中手动添加所需的样式。

于 2021-06-10T09:13:53.173 回答