制表符列标题对齐答案

【问题标题】：Tabulator column header alignment制表符列标题对齐
【发布时间】：2019-05-08 06:40:34
【问题描述】：

在 Tabulator 中，如何使列标题的水平对齐方式与列数据匹配，或者单独管理它们。一列居中的数据与左对齐的标题看起来很奇怪。

我对此很陌生，但我浏览过 Tabulator 信息页面、bitbucket 页面并在此处搜索过。似乎可以通过某种方式创建一些格式化程序函数，但对于这样一个基本函数来说，这似乎非常模糊。

谢谢，山姆。

【问题讨论】：

请向我们提供到目前为止您的代码所取得的成就。
我有一个漂亮的表格，其中包含数据和一些列左对齐、一些居中和一些右对齐。但是所有的列标题都有左对齐的文本。

标签： tabulator

【解决方案1】：

现在每列都有一个可用的属性：

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", headerHozAlign:"right"}, //right align column header title
    ],
});

【讨论】：

【解决方案2】：

使用 CSS

.tabulator-col-title {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css">

</head>

  <body>
    <div id="example-table"></div>



<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>

  </body>

</html>

const tabledata1 = [{
    id: 1,
    name: "Oli ",
    money: "0",
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: "Mary ",
    money: "0",
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: "Christine ",
    money: "0",
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon ",
    money: "0",
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: "Margret ",
    money: "0",
    col: "yellow",
    dob: "31/01/1999"
  },
];


const table = new Tabulator("#example-table", {
  height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data: tabledata1, //assign data to table
  layout: "fitColumns", //fit columns to width of table (optional)
  columns: [ //Define Table Columns
    {
      title: "Name",
      field: "name",
      width: 150,
      align: "center"

    },
    {
      title: "money",
      field: "money",
      align: "left",
      formatter: "money",
      align: "center"

    },
    {
      title: "Favourite Color",
      field: "col",
      align: "center"

    },
    {
      title: "Date Of Birth",
      field: "dob",
      sorter: "date",
      align: "center"
    },
  ]
});

const setAlignment = function(index, alignment) {
  $($('.tabulator-col-title')[index - 1]).css("text-align", alignment);

}

.tabulator-col-title {
  text-align: center;
}

<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<body>
  <div id="example-table"></div>
  <button onClick="setAlignment(4,'right')">Set Alignment</button>
</body>

</html>

【讨论】：

感谢您所做的一切。 .tabulator-col-title {text-align: center;} 样式绝对是居中对齐的标题。在我将其标记为已回答之前。是否可以进一步专门对齐第四列？（我知道列的标题、字段等，只是不知道如何引用我必须应用样式的 css 标签。
我一生都在发展，一般是在金融领域，很少在网络上。对齐 - 以及通常格式化 - 表格中的标题远非奇怪，它是网格的基本功能，这是我见过的许多报告/网格工具中的第一个，这使得它变得困难。完全隐藏在文档中，总体来说还不错。我认为大多数人都会打开排序箭头，并且左对齐的箭头看起来最好。没有它们，匹配数据对齐看起来最好。我会克服这个小小的逆境并在 php 中编写一个包装类

【解决方案3】：

正如 dota2pro 所提供的，.tabulator-col-title { text-align: center; } 实现了标题的批量对齐。并且为特定列提供的解决方案也有效。

【讨论】：

【解决方案4】：

在列定义中使用以下属性将标题单独居中（例如居中）：

title:'test',
field:'myfield',
titleFormatter: function(cell, formatterParams, onRendered) 
{cell.getElement().style.textAlign='center'; return ''+cell.getValue()}

（使用 Tabulator 4.5 测试）

【讨论】：