How to Prevent Collapse of Empty Rows in HTML table

Posted on | In

If you have met empty rows in HTML table or have seen this question

Prevent collapse of empty rows in HTML table via CSS

you might know what I am saying. See this image:

Above answers can’t handle strings like " ". In this case, we still need the help of js. Just like the idea of css,

// prevent empty table rows collapse
.cell:empty:after {
  content: "\00a0";
}

We can write a function like

function falsyToNbsp(value, falsyValues = [null, undefined, "", NaN]) {
  value = typeof value === "string" ? value.trim() : value;
  return falsyValues.includes(value) ? "\u00a0" : value;
}

You can use it in vue filters like

import { falsyToNbsp } from "utils";
export default {
  // ...
  filters: {
    falsyToNbsp
  }
  // ...
};

or with other libs.

Issue

Source

Reference