WIP: Table Layout

Nice! Thank you for that.
It’s a great workaround while I don’t find a proper spreadsheet solution.
Especially since it allows me to just keep my Rems as they are.

PS: I changed this to:
grid-auto-rows: auto;
(intead of 1fr)

That way if a row needs to have more than 1 line, this doesn’t affect the others.
Let me know if you’d recommend against it!

1 Like

I did a couple more small modification to better support templates.

So this:

Can look like this:

Too bad changes in slot order in the template doesn’t affect instances - that would allow reordering columns easily.

2 Likes

Fantastic job, @hannesfrank! Thanks for sharing!

Sorry to bother you, but I tried using it, but my tables are not using the full available horizontal space; they are shrinked to the right; because of this, sometimes the lines break, and the lines get out of alignment. Also my left column does not have left border. Would you know what is causing it?

Wow, that looks interesting. Can you share the CSS for that - I’d love to give it a go.

Hi Hugo,

I use the table-rows version as it copes with row heights varying. Also I use the following css to make some nodes use the full available width.

/* ==================== Allow wide pages */
.tree-node-container[data-rem-container-tags~=wide]{
width: calc(100vw - 400px) !important;
margin-left: calc(-50vw + 600px) !important;
}

You can play with the pixel settings to suit your setup.

1 Like

I don’t think there is an easy, automatic fix for aligning row heights in the column version. You can only manually set the height of a specific row when you find it needs it with another tag.

For the missing first column, could it be that this is the hidden Alias child? In this case we came up with this workaround in Discord:


To hide a full subtree we need to target data-rem-container-tags instead of data-rem-tags like this:

[data-rem-container-tags~="column-table"] [data-rem-container-tags~="aliases"] {
   display : none;
}

But I think there is a bug with the data-rem-container-tags: The implicit tags (the ones which add the little x after references when they the last element on a rem) are not reflected there. This means you have to add #Aliases manually each time you want to hide.

Next problem: The code posted uses an explicit grid layout. Use this instead:

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 }

Last problem: If you hide the first column the left border of the second column is gone. Removing the border-left: unset line altogether is the simplest way to fix this.

1 Like

Amazing! Worked perfectly! Thanks for sharing!

Thanks! Your tips solved the problem for me!

Mister, could you tell me how to make this CSS works? I tried to add it by Custom CSS page using a template and pasted the code on, but eventually it doesn’t work.

Tag a rem with “table rows”. Now its children should become rows (the cells of the first column actually) and its grandchildren the other cells of the row of their parents.

thank you man, it works ! And besides, I wonder if there any plan on adding attachment files ( not only PDF) feature?

I’m trying to get this work. But without any luck

I have added the CSS code by pasting it into a new blank CSS block.

But when I tag with “table rows” nothing happens.

Screenshot please! :slight_smile: Does your CSS contain data-rem-container-tags~="table-rows"? The CSS in the first post uses #column table.

hi, mine uses the tag #column table but its not working. theres a screenshot below

You should try with another tag like ct
by change the colume-table code with whatever you want…

1 Like

Hi, it still doesn’t work

You have to change all "column-table"s with "ct"s

Can this hide the slot like column table?

can you share the code, please?

Sorry I don’t have that anymore.

I’m going to keep my structured content elsewhere, as RemNote doesn’t support this.