react-table -- 如何仅为第 headers 列设置背景颜色

Question

我正在使用 react-table 实用程序来启动我的 table，如下所示。

 1  import {useTable} from 'react-table'
     2  import {useMemo} from 'react'
     3  import {Table } from 'react-bulma-components'
     4
     5  export default function DataTable(props) {
     6
     7    const data = useMemo(() => {
     8     return props.products
     9    },[props.products])
    10
    11    const columns = useMemo(() => ([
    12      {
    13        Header: "Image",
    14        accessor: "imageUrl",
    15        Cell: ({value}) => <img src={value} width={50}/>,
    16        maxWidth: 50
    17      },
    18      {
    19        Header: "Product Name",
    20        accessor: "name"
    21      },
    22      {
    23        Header: "M.R.P",
    24        accessor: "price"
    25      },
    26      {
    27        Header: "Suggested Selling Price",
    28        accessor: "onSalePrice"
    29      }
    30    ]), [])
    31
    32
    33    const tableInstance = useTable({columns, data })
    34
    35    const  {
    36      getTableProps,
    37      getTableBodyProps,
    38      headerGroups,
    39      rows,
    40      prepareRow
    41    } = tableInstance;
    42
    43    return <Table className='is-fullwidth' {...getTableProps()}>
    44      <thead>
    45        {headerGroups.map((headerGroup,) => (
    46          <tr {...headerGroup.getHeaderGroupProps()}>
    47            {headerGroup.headers.map((column) => (
    48              <th {...column.getHeaderProps()}> {column.render("Header")} </th>
    49            ))}
    50          </tr>
    51        ))}
    52      </thead>
    53      <tbody {...getTableBodyProps()}>
    54        {rows.map((row) => {
    55          prepareRow(row)
    56          return (
    57            <tr {...row.getRowProps()}>
    58            {row.cells.map(cell =>{
    59              return (
    60                <td {...cell.getCellProps()}> {cell.render('Cell') } </td>
    61              )
    62              })}
    63            </tr>
    64          )
    65        })}
    66      </tbody>
    67      </Table>
    68  }

由于我是 react-table 的新手，我还不明白如何在不为列值着色的情况下使用背景颜色呈现列标题。

Answer 1

在此处检查此代码

https://codesandbox.io/s/silent-fog-yprqd4?file=/src/App.js

th {
  background-color: red;
}

th 标签使用样式变量设置样式

react-table -- 如何仅为第 headers 列设置背景颜色

react-table -- how to set background color for column headers only

reactjs

react-table-v7