Tables: Better column width adjustment depending on content?

[Moonbase59]

Dataview tables seem to have quite a "fixed" column width. To use the space more efficiently, it would be nice if the columns would auto-adjust according to content/header width.

Example which could profit from that:

I already shortened the link names (left column) using CSS, but if, for instance the "Age" column would be smaller, we had more space for the "Birthday" column and no need to wrap inside cells.

[blacksmithgu]

I'm wondering if I can make CSS/similar do this for me automagically. Or if there is a library I can just import to do proper table layouts.

[rishifter]

Perhaps, adding classes to the table and headings might be a good start. We can then begin styling them using CSS snippets ourselves.

[Moonbase59]

I still feel—just for the joy of it—people are messing too much with Obsidian innards, instead of using it for its purpose (including me, of course). So it’d be good if most would work "out-of-the-box" so new users don’t have to become programmers.

[rishifter]

Totally agree with that. But I think we can also both agree that most plugins (especially this) are already in the tinkering category where people get a lot of control and keep playing with it. And since with plain text, the possibilities of what we can do are endless, any out-of-the-box working solution that works for a majority would always be more restricting(consider dataview vs dataviewjs already). Since everyone wants something different and there are so many places where you can have preferences, I suggested the classes thing. Even if it seems like extra work for the user at first, most users will end up using shared snippets or themes with this feature anyway. And the plug-in author can spend more time on functionality keeping the presentation separate.

That said, I do explicitly support this request and it would be great to have from the plug-in itself since some of the stuff which requires calculations is most times easier and sometimes only possible in JS over CSS. But there could be issues with deciding the width based on headers length as you suggested. For example, if the header is longer than the cells (opposite of your birthday example), then the plug-in would choose that column to be wider than it needs to be and we’d need to override it with CSS anyway (or explicitly set width in query using pixels or percentages but that could make the query even more complex).

If there’s a library out there which allows sortable and resizable columns during render and there’s some way to cache the users preferred size in the plug-in, then perhaps that could solve this issue giving the user the control to manually override any width in GUI, even if the widths are by default calculated by the plug-in.

[Moonbase59]

Too bad I’m not as much in development anymore as I used to be, so I can’t make a profound suggestion what to use. But taking into account that a "naked" HTML page can render auto-adjusting tables just nicely, it can’t (hopefully) be that hard. Some things might turn out easier than suspected.

As it looks right now (wildly assuming as always), DV tables seem to simply divide the available width by the number of data columns, and that’s it. Hope @blacksmithgu will find a good solution.

[blacksmithgu]

Seems like some simple CSS changes did the trick - coming as part of the next release.

[MrModest]

I think it would be better if we have choice which column have which width.

For example, now it looks pretty bad, and I don't now how fix it (

I about "created" column

[Moonbase59]

Turned out it was caused by the pub-Image Flags.css and could easily be remedied by using either of the following CSS snippets (I think I also posted these in the forums somewhere):

tables-auto-left.css:

/*
    tables-auto-left.css snippet

    Adjust tables for auto-width columns & not using full width.

    2021-06-07 Matthias C. Hormann (Moonbase59)
*/

table {
  table-layout: auto !important;
  width: unset !important;
  max-width: 100%;
}

— or —

tables-auto-centered.css:

/*
    tables-auto-centered.css snippet

    Adjust tables for auto-width columns & not using full width.
    Also centers table.

    2021-06-07 Matthias C. Hormann (Moonbase59)
*/

table {
  table-layout: auto !important;
  width: unset !important;
  max-width: 100%;

  /* for centered tables, add the following */
  margin-left: auto;
  margin-right: auto;
}

[blacksmithgu]

For specifying custom table column width, what do you suggest as syntax?

TABLE <blah blah blah> AS column(<name>, <width>, <other junk>)

or maybe

TABLE <blah blah blah field> AS "name" WIDTH 30%, ...

[rishifter]

Although not the OP, if I may jump in with a suggestion, I think using a separate keyword might be handy and easier to format which can be mapped with the columns. I'm thinking something along the lines of the SQL syntax for inserting

INSERT INTO table_name (column1, column2, column3, ...)
VALUES (value1, value2, value3, ...);

So with DataView, we might have,

TABLE field1, field2, field3...
COLWIDTH 30%, 45px, auto...
FROM "<SOURCE>"

I'm using different units hoping they are directly set to CSS for setting the width but even if it is just percentages, it would work great!

[Moonbase59]

I’m sometimes slow, excuses. So much other stuff to do …

I like @rishifter’s idea of using CSS properties, especially "auto". Regarding "other junk" column properties, I cant really make my mind up. I like having stuff together, so @blacksmithgu’s variant. Then again, @rishifter’s "COLWIDTH" also looks rather clean, and is probably easier for an end user. Hmmm …

[jedgp]

Seems like some simple CSS changes did the trick - coming as part of the next release.

+1 for this!

[AB1908]

Another idea I've thought about is some auto generated CSS classes for each column and table which would make custom styling much easier without necessarily having to change the query language itself.

[fredcallaway]

What's the status of this? For me, dataview tables always split the horizontal space equally, even when values in one column are always short.

[obvionaoe]

Although not the OP, if I may jump in with a suggestion, I think using a separate keyword might be handy and easier to format which can be mapped with the columns. I'm thinking something along the lines of the SQL syntax for inserting

INSERT INTO table_name (column1, column2, column3, ...)
VALUES (value1, value2, value3, ...);

So with DataView, we might have,

TABLE field1, field2, field3...
COLWIDTH 30%, 45px, auto...
FROM "<SOURCE>"

I'm using different units hoping they are directly set to CSS for setting the width but even if it is just percentages, it would work great!

I think this would be great, having a COLWIDTH optional keyword would allow for maximum customization and maintain compatibility with all existing Dataview queries