TechQA.

Linked Questions

Popular Questions

Tabulator column header alignment

Asked by At

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.

tabulator
Original Q&A

2 Answers

0
Mr Singh On

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>

0
SamP On

As provided by dota2pro, .tabulator-col-title { text-align: center; } achieves bulk alignment of headers. And the solution provided for specific columns also works.

Related Questions