-
Notifications
You must be signed in to change notification settings - Fork 172
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Table image and url + arbitrary content discussion #553
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Re arbitrary HTML support
|
This has quite a few downsides:
|
This is cool! Making the slot work as expected would be tricky because of the way Here are a couple of ideas on syntax: contentType PropSimilar to your working examples - add props for each type of content we want to support <DataTable data={my_query}>
<Column id=country />
<Column id=flag contentType=image someImageProp=true />
<Column id=url contentType=link openInNewTab=true />
</DataTable> Content Type ComponentsWe create a component for each content type we want to support within tables. These components would need to update a store that <DataTable data={my_query}>
<Column id=country />
<Column id=flag>
<Image someImageProp=true />
</Column>
<Column id=url>
<Link openInNewTab=true />
</Column>
</DataTable> If we were to go down this path, we might want to name the components more specifically so they wouldn't be confused with components that could be used outside of a table cell. E.g., |
Another thought on this - should we support clickable images? In that case, we'd need to support using |
Would this be:
For 1, you don't need a unique prop, as it's the same URL as the img? If it's something else, maybe I'm thinking about this wrong? |
I was thinking of 2 - I think a row link would solve that! I have a prototype of row links working in another branch and I'll share that in a PR soon. So that means we'll be good with treating images and links as separate items in table. The last thing I'm trying to figure out is how these will fit into the features we plan to add in the future within table cells, like heatmaps, bar charts, progress bars, etc. Because these new features wouldn't overlap with images and links, I'm leaning towards having a single prop <DataTable data={countries} rowLinks=country_url >
<Column id=flag contentType=image height=50px />
<Column id=country_url contentType=link linkLabel=country_name openInNewTab=false />
<Column id=sales contentType=bar />
<Column id=orders contentType=heatmap />
<Column id=yoy_growth contentType=progressBar />
</DataTable> That feels a bit suboptimal for the link column, but convenient for the other column types. We could also call that prop This structure might also allow us to support html in the future ( @archiewood what do you think of this syntax? |
I like it. For the image we need to include the ability to add an alt tag I think. Perhaps we make it an additional optional prop? If users don't add the alt tags then svelte will complain, at which point they can choose to add them if they want. |
That makes sense to me. Is there a sensible default we should use as the alt tag, or better to leave it empty unless specified? |
Nevermind, I see you have a default for alt tag in your implementation already! |
Moving discussion/ tracking to #570 for the meantime. |
Description
Implementation details
Checklist
Result: