I am using react-table utility to power up my table, as below.
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 }
As I am new to react-table, I yet don't understand how to render column headings with a background color, without coloring the column values.
check this code here
https://codesandbox.io/s/silent-fog-yprqd4?file=/src/App.js
th {
background-color: red;
}
the th tag is styled with a style variable