Why are the tabulator-columns overlapping in the UI?

Question

I am trying to create a Vue component that uses Tabulator. I was following the documentation from the Tabulator site and have the table displaying in the UI, but it looks like all the columns are stacked/sitting on top of each other...

My attempt so far:

<script>
import { TabulatorFull as Tabulator } from 'tabulator-tables'; //import Tabulator library

export default {
  data() {
    return {
      tabulator: null, //variable to hold your table
      testData: [
        { id: 1, name: "Oli Bob", progress: 12, gender: "male", rating: 1, col: "red", dob: "19/02/1984", car: 1 },
        { id: 2, name: "Mary May", progress: 1, gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true },
        { id: 3, name: "Christine Lobowski", progress: 42, gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true" },
        { id: 4, name: "Brendon Philips", progress: 100, gender: "male", rating: 1, col: "orange", dob: "01/08/1980" },
        { id: 5, name: "Margret Marmajuke", progress: 16, gender: "female", rating: 5, col: "yellow", dob: "31/01/1999" },
        { id: 6, name: "Frank Harbours", progress: 38, gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1 }
      ]
    }
  },
  mounted() {
    //instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.$refs.table, {
      data: this.testData, //link data to table
      columns: [                 //define the table columns
        { title: "Name", field: "name", editor: "input", width: 100, headerVertical: true },
        { title: "Task Progress", field: "progress", hozAlign: "left", width: 100, formatter: "progress", editor: true },
        { title: "Gender", field: "gender", width: 95, editor: "select", width: 100, editorParams: { values: ["male", "female"] } },
        { title: "Rating", field: "rating", formatter: "star", hozAlign: "center", width: 100, editor: true },
        { title: "Color", field: "col", width: 130, editor: "input" },
        { title: "Date Of Birth", field: "dob", width: 130, sorter: "date", hozAlign: "center" },
        { title: "Driver", field: "car", width: 90, hozAlign: "center", formatter: "tickCross", sorter: "boolean", editor: true },
      ]
    });
  }
}
</script>

<template>
  <div ref="table"></div>
</template>

Things I've tried...

• auto fit columns
• static column width

I'm sure I'm missing something simple, but I honestly have no idea what it could be. CSS issue? Ideally, the table would look like this: .

Answer 1

You are missing the Tabular CSS.

The documentation is rather sparse on what you need to do (see here and here).

But I think you can always just import the generated CSS like:

import 'tabulator-tables/dist/css/tabulator.min.css' 

There are several themes available, like bootstrap, material, etc, see this list for options