var table = new Tabulator("#example-table", {
layout: "fitColumns", //adjust columns to fit table width
height: "69vh",
responsiveLayout: "collapse", //hide columns that don't fit in 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0948182958c81948f92cd9481828c8593a0d4ced9ced3">[email protected]</a>/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d5c0c3d4cdc0d5ced38cd5c0c3cdc4d2e1958f988f92">[email protected]</a>/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 can I prevent the title row from being truncated in Tabulator? The rows are being cut off and I cannot find a solution in the documentation ()
( ----This is for avoiding that "mostly code" error---------------------------------------------------------------------------------)