0

I am trying to implement conditional select and selectAll in react-bootstrap-table-next. Meaning I want to disable the selectRow elements when a condition is true.

Case:

A user uploads a file - file has an Upload DateTime - They shouldn't be allowed to Delete the file unless 15 minutes has passed by.

Logic:

moment() >= moment(row.upload_date).add(15, 'minutes')

UI Implementation:

enter image description here

selectRow defenition:

const selectRow = {
mode: "checkbox",
selected: selectedFiles.id,
onSelect: (row, isSelect, rowIndex, e) => {
  if ( moment() >= moment(row.upload_date).add(15, 'minutes')) {
    handleOnSelect(row, isSelect);
  } else {
    return false;
  }
},
onSelectAll:(rows, isSelected) => {
  if(isSelected) {
    for(let i = 0 ; i < rows.length ; i++){
      if (moment() >= moment(rows[i].upload_date).add(15, 'minutes')){
        handleOnSelectAll(rows[i], isSelected);
      } else {
        return false;
      }
    }
  } else {
    return false;
  }
},
selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
  <Form.Check
    custom
    type="checkbox"
    label={(<></>)}
    ref={ (input) => {
      if (input) input.indeterminate = indeterminate;
    } }
    { ...rest }
  />
),
selectionRenderer: ({ mode ,...rest }) => (
    <Form.Check 
      custom
      type="checkbox"
      label={(<></>)}
      type={ mode } { ...rest } 
    />
)
};

handleOnSelect implementation:

const handleOnSelect = (row, isSelect) => {
// Selected file
if (isSelect) {
  if (
    !selectedFiles.length ||
    (selectedFiles.length && selectedFiles[0].id !== row.id)
  ) {
    setSelectedFiles([...selectedFiles, row]);
  }
}
// Deselected file
else {
  setSelectedFiles(selectedFiles.filter((x) => x.id !== row.id));
}
};

handleOnSelect is working fine. enter image description here

handleOnSelectAll implementation:

const handleOnSelectAll = (isSelected, rows) => {
console.log(rows)
let files = rows.map((r) => r);
console.log(files)
// Selected all files
if (isSelected) {
  setSelectedFiles(files);
}
// Deselected all files
else {
  setSelectedFiles([]);
}
};

handleOnSelectAll isn't working as expected. enter image description here

When we click on select all it should not check the file which is recently uploaded. I have referred to react-bootstrap-table-next API documentation but I am failing to implement that.

Please guide me, Thanks

1 Answer 1

1

Refer to react-bootstrap-table2 Styorybook

handleOnSelectAll = (isSelect, rows) => {
 if (isSelect) {
  return rows.filter(r => r.id >= 3).map(r => r.id);
 }
}
Sign up to request clarification or add additional context in comments.

1 Comment

did you also implement pagination for your use case?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.