Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

215
Vistas
How to toggle row selection mode in react-table v7 with useRowSelect

I'm facing a problem with react-table v7.8.0 and useRowSelect plugin. All I want is to toggle the selection mode by setting a state variable, so that I'm able to show or hide the additional selection column just by clicking a button like "toggle selection mode for table".

That's what I'm trying in my code:

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    rows,
    state,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    allColumns,
    state: { pageIndex, pageSize, selectedRowIds },
    preGlobalFilteredRows,
    setGlobalFilter
  } = useTable({    columns, 
                    data, 
                    
                }, 
                    useGlobalFilter, 
                    useSortBy, 
                    usePagination,
                    useRowSelect,
                    hooks => {
                        
                        
                            hooks.visibleColumns.push(columns => { 
                                
                                return [
                                (tableRowsSelectable === true ? {
                                    id: 'selection',
                                    Header: ({getToggleAllRowsSelectedProps}) => (
                                        <div><Checkbox {...getToggleAllRowsSelectedProps()} /></div>
                                    ),
                                    Cell: ({row}) => (<div><Checkbox {...row.getToggleRowSelectedProps()} /></div>)
                                }: []),
                                ...columns,
                            ]})
                            
                    })

The tableRowsSelectable, that is set as property (either true or false) for the react-table component, is my attempt to control the selection mode. But that does not work. Nothing happens, when I change tableRowsSelectable.

By the way: Do not consider Checkbox component. It is just a custom component and works as expected.

What else can I do?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda