CODEWITHSUNDEEP
javascriptreactjsreact-table
Nick
Nick

Reputation: 561

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

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

}

Upvotes: 3

Views: 10218

Answers (2)

Jericho
Jericho

Reputation: 174

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.

Upvotes: 1

Rishabh
Rishabh

Reputation: 263

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.

Upvotes: 0

Related Questions