Select only visible rows

[sebastianturbiarz]

Hi!

I'm using react-table v7 with client-side pagination and I've implemented the useRowSelect hook, as from the Examples page.
When I select a single row everything is good, but when I click on the Header checkbox every row is selected while my purpose is to select only the rows of the current page. Is there any tricky way to perform this behaviour? Thank you!

[akhilaravind]

https://react-table.tanstack.com/docs/examples/row-selection-and-pagination

Header: ({ getToggleAllPageRowsSelectedProps }) => ( <div> <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} /> </div>
This is the key point, update like this, it will only select the item shown in the current page

This document page has explained the solution for that

[00-TylerDurden]

This worked for me.

Previously selectAll checkbox was like:
Header: ({ getToggleAllRowsSelectedProps }) => (

<IndeterminateCheckbox type="checkbox" {...getToggleAllRowsSelectedProps()}/>

)

Issue resolved after replacing getToggleAllRowsSelectedProps with getToggleAllPageRowsSelectedProps.
Now, selectAll checkbox selects only rows in the current page. Below is the snippet:
Header: ({ getToggleAllRowsSelectedProps }) => (

<IndeterminateCheckbox type="checkbox" {...getToggleAllRowsSelectedProps()}/>

)

Thanks a lot, @akhilaravind . Saved my day.

[nmaties]

FYI - for react-table V8 you can do:

header: ({ table }) => (
                <IndeterminateCheckbox
                  {...{
                    checked: table.getIsAllRowsSelected(),
                    indeterminate: table.getIsSomeRowsSelected(),
                    onChange: table.getToggleAllPageRowsSelectedHandler(),
                  }}
                />
              ),
              cell: ({ row }) => (
                <div className="w-auto">
                  <IndeterminateCheckbox
                    {...{
                      checked: row.getIsSelected(),
                      disabled: !row.getCanSelect(),
                      indeterminate: row.getIsSomeSelected(),
                      onChange: row.getToggleSelectedHandler()
                    }}
                  />
                </div>
              )

https://tanstack.com/table/v8/docs/api/features/row-selection#gettoggleallpagerowsselectedhandler This is the function that selects only the rows from the current page (visible).

[jigglycrumb]

Just in case anyone comes across this: To make the header checkbox work correctly, I had to change all three props to the "PageRows" functions:

                <IndeterminateCheckbox
		            {...{
		              checked: table.getIsAllPageRowsSelected(),
		              indeterminate: table.getIsSomePageRowsSelected(),
		              onChange: table.getToggleAllPageRowsSelectedHandler(),
		            }}
                />