Page MenuHomePhabricator

Table: Support row customization via slots
Open, MediumPublic

Description

The Table component currently allows for cell-level customization through the use of Vue.js scoped slots. This allows the user to override the content of all cells in a specific table column. From the Table docs:

You can customize the contents of a cell by using the item-[ columnId ] slots. For example, for a column with the id time, there is a slot called item-time. This slot comes with 2 bindings:

`item`: the cell content
`row`: data for the entire row

We should explore adding support for row-level customization as well, using a similar API (where the row data would be available as a scoped slot binding).

Here are some common use-cases that row-level customization would allow us to support:

  • Making an entire table row into a link
  • Color-coding an entire row background based on some condition

I'm sure there are others, but these are two features that came up in the course of working on T376932.

Event Timeline

This is currently solvable by using the tbody slot, which allows you to enter the <tbody> element and everything within it. I'm not sure how it would help to add an additional slot for rows, since there's nothing between the <tbody> and <tr> elements.

If the developers with this use case don't want to use the tbody slot for some reason, we could consider giving them a way to pass attributes to the rows, but that would probably mean making the data prop more complex. Is there a reason they can't just use the tbody slot?

This is currently solvable by using the tbody slot, which allows you to enter the <tbody> element and everything within it. I'm not sure how it would help to add an additional slot for rows, since there's nothing between the <tbody> and <tr> elements.

If the developers with this use case don't want to use the tbody slot for some reason, we could consider giving them a way to pass attributes to the rows, but that would probably mean making the data prop more complex. Is there a reason they can't just use the tbody slot?

@AnneT currently the tbody slot doesn't expose any bindings. I guess the user aleady has the data for the whole table, but they would have to recreate the whole table body from scratch even if they just want to add an error class on one or two rows.

I think that at least adding a binding to the tbody slot to expose the computed "data for display" could be useful (so that custom tbody content can still support pagination, etc). But I was thinking that a row-level scoped slot similar to how we support custom menu items (with row and column bindings – maybe we'd decide not to support selection in custom rows to keep things a little simpler) would provide more flexibility.

CCiufo-WMF triaged this task as Medium priority.Nov 18 2024, 5:15 PM

We are currently in the need of this functionality. We need the ability to customize a row so that we can highlight when a block is selected for multiblocks. cc @JWheeler-WMF

@CCiufo-WMF is this task a priority at the moment?

We are currently in the need of this functionality. We need the ability to customize a row so that we can highlight when a block is selected for multiblocks. cc @JWheeler-WMF

@CCiufo-WMF is this task a priority at the moment?

This is not a high priority component update for DST right now. It seems like all you need for T383846 is to change the background color temporarily, so maybe you could just add custom code in the Multiblocks feature for now that applies custom CSS to the table row.

Any usage case that needs this feature?