Format columns with dataview

[willamecm]

Following some forum topics I made this code:

let pages = dv
	.pages('#daily and #buy') 

let totalPrice = pages.map((page, index) => [ 
	page.file.link,
	page.market,
	dv.func.sum(page.buy_coffee),
	dv.func.sum(page.buy_rice),
	dv.func.sum(page.buy_juice),
]); 

totalPrice["values"][totalPrice.length] = [
	"***Total***", 
	"", 
	"", 
	dv.func.round(dv.func.default(dv.func.sum(pages.buy_coffee), 0), 3),
	dv.func.round(dv.func.default(dv.func.sum(pages.buy_rice), 0), 3),
	dv.func.round(dv.func.default(dv.func.sum(pages.buy_juice), 0), 3)
]; 

dv.table(["Day", "market", "Value Coffe", "Value rice", "Value Juice"], totalPrice);

the result:

The arrows show where the values ​​are, I want to pull a column to the left.

While searching I found the answer with CSS on w3schools with colspan, but how do I insert this into this code?

If anyone can help me I would appreciate it

[DiCaver]

@willamecm

"",

What happens if you remove one "",? You have 5 headers, but 6 columns.

Cheers, Matrko

[willamecm]

@DiCaver

What happens if you remove one "",? You have 5 headers, but 6 columns.

Cheers, Matrko

hahahahahaha Thanks my boss, it worked, but if I want to insert a CSS like changing a color to orange in the total values, how do I do that?

[DiCaver]

@willamecm

I want to insert a CSS

Inserting CSS, especially the one that affects only part of the tables, is tricky in DataviewJS. Currently, out of my head, you would need to make a table from 3 parts: header, data and footer (total), and each append to the main table. And in the footer, apply CSS.

I use mostly containers. Something like this:

// Render container with custom class
dv.container.className += ' custom-table-css';

It’s hard to play with dynamic tables, but it is easier if they are fixed.

Cheers, Marko

[holroy]

In the post below I show some various options to attach stuff to any dataview queries. Once you’ve some selector to it, you could opt for using stuff like :last-child or having a tag in the cell you want to style. Or even add the style directly into the cell using dedicated code.

How to target Dataview queries for CSS styling

This thread will show some of the options available for styling the result of your Dataview queries by providing you with CSS selectors which targets the outer elements of the query results. The specific styling within each is left up to the reader. After first covering the basics, I’ll show a nifty hack using #tags to single out specific queries. The basic options for styling The three most common options to target every query of the various query types are: TABLE queries and dv.table(): tab…

[willamecm]

Thanks for the help, but I don’t know much about Javascript, I don’t know how to set up this query.

I read your article, but the CSS you mentioned is inside the dataviewjs query or is it a snippet that is called inside the query?

[href=^"#_"] {
  display: none;
}

table:has([href="#_/uniqueTableId"] {
  /* Whatever styling I'd like applied to this table  */
  & thead > tr  {
    background-color: blue;
  }
}

If it’s not too much trouble, could you just change the color of the results (Total) that’s all I want, so I save this post, if you want to replicate it just read this post again.

[willamecm]

code to insert a color at the end of the last column

Code made by: sailKite on discord

Thank you very much

let color = 'red'; 
dv.container.classList.add('hasTotals'); 
const style = document.createElement('style'); 
const cssString = 
	`.hasTotals tr:last-child > td:nth-child(n+2) { 
		color: ${color}; 
}`; 

const cssNode = document.createTextNode(cssString); 
style.appendChild(cssNode); 
dv.container.appendChild(style);

let pages = dv.pages('#daily and #buy') 

let totalPrice = pages.map((page, index) => [ 
	page.file.link,
	page.market,
	dv.func.sum(page.buy_coffee),
	dv.func.sum(page.buy_rice),
	dv.func.sum(page.buy_juice),
]); 

totalPrice["values"][totalPrice.length] = [
	"***Total***", 
	"", 
	dv.func.round(dv.func.default(dv.func.sum(pages.buy_coffee), 0), 3),
	dv.func.round(dv.func.default(dv.func.sum(pages.buy_rice), 0), 3),
	dv.func.round(dv.func.default(dv.func.sum(pages.buy_juice), 0), 3)
]; 

dv.table(["Day", "market", "Value Coffe", "Value rice", "Value Juice"], totalPrice);

[holroy]

The CSS code goes into a snippet, and then you add the tag to the column/cell you want colored.

So try changing your last function to something like:

totalPrice["values"][totalPrice.length] = [
	"***Total***", 
	"", 
	"#_/uniqueTableId " + dv.func.round(dv.func.default(dv.func.sum(pages.buy_coffee), 0), 3),
    "#_/uniqueTableId " + dv.func.round(dv.func.default(dv.func.sum(pages.buy_rice), 0), 3), 
  	"#_/uniqueTableId " + dv.func.round(dv.func.default(dv.func.sum(pages.buy_juice), 0), 3)
];