Is it by any means possible to have word-wrap inside a (HTML-rendering-enabled) cell of a table?
I know that manually inserting <br/> works but since I want to wrap according to the current column dimensions automatically, this is not sufficient.
You can play around with overwriting certain styles from a HTML-element placed somewhere on the place (does not matter where, will be invisible). (Disclaimer: This can lead to interesting and undesired side-effects)
{
"id": "htmlStyleElement",
"config": {
"html": "<style>.o-th {vertical-align: middle!important;} .o-th .nowrap {white-space:pre- wrap!important;}</style>"
},
"type": "html"
}
We use this snippet in a project to break the header of a table to show the full name instead of “Patient…” It is not perfect (long words will still get shortened) but perhaps you can find a combination of properties that will work for your use case.
Thanks. Only one more question: where did you place this style override? It is somewhere in the app, right?
How can I then limit the override to certain columns? Or this solution causing the override to be applied to all elements in the app with this ID?
We placed this element on each page (via layout/placements, see image) where we needed this behavior. Unfortunately you are right, it is applied to all columns/elements selected via the CSS selector. Limiting this to individual columns does not work.
But an alternative idea: If you want only certain columns to word-wrap (and only in “view”-mode of the table, not in “edit”-mode), you could use a custom cell renderer (which is a custom component) to change the rendering of the cell content. This renderer is column-specific. Unfortunately I couldn’t find a good entry point for this topic, perhaps @thomas.danzer or Lukas Müller could give you some more hints here.
This is the minimal example for a custom cell renderer from the custom components repo where you can see that the individual cell () can be defined freely and with some css rules in there it should be possible to achieve your goal:
<template>
<td>row: {{rowIndex}}, col: {{columnIndex}}, name: {{name}}, value: {{value}}</td>
</template>
<script>
export default {
name: "ExampleCell",
props: {
name: String,
value: [String, Number, Object],
columnIndex: Number,
rowIndex: Number
},
};
</script>
<style scoped></style>