如何在制表器中右对齐表头？答案

【问题标题】：How to right align table header in tabulator?如何在制表器中右对齐表头？
【发布时间】：2023-03-24 18:04:01
【问题描述】：

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

部分代码：

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"}
    }
    ],

【问题讨论】：

html在哪里？
我正在使用一个空除法来显示如下数据：reportTable = new Tabulator("#ReportTableDiv", { renderComplete: function () { DownloadReportAsFile(); },
兄弟，如果不查看您的 html 代码，我将无法帮助您！
添加您所需的完整代码。
brother html 中没有任何内容，只有 Empty Division 并在 header 部分链接 Tabulator 脚本/插件文件。 cdnjs.cloudflare.com/ajax/libs/tabulator/4.1.5/css/…" rel="stylesheet">

标签： javascript html tabulator

【解决方案1】：

我认为目前没有内置选项，但可以使用一些简单的 css 来实现。

将自定义 CSS 类添加到列定义中具有右对齐标题的列：

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

然后在 css 中为这个类定义右对齐，但限制在 .tabulator-header 的子元素中

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

【讨论】：

【解决方案2】：

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

【讨论】：

请解释您的代码，以便其他人学习。