0.0.233 - bug fix for setting the add new column style using frameCom…

…ponentsStyle when stripedRows are set

component/.eslintrc.json

@@ -27,7 +27,7 @@
   },
   "overrides": [
     {
-      "files": ["rollup.config.js", "web-test-runner.config.js"],
+      "files": ["rollup.config.js", "web-dev-server.config.js", "web-test-runner.config.js"],
       "env": {
         "node": true
       }

component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "active-table",
-  "version": "0.0.232",
+  "version": "0.0.233",
   "description": "Framework agnostic table component for editable data experience",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",

component/src/activeTable.ts

@@ -66,6 +66,16 @@ import {Pagination} from './types/pagination';
 import {Render} from './utils/render/render';
 import {Overflow} from './types/overflow';
 
+// WORK - the border is half rounded
+// content="[]"
+// tableStyle='{"borderRadius": "8px"}'
+// frameComponentsStyle='{
+// "style": {
+//   "default": {"backgroundColor": "blue"},
+// },
+// "inheritHeaderColors": false
+// }'
+
 @customElement('active-table')
 export class ActiveTable extends LitElement {
   @property({type: Function})
@@ -290,9 +300,6 @@ export class ActiveTable extends LitElement {
   @state()
   _addColumnCellsElementsRef: HTMLElement[] = [];
 
-  @state()
-  _columnGroupRef?: HTMLElement;
-
   @state()
   _focusedElements: FocusedElements = FocusedElementsUtils.createEmpty();
 

component/src/elements/table/addNewElements/column/addNewColumnElement.ts

@@ -36,10 +36,7 @@ export class AddNewColumnElement {
       GenericElementUtils.NOT_SELECTABLE_CLASS,
       AddNewColumnElement.ADD_COLUMN_CELL_CLASS
     );
-    Object.assign(cell.style, at._defaultColumnsSettings.cellStyle, at._frameComponents.style?.default, {
-      // backgroundColor controlled by column group - REF-17
-      backgroundColor: '',
-    });
+    Object.assign(cell.style, at._defaultColumnsSettings.cellStyle, at._frameComponents.style?.default);
     AddNewColumnEvents.setEvents(at, cell);
     return cell;
   }
@@ -55,7 +52,9 @@ export class AddNewColumnElement {
   }
 
   private static createDataCell(at: ActiveTable) {
-    return AddNewColumnElement.createCell(at, false);
+    const dataCell = AddNewColumnElement.createCell(at, false);
+    Object.assign(dataCell.style, at._frameComponents.cellColors.data.default);
+    return dataCell;
   }
 
   private static isDisplayed(addColumnCellsElementsRef: HTMLElement[]) {
@@ -82,13 +81,13 @@ export class AddNewColumnElement {
 
   // prettier-ignore
   private static toggleEachCell(canAddMore: boolean, tableBodyElement: HTMLElement,
-      addColumnCellsElementsRef: HTMLElement[], columnGroupElement: HTMLElement, cellColors: FrameComponentsCellsColors) {
+      addColumnCellsElementsRef: HTMLElement[], cellColors: FrameComponentsCellsColors) {
     addColumnCellsElementsRef.forEach((cell, rowIndex) => {
       AddNewColumnElement.setDisplay(cell, canAddMore, tableBodyElement, rowIndex);
     });
     if (!canAddMore) {
       // remove does not trigger mouse leave event, hence need to trigger it manually
-      setTimeout(() => AddNewColumnEvents.toggleColor(columnGroupElement, false, addColumnCellsElementsRef, cellColors))
+      setTimeout(() => AddNewColumnEvents.toggleColor(false, addColumnCellsElementsRef, cellColors))
     }
   }
 
@@ -100,19 +99,19 @@ export class AddNewColumnElement {
 
   // prettier-ignore
   public static toggle(at: ActiveTable, isInsert: boolean) {
-    const {_addColumnCellsElementsRef: addColumnCellsElementsRef, _tableBodyElementRef, _columnGroupRef: columnGroup,
+    const {_addColumnCellsElementsRef: addColumnCellsElementsRef, _tableBodyElementRef,
       _frameComponents: {displayAddNewColumn, cellColors: colors}} = at;
-    if (!displayAddNewColumn || !_tableBodyElementRef || !columnGroup) return;
+    if (!displayAddNewColumn || !_tableBodyElementRef) return;
     const canAddMore = MaximumColumns.canAddMore(at);
     // do not toggle if already in the intended state
     if (canAddMore === AddNewColumnElement.isDisplayed(addColumnCellsElementsRef)) return;
     // for isTableAtMaxWidth to be triggered correctly for maxWidth, add cells before it and remove after it
     if (canAddMore) {
-      AddNewColumnElement.toggleEachCell(canAddMore, _tableBodyElementRef, addColumnCellsElementsRef, columnGroup, colors);
+      AddNewColumnElement.toggleEachCell(canAddMore, _tableBodyElementRef, addColumnCellsElementsRef, colors);
       AddNewColumnElement.changeTableWidths(at, canAddMore, isInsert);
     } else {
       AddNewColumnElement.changeTableWidths(at, canAddMore, isInsert);
-      AddNewColumnElement.toggleEachCell(canAddMore, _tableBodyElementRef, addColumnCellsElementsRef, columnGroup, colors);
+      AddNewColumnElement.toggleEachCell(canAddMore, _tableBodyElementRef, addColumnCellsElementsRef, colors);
     }
   }
 }

component/src/elements/table/addNewElements/column/addNewColumnEvents.ts

@@ -4,8 +4,9 @@ import {CellStateColorsR} from '../../../../types/cellStateColors';
 import {ActiveTable} from '../../../../activeTable';
 
 export class AddNewColumnEvents {
-  // REF-17
-  private static setHeaderStyle(headerCell: HTMLElement, headerColors: CellStateColorsR, isHighlight: boolean) {
+  private static readonly NUMBER_OF_HIGHLIGHT_CHUNKS = 3;
+
+  private static setHeaderCellStyle(headerCell: HTMLElement, headerColors: CellStateColorsR, isHighlight: boolean) {
     const {default: defaultColors, hover: hoverColors} = headerColors;
     // set here and not on addColumnCol because toggling 'color' on that element does not change cell 'color' style
     // additionally because frame elements header cells can inherit the user set header style, we must set it
@@ -14,23 +15,44 @@ export class AddNewColumnEvents {
     headerCell.style.backgroundColor = isHighlight ? hoverColors.backgroundColor : defaultColors.backgroundColor;
   }
 
-  // REF-17
+  private static setDataCellStyle(elements: HTMLElement[], backgroundColor: string) {
+    // executed asynchronously
+    setTimeout(() => {
+      elements.forEach((element) => {
+        element.style.backgroundColor = backgroundColor;
+      });
+    });
+  }
+
+  // prettier-ignore
+  private static setDataCellsStyle(isHighlight: boolean, addColumnCellsElementsRef: HTMLElement[],
+      data: CellStateColorsR) {
+    const backgroundColor = isHighlight ? data.hover.backgroundColor : data.default.backgroundColor;
+    const dataArray = addColumnCellsElementsRef.slice(1);
+    const chunkSize = Math.ceil(dataArray.length / AddNewColumnEvents.NUMBER_OF_HIGHLIGHT_CHUNKS);
+    // The reason why we are not using web workers is because they only accept serializable arguments and not dom elements
+    for (let i = 0; i < dataArray.length; i += chunkSize) {
+      const chunk = dataArray.slice(i, i + chunkSize);
+      AddNewColumnEvents.setDataCellStyle(chunk, backgroundColor);
+    }
+  }
+
   // prettier-ignore
-  public static toggleColor(columnGroup: HTMLElement, isHighlight: boolean, addColumnCellsElementsRef: HTMLElement[],
+  public static toggleColor(isHighlight: boolean, addColumnCellsElementsRef: HTMLElement[],
       cellColors: FrameComponentsCellsColors) {
-    const addColumnCol = columnGroup.children[columnGroup.children.length - 1] as HTMLElement;
     const {data, header} = cellColors;
-    addColumnCol.style.backgroundColor = isHighlight ? data.hover.backgroundColor : data.default.backgroundColor;
     const headerCell = addColumnCellsElementsRef[0];
-    if (headerCell) AddNewColumnEvents.setHeaderStyle(headerCell, header, isHighlight);
+    if (headerCell) AddNewColumnEvents.setHeaderCellStyle(headerCell, header, isHighlight);
+    if (addColumnCellsElementsRef.length > 1) {
+      AddNewColumnEvents.setDataCellsStyle(isHighlight, addColumnCellsElementsRef, data);
+    }
   }
 
   // prettier-ignore
   public static setEvents(at: ActiveTable, cellElement: HTMLElement): void {
-    const {_columnGroupRef, _addColumnCellsElementsRef: ref, _frameComponents: {cellColors}} = at;
-    if (!_columnGroupRef) return;
-    cellElement.onmouseenter = AddNewColumnEvents.toggleColor.bind(this, _columnGroupRef, true, ref, cellColors);
-    cellElement.onmouseleave = AddNewColumnEvents.toggleColor.bind(this, _columnGroupRef, false, ref, cellColors);
+    const {_addColumnCellsElementsRef: ref, _frameComponents: {cellColors}} = at;
+    cellElement.onmouseenter = AddNewColumnEvents.toggleColor.bind(this, true, ref, cellColors);
+    cellElement.onmouseleave = AddNewColumnEvents.toggleColor.bind(this, false, ref, cellColors);
     cellElement.onclick = InsertNewColumn.insertEvent.bind(at);
   }
 }

component/src/elements/table/tableElement.ts

@@ -9,7 +9,6 @@ import {InsertRemoveColumnSizer} from '../columnSizer/utils/insertRemoveColumnSi
 import {FullTableOverlayElement} from '../fullTableOverlay/fullTableOverlayElement';
 import {InsertNewRow} from '../../utils/insertRemoveStructure/insert/insertNewRow';
 import {AddNewColumnElement} from './addNewElements/column/addNewColumnElement';
-import {ColumnGroupElement} from './addNewElements/column/columnGroupElement';
 import {UpdateIndexColumnWidth} from '../indexColumn/updateIndexColumnWidth';
 import {StickyPropsUtils} from '../../utils/stickyProps/stickyPropsUtils';
 import {ColumnDropdown} from '../dropdown/columnDropdown/columnDropdown';
@@ -109,13 +108,8 @@ export class TableElement {
 
   // CAUTION-4 - add row cell is created and ref assigned here - then it is added post render in addFrameBodyElements
   public static createInfrastructureElements(at: ActiveTable) {
-    FrameComponentsColors.setEventColors(at); // needs to be before the creation of column group element
+    FrameComponentsColors.setEventColors(at);
     at._tableElementRef = TableElement.createTableElement(at);
-    if (at._frameComponents.displayAddNewColumn) {
-      // needs to be appended before the body
-      at._columnGroupRef = ColumnGroupElement.create(at._frameComponents.cellColors.data);
-      at._tableElementRef.appendChild(at._columnGroupRef);
-    }
     at._tableBodyElementRef = TableElement.createTableBody(at._stickyProps.header);
     at._addRowCellElementRef = AddNewRowElement.create(at); // REF-18
     at._tableElementRef.appendChild(at._tableBodyElementRef);

component/src/utils/insertRemoveStructure/insert/insertNewCell.ts

@@ -1,7 +1,6 @@
 import {ColumnDropdownCellOverlay} from '../../../elements/dropdown/columnDropdown/cellOverlay/columnDropdownCellOverlay';
 import {HeaderIconCellElement} from '../../../elements/cell/cellsWithTextDiv/headerIconCell/headerIconCellElement';
 import {InsertRemoveColumnSizer} from '../../../elements/columnSizer/utils/insertRemoveColumnSizer';
-import {ColumnGroupElement} from '../../../elements/table/addNewElements/column/columnGroupElement';
 import {DateCellElement} from '../../../elements/cell/cellsWithTextDiv/dateCell/dateCellElement';
 import {StaticTableWidthUtils} from '../../tableDimensions/staticTable/staticTableWidthUtils';
 import {CheckboxCellElement} from '../../../elements/cell/checkboxCell/checkboxCellElement';
@@ -100,7 +99,6 @@ export class InsertNewCell {
     InsertNewCell.insert(at, rowElement, newCellElement, processedCellText, isNewText, rowIndex, columnIndex);
     InsertNewCell.convertCell(at, rowIndex, columnIndex, newCellElement); // need text set before conversion (checkbox)
     if (rowIndex === 0) {
-      if (at._frameComponents.displayAddNewColumn) ColumnGroupElement.update(at);
       if (isNewText) StaticTableWidthUtils.changeWidthsBasedOnColumnInsertRemove(at, true); // REF-11
       ColumnSettingsBorderUtils.updateSiblingColumns(at, columnIndex);
     } else {

component/src/utils/insertRemoveStructure/remove/removeColumn.ts

@@ -2,7 +2,6 @@ import {RowDropdownCellOverlay} from '../../../elements/dropdown/rowDropdown/cel
 import {ToggleAdditionElements} from '../../../elements/table/addNewElements/shared/toggleAdditionElements';
 import {AddNewColumnElement} from '../../../elements/table/addNewElements/column/addNewColumnElement';
 import {InsertRemoveColumnSizer} from '../../../elements/columnSizer/utils/insertRemoveColumnSizer';
-import {ColumnGroupElement} from '../../../elements/table/addNewElements/column/columnGroupElement';
 import {StaticTableWidthUtils} from '../../tableDimensions/staticTable/staticTableWidthUtils';
 import {ColumnSettingsBorderUtils} from '../../columnSettings/columnSettingsBorderUtils';
 import {ColumnSettingsWidthUtils} from '../../columnSettings/columnSettingsWidthUtils';
@@ -19,11 +18,6 @@ import {ActiveTable} from '../../../activeTable';
 import {LastColumn} from '../shared/lastColumn';
 
 export class RemoveColumn {
-  private static updateAdditionElements(at: ActiveTable) {
-    if (at._frameComponents.displayAddNewColumn) ColumnGroupElement.update(at);
-    ToggleAdditionElements.update(at, false, AddNewColumnElement.toggle);
-  }
-
   public static reduceStaticWidthTotal(at: ActiveTable, settings: ColumnSettingsInternal) {
     if (settings.widths?.staticWidth) {
       const {number} = ColumnSettingsWidthUtils.getSettingsWidthNumber(
@@ -78,7 +72,7 @@ export class RemoveColumn {
 
   public static remove(at: ActiveTable, columnIndex: number) {
     const removedColumnDetails = RemoveColumn.removeCellFromAllRows(at, columnIndex);
-    RemoveColumn.updateAdditionElements(at);
+    ToggleAdditionElements.update(at, false, AddNewColumnElement.toggle);
     ColumnSettingsBorderUtils.updateSiblingColumns(at, columnIndex);
     setTimeout(() => {
       // CAUTION-2

other-packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "active-table-react",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Active Table wrapper for React",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",
@@ -34,7 +34,7 @@
   "license": "MIT",
   "dependencies": {
     "@lit-labs/react": "^1.1.1",
-    "active-table": "^0.0.232"
+    "active-table": "^0.0.233"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",