I’ve encountered a weird issue in Tabulator where the cell heights are very small when all columns are using a custom formatter.
See this fiddle: https://jsfiddle.net/LukeAtkinsFNM/soLk5p0x/11/
The two formatters I’m using are a float formatter and a luxon DateTime formatter. They each return a string value.
Tabulator.extendModule("format", "formatters", {
float: (cell, params, onRendered) => {
var val = cell.getValue();
if (val === null || val === undefined || isNaN(Number(val))) return "";
if (params.showZeros !== undefined) {
if (!params.showZeros && val == 0) return "- ";
}
var text = Number(val).toLocaleString("en-AU", {
notation: "standard",
minimumFractionDigits: params.digits || 2,
maximumFractionDigits: params.digits || 2,
});
if (params.units) text += " " + params.units;
return text;
},
DateTime: (cell, params, onRendered) => {
var dt = cell.getValue();
if (dt == null) return "";
if (typeof(dt) == "number" || !isNaN(dt)) dt = DateTime.fromMillis(Number(dt));
if (!dt.toFormat) return dt.toString();
if (!params.format) params.format = "yyyy-MM-dd hh:mm";
var text = dt.toFormat(params.format);
return text;
},
});
Rows with complete data seem fine, but when I add a blank row, the row height is correct, but the cell heights are tiny which causes issue when using the cell editors.
If I add a blank column it seems to fix the issue, but it’s not a desirable solution.
Does anyone have any ideas?