add selection all cells in row or col

src/components/table/Table.ts

@@ -28,7 +28,7 @@ export class Table extends ExcelComponent {
   }
 
   prepare() {
-    this.selection = new TableSelection();
+    this.selection = new TableSelection(this.$root);
   }
 
   init() {

src/components/table/TableSelection.ts

@@ -5,9 +5,11 @@ export class TableSelection {
   static selectedClassName = 'selected';
   private group: Dom[];
   public current: Dom;
+  public rootTable: Dom;
 
-  constructor() {
+  constructor(rootTable: Dom) {
     this.group = [];
+    this.rootTable = rootTable;
   }
 
   get selectedIds() {
@@ -40,7 +42,7 @@ export class TableSelection {
     this.group = [];
   }
 
-  selectGroup($el: Dom) {
+  selectTo($el: Dom) {
     const startCellParams = getParamsFromCellId(this.current.data.id || startCellId);
     const selectedCellParams = getParamsFromCellId($el.data.id || startCellId);
 
@@ -53,14 +55,22 @@ export class TableSelection {
 
     for (let row = startRow; row <= endRow; row++) {
       for (let col = startCol; col <= endCol; col++) {
-        const cell = $(`[data-id="${row}:${col}"]`);
-
-        this.group.push(cell);
-        cell.addClass(TableSelection.selectedClassName);
+        const $cell = $(`[data-id="${row}:${col}"]`);
+        this.addCellToSelection($cell);
       }
     }
   }
 
+  selectGroupies($cells: Dom[]) {
+    this.clearSelection();
+    $cells.forEach($cell => this.addCellToSelection($cell));
+  }
+
+  addCellToSelection($cell: Dom) {
+    this.group.push($cell);
+    $cell.addClass(TableSelection.selectedClassName);
+  }
+
   applyStyle(style: CSSStyleRule) {
     this.group.forEach(el => el.css(style));
   }

src/components/table/handlers/table.select.handler.ts

@@ -19,9 +19,29 @@ export function selectHandler(event: MouseEvent | KeyboardEvent, selection: Tabl
   callback?.();
 
   function onMouseDownHandler() {
+    const target = $(event.target as HTMLElement);
+
     if (isCell(event)) {
-      if (event.shiftKey) selection.selectGroup($(event.target as HTMLElement));
-      else selection.select($(event.target as HTMLElement));
+      if (event.shiftKey) selection.selectTo(target);
+      else if (event.ctrlKey) selection.addCellToSelection(target);
+      else selection.select(target);
+    } else {
+      const row = target.closest('[data-header="row"]');
+      const col = target.closest('[data-header="col"]');
+      const resizer = target.closest('[data-resizer]');
+
+      if (row.$el && !resizer.$el) {
+        const cells = row.closest('[data-row]').findAll('[data-type="cell"]');
+        const $cells = Array.from(cells).map(cell => $(cell as HTMLElement));
+
+        selection.selectGroupies($cells);
+      } else if (col.$el && !resizer.$el) {
+        const colNumber = col.data.col;
+        const colls = selection.rootTable.findAll(`[data-col="${colNumber}"]`);
+        const $cells = Array.from(colls).filter(el => el !== col.$el).map(el => $(el as HTMLElement));
+
+        selection.selectGroupies($cells);
+      }
     }
   }
 

src/components/table/table.template.ts

@@ -20,7 +20,7 @@ function createCell(cellContent = '', colIndex = 1, rowIndex = 1) {
 
 function createCol(columnContent = '', index = 1) {
   return `
-    <div class="column" data-type="resizable" data-col="${index}">
+    <div class="column" data-type="resizable" data-col="${index}" data-header="col">
         ${columnContent}
         <div class="col-resize" data-resize="col"></div>
     </div>
@@ -30,7 +30,7 @@ function createCol(columnContent = '', index = 1) {
 function createRow(dataContent = '', infoContent = '', needResize = true, rowIndex = -1) {
   return `
     <div class="row" data-type="resizable" data-row="${rowIndex}">
-      <div class="row-info">
+      <div class="row-info" data-header="row">
         ${infoContent}
         ${needResize ? '<div class="row-resize" data-resize="row"></div>' : ''}
       </div>

src/styles/components/table.scss

@@ -8,6 +8,7 @@
   top: $header-height + $toolbar-height + $formula-height;
   overflow: auto;
   font-size: $default-cell-font-size;
+  cursor: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Small_arrow_pointing_left.svg/1200px-Small_arrow_pointing_left.svg.png') !important;
   .row{
     display: flex;
     flex-direction: row;
@@ -75,7 +76,6 @@
       opacity: 1 !important;
     }
   }
-
   .row-resize{
     position: absolute;
     bottom: 0;
@@ -91,4 +91,10 @@
       opacity: 1 !important;
     }
   }
+  [data-header="row"] {
+    cursor: e-resize;
+  }
+  [data-header="col"] {
+    cursor: n-resize;
+  }
 }