如何在制表符中右对齐 table header？

Question

在 JavaScript 中，我正在调用 API 并使用制表符并尝试在 JavaScript 中显示数据。我想自定义对齐方式，有些是左对齐，有些是右对齐。当应用对齐属性时，它只对齐 table 数据而不是 table headers，我想要 table header 的自定义对齐。请有人帮助我。

部分代码：

columns: [
    { title: "Date", field: "Date", sorter: "date", align: "left", bottomCalc: function (values) { return "Grand Total"; } },
    {
        title: "Transaction Count", field: "TransactionCount", sorter: "number", align: "right", bottomCalc: "sum"
    },
    {
        title: "Credit Card", field: "CreditCard", sorter: "number", align: "right", visible: false, formatter: "money", bottomCalc: "sum", bottomCalcParams: { precision: "2" }
    },
    {
        title: "Cash", field: "Cash", sorter: "number", align: "right", visible: false, formatter: "money", bottomCalc: "sum", bottomCalcParams: { precision: "2" }
    },
    {
        title: "No Charge", field: "NoCharge", sorter: "number", align: "right", visible: false, formatter: "money", bottomCalc: "sum", bottomCalcParams: { precision: "2" }
    },
    {
        title: "ACH", field: "ACH", sorter: "number", align: "right", visible: false, formatter: "money", bottomCalc: "sum", bottomCalcParams: { precision: "2" }
    },
    {
        title: "Total", field: "Total", sorter: "number", align: "right", formatter: "money",  bottomCalc: "sum", bottomCalcParams: { precision: "2"}
    }
    ],

Answer 1

我认为此时没有 built-in 选项，但可以使用一些简单的 css.

来实现

将自定义 CSS class 添加到列定义中具有 right-aligned headers 的列：

{ title: "Transaction Count", cssClass: "rightAlignedHeader", (...) },

然后在css中为这个class定义权限text-alignment，但是限制在sub-elements of .tabulator-header

.tabulator-header .rightAlignedHeader {
  text-align: right !important;
}

Answer 2

var coldefs = tableR.getColumnDefinitions();
for (var i=0;i<coldefs.length;i++) {
    coldefs[i].align = 'right';
}
tableR.setColumns(coldefs);

如何在制表符中右对齐 table header？

How to right align table header in tabulator?

html

javascript

tabulator