Estoy trabajando en React js y ya implementé el componente común para la tabla de reacciones.
Estoy usando la biblioteca de tablas de reacción para la tabla.
Necesito agregar la clase personalizada para algunas filas específicas.
Ya intenté agregar un par de accesorios de fila también, pero no tuve éxito en eso.
Aquí está mi ejemplo de tabla
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> );}
Supongo que está tratando de agregar una clase o varias clases a algunas filas específicas en su tabla según algunos criterios.
Digamos que tiene que aplicar una clase a cada fila con un índice par. Esto se puede lograr así:
<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>Si desea evitar escribir lógica dentro de sus etiquetas, también puede usar el paquete de nombres de clase. Hará que su código se vea más limpio y fácil de leer.
Mi respuesta solo es válida si está tratando condicionalmente de agregar clases a sus filas.