setting cell.getElement().style.border[Color/Width/etc..] only effects border-right.

[CodeCapitalist]

setting border styles with the formatter is only impacting border-right. I performed console.log(cell.getElement().style); to get a better idea of what's going on, and it appears that the object is updating correctly, but the styles are not. Within the cell's CSSStyleDeclaration:

borderTopColor: "rgb(0, 0, 0)"
borderLeftColor: "rgb(0, 0, 0)"
borderRightColor: "rgb(0, 0, 0)"
borderBottomColor: "rgb(0, 0, 0)"

upon inspecting the element in chrome: border-right is assigned a value, and other borders are not listed.

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';
import Tabulator from 'tabulator-tables';

@Component({
  selector: 'app-tabulator-user-table',
  templateUrl: './tabulator-user-table.component.html',
  styleUrls: ['./tabulator-user-table.component.css']
})
export class TabulatorUserTableComponent implements OnChanges {
  @Input() tableData: any[] = [];
  @Input() height: string = '311px';
  // list properties you want to set per implementation here...

  tab = document.createElement('div');

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.drawTable();
  }

  private drawTable(): void {
    var calculationFormatter = function (cell, formatterParams) {
      var value = cell.getValue();
      cell.getElement().style.backgroundColor = "#fdd0ff";
      cell.getElement().style.borderWidth = "15px";
      cell.getElement().style.borderColor = "#000";
      console.log(cell.getElement().style);
      return value;
    }
    new Tabulator(this.tab, { 
      data: [
        {
          unionBenefitKey: "01A50",
          unionCode: "ALBL01APP55",
          unionDescription: " Bricklayer Union 01",
          fringeType: "Benefit",
          fringeFactor: "Hours Worked",
          fringeDescription: "H&W",
          fringeRate: "$6.40",
          effectiveDate: "07/31/2020",
          percentage: "",
          addonRate: "",
          addonPercentage: "",
          addToGrossEarnings: true,
          flatAmount: ""
        },
        {
          unionBenefitKey: "01A50",
          unionCode: "ALBL01APP55",
          unionDescription: " Bricklayer Union 01",
          fringeType: "Benefit",
          fringeFactor: "Hours Worked",
          fringeDescription: "H&W",
          fringeRate: "$6.40",
          effectiveDate: "07/31/2020",
          percentage: "",
          addonRate: "",
          addonPercentage: "",
          addToGrossEarnings: false,
          flatAmount: ""
        }
      ],
      columns: [
        { title: "Union Benefit Key", field: "unionBenefitKey" },
        { title: "Union Code", field: "unionCode" },
        { title: "Union Description", field: "unionDescription" },
        { title: "Fringe Type", field: "fringeType", formatter: calculationFormatter },
        { title: "Fringe Factor", field: "fringeFactor" },
        { title: "Fringe Description", field: "frimgeDescription" },
        { title: "Fringe Rate", field: "fringeRate", editor: "select", editorParams: { values: ["4.35", "5.10"] } },
        { title: "Effective Date", field: "effectiveDate" },
        { title: "Percentage", field: "percentage" },
        { title: "Addon Rate", field: "addonRate" },
        { title: "Addon Percentage", field: "addonPercentage" },
        { title: "Add to Gross Earnings?", field: "addToGrossEarnings", formatter: "tickCross" },
        { title: "Flat Amount", field: "flatAmount" }
      ],
      height: this.height
    });
    document.getElementById('my-tabular-table').appendChild(this.tab);
  }

  redraw() {
    this.drawTable();
  }
}

I am using tabulator_simple.css in my angular.json.

[olifolkerd]

Hey @CodeCapitalist

At the point you are making any updates to the style property of the DOM node that is outside of Tabulators control. the getElement function returns a standard DOM node that you can call any of the standard functions or properties on.

I would check your CSS to make sure you have nothing else that interferes with it.

On a side note, please use an issue template when creating an Issue on these boards, and make sure you create a JS fiddle that demonstrates your issue, passing large blocks of code into an issue makes it unreadable.

Also please ask for help first on stack overflow, as we find that 90% of the time it is developer error causing the issue and Stack Overflow can help you get to the bottom of this.

Cheers

Oli :)