I came across many examples that are somewhat close to what I need, but I require more control over the table design. I want to prevent text wrapping, display ellipsis, and provide a tooltip when hovering over the content to view it completely.
This project is based on VueJS, and I'm currently using (or attempting to use) Element UI
Let's get into the specifics. I want my table to be structured like this:
Header A Header B Header C
------------------------------------------------------------------------------- 100%
Apples Bananas la la la la la la... A box of crackers and some super ri...
Oranges Mr. Bean Is Cool More chocolate milk
The example above showcases text-overflow: ellipsis
Alternatively, I aim for a layout like this:
Header A Header B Header C
------------------------------------------------------------------------------- 100%
Apples Bananas A box of crackers and some super rich chocolate milk
Oranges Mr. Bean More chocolate milk
Or possibly like this:
Header A Header B Header C
------------------------------------------------------------------------------- 100%
Apples Bananas are not my favorite A box of crackers and some super r...
Oranges Mr. Bean More chocolate milk
Or even like this:
Header A Header B Header C
------------------------------------------------------------------------------- 100%
Apples Bananas Oranges
Running Out Of ideas to put in here
The main emphasis is on maintaining left alignment and avoiding columns that spread responsively. I've experimented with different layouts like table-layout: fixed and width: auto, trying multiple variations with no clear solution.
To complicate matters, the table is dynamically generated from a json source, and the number and content of columns are unknown. Here are some steps I've attempted:
// Determine visible columns
let visibleColumns = _.filter(this.$refs.table.columns, c => {
return c.label != null && c.label.length;
}).length;
// Calculate max width based on visible columns
let maxWidth;
switch (visibleColumns) {
case 1:
maxWidth = 1000;
break;
case 2:
maxWidth = 700;
break;
default:
maxWidth = 200;
break;
}
// Find longest value length in dynamic columns
_.each(cols, c => {
const comparer = Math.max(...this.data.map(d => String(d[c.field]).length));
});
// Compare max width with column length to determine width
Element UI offers minWidth and width properties but lacks max width control. Despite its auto-tooltip feature, managing the table layout has proven challenging, prompting me to consider building my own table component. I've noticed others facing similar struggles with Element UI's table implementation.
In summary, I need to effectively balance column widths, implement text-overflow, and provide tooltips for partially hidden items. Here's a fiddle illustrating the initial issue I encountered with overflowing content in the last column.