Multiple Dataview Results in columns

phlepper · October 18, 2024, 7:26pm

What I’m trying to do

I want to take a list of items from dataview and display them in columns for better presentation rather than one long list.

Things I have tried

I previously posted this request and got a great answer that worked in that instance.

However, now I want to use the LIST (vs TABLE) as I want to join several fields together. I tried changing the previous answer with slices from TABLE to LIST, but either that doesn’t work or there is a trick to it that I couldn’t figure out.

As a second idea, I thought I could use something similar to get the first x% rows for a query and use the multi-column plugin to display those rows in the first column. Then do a second query for the next x% rows, etc until I get all the rows into a fixed set of columns.

Is this possible?

What I had initially (which works fine as a table with just the link name):

TABLE without ID
  slice(rows.file.link, 0 * aFourth, 1 * aFourth) as "1",
  slice(rows.file.link, 1 * aFourth, 2 * aFourth) as "2",
  slice(rows.file.link, 2 * aFourth, 3 * aFourth) as "3",
  slice(rows.file.link, 3 * aFourth) as "4"
FROM blah
WHERE blah
GROUP BY true 
FLATTEN ceil(length(rows)/4) as aFourth

But I want to create something similar, but instead of the link, I want to create something like:

LIST without ID link(file.name) + ": " + field2 + " [" + field3 + "]" + durationformat(field4, "h' hours'")

Any help would be greatly appreciated!
Thanks!

holroy · November 26, 2024, 7:04pm

You can’t use the same trick directly with LIST queries, as they’re by default meant to take up the full width of the note. To achieve similar goals using a LIST query you need to utilise some of the option for multi column layout, i.e. through CSS, and then make your query divide the result list into each of the columns. This can be done using dataviewjs I reckon, but I’m not sure it’s going to be a very clean solution.

But my main question is why do you think you can’t use a TABLE? What kind of “join several fields” are you attempting which you can’t do in a single column in a table?

Based on your example query, maybe something like the following could achieve your goals.

```dataview
TABLE without ID
  slice(rows.customElement, 0 * aFourth, 1 * aFourth) as "1",
  slice(rows.customElement, 1 * aFourth, 2 * aFourth) as "2",
  slice(rows.customElement, 2 * aFourth, 3 * aFourth) as "3",
  slice(rows.customElement, 3 * aFourth) as "4"
FROM blah
WHERE blah
FLATTEN file.link + ": " + field2 + " [" + field3 + "] " + durationformat(field4, "h' hours'") as customElement
GROUP BY true 
FLATTEN ceil(length(rows)/4) as aFourth
```

msfz751 · January 31, 2025, 2:25am

@holroy,
I “translated” your dataview script to dataviewjs:

```dataviewjs
const nCol = 5

let pages = dv.pages('"Citations/Referenced"')
const aFourth = Math.ceil(pages.length / nCol)
let customElement = [...pages.file.link]

const cols = [];
for (let i=0; i < nCol; i++) cols.push(`col${i}`)

let data = {};
let i = 0;
let acc = ""
for (const col of cols) {
	data[col] = customElement.slice(i * aFourth, (i+1) * aFourth)
	acc = acc + 'p["' + col +  '"]' + ", "
	i = i + 1
}
let fields_str = "[" +  acc + "]"    // build string of fields

data = dv.array(data)
dv.table([], data
	.map(p => eval(fields_str))  // works!
)
```

Would there be an easier and more elegant way to do it?

This is with number of columns = 5:

And this with 3: