Skip to Content (Press Enter)
Back to Ideas
19
Like
Follow Idea
[Reactive] Add custom class/attribute to a Table row
337Views
4Comments
On our RadarOn our Radar
Frontend (App Interfaces)

Right now, it's only possible to a table cell :(

How can you add custom border to a Table Line?

1) Add a custom class to all the table cells... Outch.

2) Run a client Action to a add the class to the tr.

Adding directly to the widget table line would be much easier/cleaner.

27 Apr 2020
Copy link to comment
Changed the category to
Frontend
and the status to
On our RadarOn our radar

H Francisco,

That makes complete sense. I'll put that on our radar so we keep track of this idea and eventually implement it in the future.

Thanks,
Tiago Simões

22 Apr 2021
Copy link to comment

Yes please,

Can we have table widget rows promoted as first class citizens? Benefits:

  • a "native" possibility to control how rows look based on data in that row (think positive, neutral, negative styled rows for example). Currently table widget row style attribute is applied to all rows, not evaluated for each row separately
  • cleaner CSS to target table rows instead of chain of ugly hacks (maintenance cost)
  • better representation of underlying html structure in widgets (it's web tech, after all)
  • no more ugly hacks to add event handlers to table rows (like wrapping a table to a widget and pushing something down the dom tree with javascript or having the same event handler attached to all cells)
  • no more ugly hacks to simulate row styles using individual cells (maintenance + performance cost + avoiding a  complete class of UI bugs)

I'd upvote this several times, if it was possible.

04 Feb 2022
Copy link to comment
2014-02-07 17-02-43
Vasco Pessanha

Hey Francisco,
How are you?
Can you provide more information regarding this idea?

If I'm not missing something, today we already have:

Reactive/Mobile - The TableRecords widget available in Reactive and Mobile already provides a "Style Row" property for this purpose.

Traditional Web - The TableRecords widget available in Traditional Web provides both a Odd and Even style properties for this purpose. 


Cheers,

25 Nov 2022
Copy link to comment

Hi Vasco, As there has been no response, I thought I would add my explanation.

The class and attribute property is required on individual rows when the requirement is to make the row appear differently than other rows based on the data displayed.

The existing styling for React Web only allows the Style Row class to be applied to all rows, which does not meet this requirement.

For example, if some of the data records displayed are inactive, I want to indicate this by setting the class to "text-neutral-7" which will mute the text color of the data. I would also display a column or icon indicating it is inactive, but the styling across the whole row makes it easy to spot the records that are inactive.  This UI pattern could be the same for records where there is a particular status that should be highlighted (or muted) by styling.

I hope this explanation helps!

Kind regards,

Stuart

01 Aug 2023
Copy link to comment