Use CSS to change the style of each row depending on the content

Follow

Comments

13 comments

  • Avatar
    Charles Riebeling

    How would this code look if I want to change formatting using the table formatting. For example, if I wanted to change the value in column B red depending on the corresponding value in column A.

    Thanks!

    Charlie

    0
    Comment actions Permalink
  • Avatar
    Awesome Table

    Hello Charles,

    If you have two columns, "Content" and "Color". You could set up a template on the "Content" column that would look like that:

    <p data-color="{{Color}}" class="content">{{Content}}</p>
    .content[data-color="red"] {
    color : red
    }


    .content[data-color="green"] {
    color : green
    }

    If you need any further assistance, please  create a ticket so I can give you more help.

    Nicolas

     

     

    0
    Comment actions Permalink
  • Avatar
    Eric Johnston

    ^ Charle's comment. On the Template tab of the spreadsheet, what would the column header be for the code?

     

    I'm trying to make everything in the Content column be bold in the Awesome Table but only certain rows be a color based on the color column and I can not get it to work.  

    0
    Comment actions Permalink
  • Avatar
    PADC

    Hi, All the examples here are form the = (equal) condition.

    How do I change the color of a cell if the value is less than 0, is this possible?

    I need to change color to red if a value in the column "AMOUNT" is less than 0.

     

    Thanks.

    0
    Comment actions Permalink
  • Avatar
    Nicolas Gauvin

    Hello Eric, 

    You would need 3 columns:

    • "Color": This column would have colors as data (color names like "red" or hex codes like "#ffffff)
    • "Content": This column would have your text content
    • "Template": This column should not have anything as its data (just the header).

    In your template sheet create a column with "Template" as the header and the following as the second row:

    <p data-color="{{Color}}" class="content">{{Content}}</p>

    What to keep in mind:

    • Make sure that all your columns are within the data range in DATA SOURCE > Range
    • Make sure that your template is included in ADVANCED PARAMETERS > Templates Range
    • You can change the names "Color", "Content" and "Template" but make sure to replicate the change everywhere
    • You might want to hide the "Color" and "Content" columns as they are already used/displayed in the "Template" column. Please use the "Hidden"  keyword

    Please let me know if you need further help.

    Nicolas

     

    0
    Comment actions Permalink
  • Avatar
    Nicolas Gauvin

    Hello PADC,

    This is unfortunately not possible with Awesome Table.

    Nicolas

    0
    Comment actions Permalink
  • Avatar
    PADC

    Thanks Nicolas Gauvin.

     

    I found a workaround using:

    div[data-content^="-"]{

    Thank you.

    0
    Comment actions Permalink
  • Avatar
    'Nikolas Voniatis (Edited )

    Hello, a bit of a rookie question but i am not that familiar to CSS coding at all :P 
    I would like to have a google form with many paths, thus leaving some empty columns (and hiding them from the awesome table) due to each path having other pre-requisites. 

    -------------
    Sheet Example:
    - Column A: Has value >> Display
    - Column B: Empty >> Do not display
    - Column C: Has Value >> Display

    Preview Example:
    - A: {{column A}}
    - C: {{column C}}
    -------------

    Probably it will have something to do with an IF variable, but i don't have any idea how to implement this.  Any help would be appreciated!

    Nikolas


    1
    Comment actions Permalink
  • Avatar
    Thomas Morin

    Hello Nikolas Voniatis,

    I suggest you follow this method using queries.
    Just need to consult the #Task 13 and import the method with the relevant column.

    Kind regards.

    Thomas

    0
    Comment actions Permalink
  • Avatar
    Creative

    This is great.  One more question on this.  What if I want to change formatting based on date and time?  For example, I would make the status change based on if it has passed a specific time?

    Thank you.

    0
    Comment actions Permalink
  • Avatar
    Oleg Gulevskyy

    Hi Creative,

     

    Complexity of settings for this goal would vary on the goal itself.

    To give you something to start with, you can have a column with =IF formula that compares a column with dates to your current date (shown on screenshot) and displays cell values based on this comparison. Then this value is being displayed and formatted with help of CSS.

    On this screenshot you can see that B3 contains formula IF that checks date from C3 to current date (today). If it is earlier than today, it will display text late. Otherwise, it will display upcoming.

    Afterwards, we are making sure that those values are being picked up by our CSS template:

    Making sure that those values from the formula are recognised (late, upcoming) and certain color + text being displayed based on what is the value in the cell.

     

    This should give you an idea how to have a simple start with this goal, and if you want more advanced and more statuses for instance, you could use more IF formulas inside of another IF formula.

     

    Hope this helps.

    Thanks

    AT Team

    0
    Comment actions Permalink
  • Avatar
    Creative

    Thank you.  I am testing, but I don't see that it works.  Do your tables have AJAX so they would update without needing to be refreshed from the user-side?  If I evaluate a cell based on time, I would like that to update my cells automatically.  Is this possible?  Thank you.

    0
    Comment actions Permalink
  • Avatar
    Oleg Gulevskyy

    Hi Creative,

    At the moment this is not a native feature.

    Thanks

    0
    Comment actions Permalink

Please sign in to leave a comment.