Dataview: Column misalignment when using dataviewjs

[RavensridgePress]

Things I have tried

I’ve tried looking through the dataviewjs documentation and javascript documentation in general, but I’m a bit of a noob when it comes to js, and couldn’t find an answer.

What I’m trying to do

I’m attempting to create a table displaying my current planted vegetables in my garden. The table works fine, however the columns in the table seem to not align properly? I have tried turning off Readable Line Length, but the issue persists. I have a less granular table written in DQL that seems to align the columns fine.

Here is what I’m talking about:

Here is my code:

	// get all notes from Garden
	let pages = dv.pages('"Projects/Garden"')
		.where(p => p.Type == "Vegetable").where(p => p.Location != null)

	// create group object
	let groups = pages.groupBy(p => p.Family);

	// create list
	for (let group of groups) {
		dv.header(3, group.key);
		dv.table(["Location", "Plant", "Date Sowed", "Ready"],
			group.rows
				.sort(b => dv.date(dv.date(b.Planted).plus(dv.duration(b.Harvest + " days"))), 'asc')
				.map(b => [b.Location, b.file.link,
					b.Planted, dv.date(dv.date(b.Planted).plus(dv.duration(b.Harvest + " days")))])
		)
	}

[mnvwvnm]

That is a “styling” issue.
By default, column width is related with the “size” of the content in each column and the columns distribution in page width, i.e., it’s a dynamic thing.

If you want a stable/static width you need to define a css snippet and apply it to that file via css class.

Or, if dataviewjs, maybe you can “inject” a code for the container style.

[holroy]

Another way to put it, is that your code produces multiple tables, which don’t know about the other tables, and thusly don’t know the table width of the other tables.

One way around this could be to move the creation of the table out of the for-loop for the groups, build all rows in a temporary variable and then (if possible in dataviewjs) create colspan elements for the group headings. Then since it would be one table, the column widths would align, and it should look as expected.

Another option, not as visually pleasing, would be to generate the table in one go, having a separate column for the group.key.

Regards,
Holroy

[RavensridgePress]

Ok, I’m not super experienced with using CSS snippets but I decided to give it a go for this. I think this is the right approach, I just can’t quite figure out how to get it to work. I have remedied the issue in the inspector by adding the attribute column-width to a class, but I can’t figure out how to put it in a snippet.

Here is a screenshot of the attribute that fixes the issue:

and here is what I’ve tried in my css snippet:

.dataview.dataview-ul {
  column-width: 300px;
  }

.dataview.table-view-table  {
  column-width: 300px;
  }

.dataview.table-view-thread  {
  column-width: 300px;
  }

.dataview.table-view-th  {
  column-width: 300px;
  }

.table-view-table  {
  column-width: 300px;
  }

Thanks again for the help!

[RavensridgePress]

Ah, this makes sense. I tried a seperate column for the group.key, but as you suspected wasn’t the best looking.

I couldn’t figure out how to build the rows in a temp var and create a colspan, but I think I will just try to style the tables with a static column-width if I can figure out how to use snippets

[gapmiss]

CSS snippets documentation is here:

Add custom styles - Obsidian Help

[mnvwvnm]

Ignoring the css snippet, you can also try this:

• at the end of your dataviewjs code, add this

// change column width
this.container.querySelectorAll(".table-view-table td").forEach(s => s.style.width ="300px");

[RavensridgePress]

This worked! thank you very much, you have been a great help