attractions
attractions copied to clipboard
illright
Custom table header / table items content?
Hi there! The UI framework is very pretty, very easy to use (I am using it with a modern SvelteKit project at the moment at home) and honestly I am liking it so far 👍 .
However: I am currently working on a calendar component, because the existing ones do not meet my needs. I e.g. want to put additional data into each cell (e.g. a list of TODOs or a customly drawn line in various colors, showing off projects, that I have worked on on that date).
Going by the Table docs, there currently seems to be no way to add anything besides a string or a number to each table cell (and header), right? I'd probably need to add a component.
Are there plans to extend the functionality to the Table component?
Hey, thanks for the kind words.
There is a way to add a component to the table, actually. Look into the named slots on the table. They receive slot props to help you identify the cell, and you can render whichever content you see fit
I somehow couldn't make it. What I wanted to do is e.g. have a table with the first row containing week day names and the first column contain the actual week number and then the contents be something like the day from the date (e.g. 31 from the 31st of January) and then a custom element displaying additional information beneath it.
Sadly it seemed neigh impossible to provide the data and rows in a manner, that would end up displaying the data as I wanted it, so I ended up creating the table (grid) myself using some of the variables and styles from this UI framework:
It'd still be much nicer if I could've reused the Table component of the framework (I do not really care that much about the styling being 100% the same as in the screenshot, I just wish there was a way to display that bar + text there). However: I was not able to use the information headers and cells information provided by the Table docs.
I didn't exactly understand what prevented you from accomplishing your goal. Would you like to elaborate on why your implementation didn't work out with the Table component as it is and what can we do to remedy it?