Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

246
Views
¿Cómo agregar clase en <tr> para la tabla de reacción en React Js?

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

}

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Pase el className dentro de PropsMethods.

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

Aquí hay un ejemplo de lo que posiblemente le gustaría lograr.

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!