react-datasheet-grid 中的样式单元格

Question

我遇到了一个非常好的包，名为react-datasheet-grid。 我想根据特定单元格的值对其进行着色。 当我构建表格（数据表）时，我按照文档所述使用列数组来完成。 当我想要设计它时，只有整个表格的样式示例。 我想设置特定单元格的样式，但我不知道如何实现它。

Answer 1

您可以在单元格对象中分配类名。请参阅下面的[希望如此？]完整的示例：

import ReactDataSheet from 'react-datasheet';
import React, { useState } from "react"; 

export default function DataSheetExample() {

    let tableContent= [
        [   
            {
                value:  "Something I want to style", 
                className : "my-style"
            },
            {
                value:  "Something else that I will style",
                className : "my-style"
            }
        ],
        [{value:  5}, {value:  5}]
        ]

    const [dataSheetGrid, setDataSheetGrid] = useState(tableContent);

    return (
        <ReactDataSheet
            data={tableContent}
            valueRenderer={cell => cell.value}
            onCellsChanged={changes => {
                const grid = dataSheetGrid.map(row => [...row]);
                changes.forEach(({ cell, row, col, value }) => {
                    grid[row][col] = { ...grid[row][col], value };
                });
                setDataSheetGrid(grid)
            }}
        />
    );
  }

在此示例中，您需要将声明的类添加到 CSS 样式表中。这是我的来源，以防您有后续问题 - https://github.com/romanstan1/react-datasheet-header。

请注意，如果您计划对示例进行样板化，则需要将

tableContent

传入 via 属性。

Answer 2

您可以使用 cellClassName 属性来实现它。
https://react-datasheet-grid.netlify.app/docs/api-reference/columns/#cellclassname

<DataSheetGrid
  value={data}
  onChange={setData}
  columns={columns}
  cellClassName={({ rowData, rowIndex, columnId }) => {
     if(rowData.firstName === 'Alice'){
        return 'bg-red' // a class defined in our stylesheet
     }            
  }}
/>