Text wrapping on Tabulator

Question

var table = new Tabulator("#example-table", {
  layout: "fitColumns", //fit columns to width of table
  height: "69vh",
  responsiveLayout: "collapse", //hide columns that dont fit on the table
  cellVertAlign: "middle",
  headerSort: false,

  columns: [
    {
      title: "title",
      field: "title",
      width: 300,
      sorter: "string",
      formatter(cell, formatterParams) {
        return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
      }
    },
    {
      title: "body",
      field: "body",
      sorter: "string",
      formatter(cell, formatterParams) {
        return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
      }
    }
  ]
});

$.ajax({
  type: "GET",
  url: "https://jsonplaceholder.typicode.com/posts",
  success: function (data) {
    setTimeout(() => {
      table.addData(data, false);
      table.restoreRedraw();
    }, 200);
  }
});

body {
  font-family: Arial;
}

h1 {
  text-align: center;
  margin: 0, auto;
}

.button {
  justify-content: center;
  margin: 10px;
  text-align: center;
}

.button button {
  margin: 10px;
  padding: 10px;
}

.p-name-inside-table {
  width: 100%;
  cursor: default !important;
}

.p-name-inside-table img {
  cursor: pointer !important;
}

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Tabulator</h1>

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

How do I wrap the title's row so it doesn't get truncated on Tabulator? You can see the rows are truncated and I can't find it on the docs (http://tabulator.info)

( ----This is for avoiding that "mostly code" error---------------------------------------------------------------------------------)

Answer 1

A little bit of CSS should do the trick:

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    white-space: normal !important;
}