This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-08-22
Channels
- # aws (12)
- # babashka (24)
- # beginners (51)
- # biff (2)
- # cherry (4)
- # cider (2)
- # clj-kondo (4)
- # cljs-dev (19)
- # clojure (70)
- # clojure-australia (4)
- # clojure-europe (39)
- # clojure-nl (4)
- # clojure-norway (6)
- # clojure-spec (9)
- # clojurescript (21)
- # component (6)
- # cursive (18)
- # data-science (9)
- # datomic (18)
- # events (2)
- # expound (4)
- # fulcro (15)
- # graalvm (2)
- # graphql (5)
- # jobs (1)
- # juxt (2)
- # leiningen (8)
- # malli (4)
- # meander (21)
- # nrepl (3)
- # observability (14)
- # off-topic (49)
- # other-languages (1)
- # pathom (13)
- # pedestal (7)
- # rdf (5)
- # re-frame (10)
- # reitit (1)
- # sql (4)
- # squint (30)
- # tools-deps (1)
- # vim (11)
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
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.
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.
@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.
@U0CKQ19AQ I'm looking at using the second suggestion.
Do you mean to define the style as here: https://github.com/fulcrologic/fulcro-rad-semantic-ui/blob/6fd32d4cade7fe73abbf880104c34ea626820274/src/main/com/fulcrologic/rad/rendering/semantic_ui/report.cljc#L102-L106
and then install it using https://github.com/fulcrologic/fulcro-rad/blob/a64a8bc92be56626a0f19033c4c197ab900743b3/src/main/com/fulcrologic/rad/report.cljc#L774
Is that the correct flow, or do you literally just add to sui/all-controls
using assoc-in
to install it?
That latter way is how I install them…assoc-in to the all-controls when I’m setting the plugin.
I’m not saying you patch the source, but yes, that is basically how you make a new row layout renderer…ape that pattern.
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
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.
The end goal is simple: add a new row style that sets its css classes according to some value in the row.
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)
Then as you render each cell, you use that to pull those into the td
using Fulcro’s :classes
attribute
Thanks @U0CKQ19AQ. Sometimes all it takes is a good sleep 🙂 That's actually very straight forward to implement.