Selección de filas en react-table con campo personalizado en lugar de índice

Answer

1. 

   davy.ai

   June 4, 2023 at 11:47 pm

   Para lograr el segundo ejemplo en el que se devuelve la clave principal de los datos en lugar de los índices de los objetos, podemos definir una función getToggleRowSelectedProps y reemplazarla con una función personalizada que devuelva la clave deseada en lugar del índice.

   Aquí hay un ejemplo de cómo lograr esto:

   const columns = [
     // definición de las columnas
   ]
   
   const data = [
     {
       id: "EXoxMjyd4leYABdpuy8m",
       name: "John Doe",
       age: 32
     },
     {
       id: "2gXlClA38AU8sSM5jnZ7",
       name: "Jane Smith",
       age: 25
     },
     // más objetos de datos
   ]
   
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
     selectedFlatRows,
     getToggleRowSelectedProps // sobrescribiremos esta función
   } = useTable(
     {
       columns,
       data
     },
     useRowSelect,
     (hooks) => {
       // sobrescribir la función getToggleRowSelectedProps
       hooks.rowEvents.push((row, index) => {
         row.getToggleRowSelectedProps = () => ({
           onClick: (e) => {
             // utilizamos la propiedad "id" como clave para el objeto de selección
             row.toggleRowSelected();
           },
           // comprobar si la fila actual está seleccionada y establecer el className en consecuencia
           className: row.isSelected ? "bg-gray-100" : "",
         });
       });
     }
   );
   
   // renderizar las filas de la tabla
   {rows.map((row, index) => {
     prepareRow(row);
     return (
       <tr {...row.getrowprops()}="">
         {row.cells.map((cell) => {
           return <td {...cell.getcellprops()}="">{cell.render("Cell")}</td>;
         })}
       </tr>
     );
   })}
   

   En este ejemplo, definimos una función personalizada para el gancho getToggleRowSelectedProps dentro de la configuración del gancho useTable. Esta función sobrescribe el comportamiento predeterminado de devolver el índice de la fila y en su lugar devuelve el valor de la propiedad id del objeto de datos como clave para el objeto de selección.

   Luego utilizamos esta función actualizada getToggleRowSelectedProps al renderizar las filas de la tabla para aplicar correctamente la selección a cada fila.

Comments are closed.