Implementing custom onChange method for select all functionality

[amrendra007]

Hi everyone,

I have been trying to implement my own onChange method for select all checkbox functionality.
My requirement is when user click on Select All check box , it should only select some items out of all,
consider for now first 10 out of total 30 items, should not select all items on that page.

I tried but din't find any method,
toggleRowSelected only selects one row at a time.

How to approach this problem?
Any help, workaround much appreciated.
Super thanks in advance.

[ivan-sakoman]

Yes, I need some very similar behaviour. Do you know is there some hook or function that receive an array of ids and as result, check all rows with that id? or do I need to change the selection one by one with the toggleRowSelected?

[amrendra007]

There is no such methods available , you need to loop over rows and pass pass row.id to toggleRowSelected to toggle

Here is my snippet , i figured out workaround for this

//maintain a state variable for check an uncheck
const [disable, setDisable] = useState(false)

const pushCheckboxInRow = (
  hooks: any,
  selectedData: any,
  maxSelect: any,
  totalCount: any,
  allSelected,
  setAllSelected
) => {
  hooks.visibleColumns.push((columns: any) => [
    {
      id: 'selection',
      disableSortBy: true,
      Header: ({ getToggleAllRowsSelectedProps, toggleRowSelected, toggleAllRowsSelected, rows, data, ...rest }: any) => {
        const onChange = (e) => {
          setAllSelected(!allSelected)
          if (maxSelect && !allSelected) {
            let finalDataToSelect = maxSelect - selectedData.length
            let counter = 0;
            rows.forEach((tableRowData, index) => {
              if (!tableRowData.isSelected && counter < finalDataToSelect) {
                counter = counter + 1
                toggleRowSelected(tableRowData.id, !allSelected)
              }
            })
          } else {
            toggleAllRowsSelected(!allSelected)
          }
        }
        let checkboxProps = { ...getToggleAllRowsSelectedProps(), onChange, checked: allSelected }
        return (
          <div className="flex-v-center">
            <IndeterminateCheckbox
              {...checkboxProps}
              totalCount={totalCount}
              selectedData={selectedData}
              rowData={{ isHeader: true }}
              maxSelect={maxSelect}
              uniqueKey={uniqueKey}
              LinkComponent={LinkComponent}
            />
          </div>
        )
      },
      Cell: () => {
        //cell checkbox
      }
    },
    ...columns,
  ])
}