Выбор нескольких строк с помощью React-Table? (Shift + клик)

Question

Кто-нибудь знает способ выбора нескольких строк с помощью React-Table.Скажем, если мы хотим щелкнуть ячейку в строке, а затем нажать клавишу SHIFT, а затем выбрать другую строку и, возможно, раскрасить выделенные строки с помощью CSS?Это вообще возможно?

Answer 1

Я нашел способ сделать это.Дайте знать, если у вас появятся вопросы.В основном просто нужно реализовать самостоятельно.

   state = {
    selected: null,
    selectedRows: [],
  }

  previousRow = null;

  handleClick = (state, rowInfo) => {
    if (rowInfo) {
      return {
        onClick: (e) => {
          let selectedRows = [];
          // if shift key is being pressed upon click and there is a row that was previously selected, grab all rows inbetween including both previous and current clicked rows
          if (e.shiftKey && this.previousRow) {
            // if previous row is above current row in table
            if (this.previousRow.index < rowInfo.index) {
              for (let i = this.previousRow.index; i <= rowInfo.index; i++) {
                selectedRows.push(state.sortedData[i]);
              }
            // or the opposite
            } else {
              for (let i = rowInfo.index; i <= this.previousRow.index; i++) {
                selectedRows.push(state.sortedData[i]);
              }
            }
          } else {
            // add _index field so this entry is same as others from sortedData
            rowInfo._index = rowInfo.index;
            selectedRows.push(rowInfo);
            this.previousRow = rowInfo;
          }
          this.setState({ selected: rowInfo.index, selectedRows })
        },
        style: {
          // check index of rows in selectedRows against all rowInfo's indices, to match them up, and return true/highlight row, if there is a index from selectedRows in rowInfo/the table data
          background: this.state.selectedRows.some((e) => e._index === rowInfo.index) && '#9bdfff',
        }
      }
    } else {
      return {}
    }