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

user_7325563 0
Viewed 3447

I am working in React js and I already implemented the common component 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>
);

}

react-table reactjs javascript
2 Answers

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.

user_137052700

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.

user_154795300
Related