Custom dataframe formatting (e.g. wrap text in cell) about streamsync

[ramedina86]

Hey @lambertchu and @samgarvis, thank you for using Streamsync and taking the time to share your thoughts. I'm glad you're enjoying it (minus this, I guess!).

After taking a look at this issue, I've developed a wrap/no-wrap flag. An example (using mock data) is shown below.

There's currently one limitation, which is that scrolling jumps row by row. So if there's a cell that's taller than the grid, the bottom of the cell won't be visible.

There's a change that was necessary to make, which is allowing the row offset to go down to the last row, see below.

I hope this is aligned with your use cases. I expect to release it this weekend together with a number of other features.

@samgarvis I worked on a CONTRIBUTING.md file that gives some hints on creating a local dev environment. I haven't merged yet but it's on the dev branch if you want to check that out.

---

PS: Dataframe behaves differently than other elements because it renders only the rows required to avoid overwhelming the DOM, which is quite easy with as little as 1k rows. So it's creating/destroying elements on demand as you scroll. This means that you cannot know the height of the whole grid beforehand, unless you used a fixed height and say I have 10 rows, so it's 360px. This is because, realistically, you can only know after rendering.

[samgarvis]

Dude, you are the goat! Thank you so much for addressing this so soon. Streamsync really is an amazing product🙏🫡 El El jue, ago. 3, 2023 a la(s) 4:20 p.m., Ramiro Medina < ***@***.***> escribió:

…

Hey @lambertchu <https://github.com/lambertchu> and @samgarvis <https://github.com/samgarvis>, thank you for using Streamsync and taking the time to share your thoughts. I'm glad you're enjoying it (minus this, I guess!). After taking a look at this issue, I've developed a wrap/no-wrap flag. An example (using mock data) is shown below. [image: sc1] <https://user-images.githubusercontent.com/64783088/258177726-9604719f-4935-4f0c-a7ad-f8a3d1e055ab.png> There's currently one limitation, which is that scrolling jumps row by row. So if there's a cell that's taller than the grid, the bottom of the cell won't be visible. There's a change that was necessary to make, which is allowing the row offset to go down to the last row, see below. [image: sc2] <https://user-images.githubusercontent.com/64783088/258224573-9ae1fb66-f345-467b-8460-95ab0d447c5a.png> I hope this is aligned with your use cases. I expect to release it this weekend together with a number of other features. @samgarvis <https://github.com/samgarvis> I worked on a CONTRIBUTING.md file that gives some hints on creating a local dev environment. I haven't merged yet but it's on the dev branch if you want to check that out. ------------------------------ PS: *Dataframe* behaves differently than other elements because it renders only the rows required to avoid overwhelming the DOM, which is quite easy with as little as 1k rows. So it's creating/destroying elements on demand as you scroll. This means that you cannot know the height of the whole grid beforehand, unless you used a fixed height and say I have 10 rows, so it's 360px. This is because, realistically, you can only know after rendering. — Reply to this email directly, view it on GitHub <#67 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQUUGHLEKA7RFJQNRGBDM2DXTQB2BANCNFSM6AAAAAA26N5GGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[samgarvis]

This would be amazing for me too! Honestly, very high priority.
Looking through their code.
It appears from CoreDataframe.vue on line 290: "grid-template-rows": repeat(${displayRowCount.value}, 36px)`` that they hard code the size of each row.
If this could change dynamically based on how many \n there were in a cell, then that would be a life saver

Or even just allow an option to make the row height bigger so every row is the same size and can allow for some line breaks

Wait, can't you just change the styling at line 526 to wrap the text, and not make overflow hidden.
Maybe something like the below line
overflow-wrap: break-word;

.cell {
	height: 36px;
	padding: 8px;
	overflow: hidden;
	white-space: nowrap;
	color: var(--primaryTextColor);
	border-bottom: 1px solid var(--separatorColor);
	display: flex;
	align-items: center;
	border-right: 1px solid var(--separatorColor);
}

[lambertchu]

Thank you for the update and quick response @ramedina86!!

[samgarvis]

Thank you for your awesome work on this tool!

Is there any functionality to apply more flexible, custom styling on dataframe elements?

More specifically, I am looking to apply text wrapping on a dataframe column so that very long strings are completely visible in the column's cells. At the moment, the string is not completely visible if it exceeds the max width of the column.

Also, is there any documentation on testing out changes to this repo locally? I would like to contribute, but I'm having trouble spinning this up locally

[ramedina86]

Available in v0.1.12, which was just released.