v.1.0.93
PricingBlog
Sign up
Open app
All topics

Styling table row based on dynamic data

  • xioteer-1250152301838995548

    Xioteer

    1 year ago

    I am trying to create a pill with different colors based on the word that is written in the respective td.

    It could be either "Sold" or "Holding"

    How can I achieve this?
    1250152302065746000-image.png
  • 141123597820231680-@Xioteer
    I am trying to create a pill with different colors based on the word that is written in the respective td.

    It could be either "Sold" or "Holding"

    How can I achieve this?
    lucasg-1250154396805894195

    Lucas G

    1 year ago

    You can use style variables or classes. Either way you'd apply them conditionally based on the cell's text
  • defaulting to white or whatever you want
  • andreasmoller-1250156645799956590

    Andreas Møller

    1 year ago

    I think classes would be the way to go
  • xioteer-1250159555527053424

    Xioteer

    1 year ago

    yeah that makes sense actually. I just give the class the same condition as the actual text content
  • xioteer-1250160363555786753

    Xioteer

    1 year ago

    That said, I am not sure whether i am doing conditionals right.

    I don't have a real condition at the moment.

    I want to check whether the value of the key is empty(null) or not.

    But it's not a real condition, right? because if the value changes, it will not really evaluate differently, but just also change the condition in the IF-Node
    1250160363400335371-image.png
  • Which will still be true?
  • Meaning, if I try to change the condition it shall check against, it just deletes everything to the left, as I put a string into the condition rather than the dynamic input
  • 141123597820231680-@Xioteer
    That said, I am not sure whether i am doing conditionals right.

    I don't have a real condition at the moment.

    I want to check whether the value of the key is empty(null) or not.

    But it's not a real condition, right? because if the value changes, it will not really evaluate differently, but just also change the condition in the IF-Node
    lucasg-1250174263999332492

    Lucas G

    1 year ago

    The first part needs to be Bool True/False
  • If you're using classes, then the condition would look something like this
  • 1250174383494926426-image.png
  • Change string for your item of course
  • Don't think you need the additional 'string' node
  • xioteer-1250174518320697455

    Xioteer

    1 year ago

    Ah So i still need to build the condition
  • 128651941143117824-@Lucas G
    Don't think you need the additional 'string' node
    xioteer-1250174630195363891

    Xioteer

    1 year ago

    That was just because the incorrect way of me doing it was not working without adding it. Like at all
  • lucasg-1250174637657292965

    Lucas G

    1 year ago

    Conditions for a class to apply are Bool as well
  • Basically, if true class is applied and if false then not applied
  • xioteer-1250174806624698473

    Xioteer

    1 year ago

    Yeah, just need to wrap my head around things sometimes. But I think I get it
  • lucasg-1250174878628319282

    Lucas G

    1 year ago

    That first field would return false if the item is null
  • Changing it to a string will just always return True
  • 128651941143117824-@Lucas G
    That first field would return false if the item is null
    xioteer-1250175118001573929

    Xioteer

    1 year ago

    Is that how that works? So null will always opt for false
  • Basically like an "empty?"
  • lucasg-1250175169163427916

    Lucas G

    1 year ago

    1250175168970625045-image.png
  • That's an example of an If node
  • But this wouldn't work for a condition for a class**
  • xioteer-1250175452484472963

    Xioteer

    1 year ago

    if you made it true and false in the then and else it would work, right?
  • lucasg-1250175505379098665

    Lucas G

    1 year ago

    Right, but then it would be redundant
  • xioteer-1250175513339887709

    Xioteer

    1 year ago

    as it applies the class then
  • lucasg-1250175541806366754

    Lucas G

    1 year ago

    As you can just have the equals node
  • 128651941143117824-@Lucas G
    As you can just have the equals node
    xioteer-1250175676577874027

    Xioteer

    1 year ago

    ah right. Yeah somewhere I used it correctly already
  • fuelmeup-1255585528791830618

    AY EYE

    1 year ago

    @Xioteer what are you using for your table?
  • 1055706507641094285-@AY EYE
    @Xioteer what are you using for your table?
    xioteer-1255612287432265758

    Xioteer

    1 year ago

    uhhhhhhh... The table?
  • 🤣
  • fuelmeup-1255612418411856034

    AY EYE

    1 year ago

    LOL
  • wow i didn't even realize their was a table element ahha
  • xioteer-1255612618295476275

    Xioteer

    1 year ago

    Hahaha, you are killing me. I did not expect this to be a helpful answer!
  • fuelmeup-1255612811774787755

    AY EYE

    1 year ago

    hahah sometimes its just that easy
  • xioteer-1255613336222040064

    Xioteer

    1 year ago

    Yeah it's getting easier over time, but the heavy use of formulas remains 😄
  • IF you are altering data a lot like I do
  • fuelmeup-1255613745032593419

    AY EYE

    1 year ago

    i have no idea how to use it haha
  • xioteer-1255613876700184633

    Xioteer

    1 year ago

    The table?
  • fuelmeup-1255614007453286541

    AY EYE

    1 year ago

    yeah
  • xioteer-1255614107823116320

    Xioteer

    1 year ago

    You got a dataset from an api and need to display the data dynamically?
  • fuelmeup-1255614510513918083

    AY EYE

    1 year ago

    yes
  • xioteer-1255615532158287974

    Xioteer

    1 year ago

    you need to make the Table row repeat with the array of the data
    1255615532174938152-image.png
  • 1255615659778248715-image.png
  • xioteer-1255615941937598605

    Xioteer

    1 year ago

    Sort by is already just an extra. When you add the repeat and mark the array, you should instantly see the rows multiply
  • fuelmeup-1255616090466287738

    AY EYE

    1 year ago

    Thanks. What about the titles in your example?
  • fuelmeup-1255617416549896233

    AY EYE

    1 year ago

    i see now thanks
Leave a comment
Nordcraft Co-Founders Kasper Svenning Hansen and Andreas Møller

Chat with Nordcraft

Chat with the Nordcraft team

Nordcraft Co-Founder and CEO Andreas Møller

Call our CEO

Plan a video call with Andreas

Hi Nordcraft!

Write Nordcraft

Send us an email

BlogPricingDocumentationhello@nordcraft.com
RoadmapPress KitTerms & ConditionsPrivacy PolicyAffiliate
© Nordcraft 2025. All rights reserved.