WIP: Table Layout

[dcoales]

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

[dcoales]

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.

[hannesfrank]

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.

[hugo]

Amazing! Worked perfectly! Thanks for sharing!

[hugo]

Thanks! Your tips solved the problem for me!

[kinhang]

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.

[hannesfrank]

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.

[kinhang]

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

[Mohamed_Bin_Abdilwal]

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.

[hannesfrank]

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

[Arrianna_Berger]

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

[TaQuangKhoi]

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

[Arrianna_Berger]

Hi, it still doesn’t work

[TaQuangKhoi]

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

[enthusiastic]

Can this hide the slot like column table?

[enthusiastic]

can you share the code, please?

[ognsya]

Sorry I don’t have that anymore.

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

[enthusiastic]

Still thanks for your reply. I’m sorry to hear about this, Hope this feature can be supported as soon as possible

[enthusiastic]

Is there any way to limit the table in a screen?

[Browneyedsoul]

You better change inlinequote padding.