Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

214
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda