How to fix one of the columns in dataview table while others are horizontally scrollable?

What I’m trying to do

I am trying to create a table where the first column is fixed. Meaning when there are too many columns and I have to scroll horizontally the first column should not go out of sight.

table without id
	file.link AS "Day",
	choice(x,"βœ…","❌") AS πŸͺ₯,
	choice(y,"βœ…","❌") AS 🚿,
	choice(z,"βœ…","❌") AS πŸ“š,
	choice(p,"βœ…","❌") AS πŸ₯œ,
	choice(q,"βœ…","❌") AS 🀐,
	choice(r,"βœ…","❌") AS πŸ™Š,
	choice(m,"βœ…","❌") AS 🧹,
	choice(o,"βœ…","❌") AS πŸ“Š
from "Daily Notes/2024/February"
sort file.name ASC

Here, I want the first column file.link AS β€œDay” to stay always visible.

Things I have tried

I tried to use chatgpt, gemini to find an answer. It answered with some css:

.fixed-column-table {
  overflow-x: auto;
  display: flex;
}

.fixed-column-table .table th:first-child,
.fixed-column-table .table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #fff; /* Adjust as needed */
}

.fixed-column {
  width: fit-content; /* Ensures column width adjusts dynamically */
}

and told me to add it to custom css. I did and the dataview table were given like this:

table without id
  cssclass "fixed-column-table"
  file.link AS "Day" class="fixed-column",
  choice(x,"βœ…","❌") AS πŸͺ₯,
  choice(y,"βœ…","❌") AS  🚿
from "Daily Notes/2024/February"
sort file.name ASC

This did not work. If anyone could help me with this I would greatly appreciate it.

You could try to user some of this:

1 Like