反应数据表网格中的样式单元格

发布于 2025-01-16 13:34:46 字数 232 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只是偏爱你 2025-01-23 13:34:46

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

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。

请注意，如果您计划对示例进行样板化，则需要通过 props 传递 tableContent 。

You can assign classNames within the cell object. Please see the [hopefully?] complete example below:

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)
            }}
        />
    );
  }

In this example, you would need to add the declared class to your CSS styling sheet. Here is my source in case you have follow-up questions - https://github.com/romanstan1/react-datasheet-header.

Note that if you plan to boilerplate the example, you will need to pass tableContent in via props.

回复收藏 0 原文

终难遇 2025-01-23 13:34:46

您可以使用 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
     }            
  }}
/>

You can use cellClassName prop to achieve it.
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
     }            
  }}
/>

回复收藏 0 原文

~没有更多了~