v3 Feature Request: Provide Standard Select Functionality via Ctrl, Shift and Ctrl+Shift

[PRISMAY]

Reproduce:

1. Go to https://bossanova.uk/jexcel/v3/examples/react for an available worksheet
2. Select row 1, then select row 4 with Ctrl key down

Expected Result: Rows 1 and 4 are selected.

Actual Results: Rows 1 through 4 are all selected (Shift select behavior)

Reproduce:

1. Go to https://bossanova.uk/jexcel/v3/examples/react for an available worksheet
2. Select cell A1, then select D1 with Ctrl key down

Expected Result: Cells A1 and D1 to be selected.

Actual Results: Last cell clicked, D1, is the only one selected.

Additional Information: If you have Excel, you can see how the combinations of selecting rows, columns and cells with the combination of Ctrl, Shift and/or Ctrl+Shift work. If you do't have Excel, you can see the same behavior in Google Sheets here: https://docs.google.com/spreadsheets.

Ctrl - Adds row, column or cell to current selections Shift - Adds a range (of rows, columns or cells) from current selection to target and replaces anything that is currently selected. Ctrl + Shift - Adds a range from last item (row, column or cell) selected to target to current selection set

[PRISMAY]

Hi Paul, Just wanted to check to see what the plan is for implementing this feature please? We have customers asking for it too. Thanks much.

[iwalucas]

If someone is interested, here is a workaround:

let selected_rows = [];

let table = document.querySelector('#spreadsheet table');
      table.addEventListener("click", (event) => {
        let row = event.target.closest('tr');

        if (!row) return;

        let rowIndex = Array.from(table.rows).indexOf(row);

        if (event.ctrlKey || event.metaKey) {
          let index = selected_rows.indexOf(rowIndex);
          if (index > -1) {
            selected_rows.splice(index, 1);
            row.classList.remove('selected2'); //using selected2 as *selected* gets removed by vanilla code
          } else {
            selected_rows.push(rowIndex);
            row.classList.add('selected2');
          }
        }
      });


document.addEventListener('keydown', (event) => {
      if ((event.ctrlKey || event.metaKey) && event.key === 'Delete') {
        selected_rows.sort(function (a, b) {
          return b - a;
        });
        selected_rows.forEach((index) => {
          yourJSpreadsheetObject.deleteRow(index - 1);
        });
        selected_rows = [];
        event.preventDefault();
      }
    });
 document.addEventListener('click',(event)=>{
      if (!(event.ctrlKey || event.metaKey)){
        // remove selected2 class from all rows
        var rows = document.querySelectorAll('tr.selected2');
        rows.forEach((row) => {
          row.classList.remove('selected2');
        });
        selected_rows = [];
      }
    })

and some css:
.selected2 {
  background-color: #e6e6e6 !important;
}