javascript - 如何在 React Js 的 for react-table 中添加类？

Question

我正在使用 React js，并且我已经实现了 react-table 的通用组件

我正在为表使用react-table库。

我需要为某些特定行添加自定义类。

我已经尝试添加几个行道具，但我没有成功。

这是我的表格示例

import React from 'react';
import { useTable, useExpanded } from 'react-table';

function Table({ className, colSpan, columns, data }) {
// Use the state and functions returned from useTable to build your UI
const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: { expanded },
} = useTable(
    {
        className,
        colSpan,
        columns,
        data,
    },
    useExpanded // Use the useExpanded plugin hook
);

// Render the UI for your table
return (
    <table className={className} {...getTableProps()}>
        <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>
                );
            })}
            {rows.length === 0 && (
                <tr>
                    <td colSpan={colSpan}>No Record Found</td>
                </tr>
            )}
        </tbody>
    </table>
);

}

标签： javascriptreactjsreact-table

Answer 1

在 PropsMethods 中传递 className。

<tr {...row.getRowProps({className: 'row'})}>
      {row.cells.map(cell => {
       return <td {...cell.getCellProps({className: 'cell'})}> 
           {cell.render('Cell')}</td>
            })}
   </tr>

这是您可能想要实现的目标的示例。