Fork me on GitHub
#fulcro
<
2022-08-22
>
sheluchin14:08:10

In RAD, is there a way to apply a CSS class to a cell in a report table, depending on its value? For example, to apply a cell color or to mark it with SemanticUI's .disabled https://fomantic-ui.com/collections/table.html#disabled

tony.kay14:08:08

I don’t think there’s a hook for that in the SUI render plugin, however, there is always an escape. In this case you can specify the ro/BodyItem option using a defsc component of your creation. Give it the query/ident that you need the row to have (`row-pk` and query of columns) and then destructure the data from props. You can then render the row exactly as you want.

tony.kay14:08:41

Use the source of the SUI RAD rendering plugin if you want to leverage anything from there. The other thing you can do is define a new row style, install it, and select it with ro/row-style. Then you can add features to the row renderer that can be reused without having to define a body item for each report that needs a general feature.

sheluchin14:08:39

@U0CKQ19AQ very well, thank you. In this case I just wanted to disable some cells, and SUI just changes the text to grey so I've gone the route of adding a conditional inside ro/column-formatters which checks the cell's value and applies the class accordingly. It wouldn't work for coloring an entire cell - I'd have to use one of the options you mention - but for this case it's good enough.

tony.kay19:08:55

That latter way is how I install them…assoc-in to the all-controls when I’m setting the plugin.

tony.kay19:08:05

I’m not saying you patch the source, but yes, that is basically how you make a new row layout renderer…ape that pattern.

tony.kay19:08:15

and yes, I forgot I made that install function. That’ll work as well 😄

tony.kay19:08:58

There’s a runtime atom in the app, which you can add nsed kws to for any purpose. RAD uses it to hold the plugin config. So, that installer just updates it, which is equiv to doing the assoc-in at startup

sheluchin20:08:45

Okay, so I've made a TableRowLayout-WithDisabling which checks props for a disabled? flag the same way that TableRowLayout checks highlighted?. Then I install it during startup and select it using ro/row-style. But it's not clear to me how to add the conditional functionality to the actual report to allow for disabled to be set depending on some value in the row props. I'm trying to hop around the RAD an SUI plugin code to figure it out but the solution isn't jumping out at me.

sheluchin20:08:22

The end goal is simple: add a new row style that sets its css classes according to some value in the row.

tony.kay04:08:53

Within your component you’ll receive props that include the report instance itself. You can use that with component-options to read the options. The options-util helper ?! is useful for building things that can be a value or function. My guess is you’d want to include some new optino on the report like :custom/cell-class which would be a map from keyword to string or (fn [report-instance props k] class)

tony.kay04:08:23

Then as you render each cell, you use that to pull those into the td using Fulcro’s :classes attribute

sheluchin14:08:15

Thanks @U0CKQ19AQ. Sometimes all it takes is a good sleep 🙂 That's actually very straight forward to implement.

tony.kay15:08:33

yeah, I need to finish the book. It’s pretty easy overall, just insufficiently documented