Tabulator column header alignment

Question

In Tabulator, how can I make the horizontal alignment of column headers match the column data, or perhaps manage them individually. A column of centered data looks odd with a left-aligned header.

I am very new at this but I have been through the Tabulator info pages, the bitbucket pages, and searched here. It seems like there might be some way by creating some formatter functions but that seems very obscure for such a basic function.

Thanks, Sam.

Please provide us with what you have achieved so far with your code. — Aditya Thakur
I have a nice table with data and some columns left-aligned, some centered, and some right-aligned. But all of the column headers have left-aligned text. — SamP

dota2pro dota2pro · Accepted Answer · 2019-05-08T14:22:19

Use CSS

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

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/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/[email protected]/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/[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/[email protected]/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 column header alignment

3 Answers