javascript - How to add class in the <tr> for react-table in React Js? - Stack Overflow

admin管理员组

文章数量:1432384

I am working in React js and I already implemented the mon ponent for the react-table

I am using react-table library for the table.

I need to add the custom class for some specific rows.

I already try to add couple of row props as well but i didn't get success in that.

Here is my table example

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

}

I am working in React js and I already implemented the mon ponent for the react-table

I am using react-table library for the table.

I need to add the custom class for some specific rows.

I already try to add couple of row props as well but i didn't get success in that.

Here is my table example

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

}

• javascript
• reactjs
• react-table

Share Improve this question Follow asked Sep 27, 2021 at 5:23 NickNick 55111 gold badge44 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Pass the className inside the PropsMethods.

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

Here is an example of what you would possibly like to achieve.

I am guessing that you are trying to add a class or multiple classes to some specific rows in your table based on some criteria.

Let's say you have to apply a class to every row with an even index. This can be achieved like so:

<tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
                prepareRow(row);
                return (
                    <tr 
                      className = {i%2 === 0? "your-classname": null} 
                      {...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>

If you want to avoid writing logic inside your tags then you can also use the classnames package. It will make your code look cleaner and easy to read.

My answer is only valid if you are conditionally trying to add classes to your rows.

本文标签： javascriptHow to add class in the lttrgt for reacttable in React JsStack Overflow