Add style to specific columns or rows in your Table view

Follow

Comments

16 comments

  • Avatar
    Nahdi Lazar (Edited )

    Question - what if I want to set a different CSS to a row based on its content and not on its position in the table? Meaning, that in the example shown above, only "Game of Thrones" will be highlighted, no matter where it appears in the table, while other entries holding the 2nd position won't be highlighted at all.

    Would be helpful to be able to assign row specific CSS, or at least background color, using a keyword in a designated column in the sheets.

    Any other ideas?

  • Avatar
    Awesome Table

    Hello Nahdi Nazar,

    Given your request I think you should read this article instead. You need to change the items in function of the content.

    Kind regards,
    Thomas

  • Avatar
    Nahdi Lazar

    Thank you Thomas, 

    but as far as I understand, the article you linked to allows defining CSS for a specific element in a table.
    I'm not sure I understand how to use it to change the background-color of a whole row, or even a single cell in a table (unless I'm using the card view).

    Can you help? Thanks.

  • Avatar
    Awesome Table

    Hello Nahdi Lazar,

    Would it be possible for your to share your view and your spreadsheet at "support@awesome-table.com"? If you have sensitive data, you can make a copy with similar data.

    Just make sure you give us access to your data.

    Kind regards,
    Thomas

     
  • Avatar
    Oleg Klotschenok

    Hello Thomas!

    Could you explain, how to highlight rows depends on the data. For example: all rows should be highlighted where

    Tv show name = "Game of Thrones"

    It's the same question as Nahdi Nazar asked.

    Thank you

    Best Regards

    Oleg

  • Avatar
    Awesome Table

    Hi Oleg Klotschenok,

    Sorry for the delay of the response!

    I suggest you change the CSS with "background-color".

    For example, if you want to highlight text in the second row, you just need to use this code:

    tbody>:nth-child(2) {

    background-color:red!important;

    }

    Kind regards,
    Thomas

  • Avatar
    Caleb Lim

    Hi, is it possible to control the number of rows through custom css? I am aware that configuring the table is through the editor panel. However, we would like to configure the table on the fly, depending on what the user choose in the search filter.

  • Avatar
    Awesome Table

    Hi Caleb,

    Indeed it is only possible to manage that with editor panel.

    Kind regards,
    Thomas

  • Avatar
    Angel Christian

    Hi,

    What css code can I use to change the size of a column, please?

  • Avatar
    Randolph Abelardo

    Hello @Angel Christian. 

    Let's say you want to constrain the width of your 2nd column, you simply add this to your <style> template:

    tbody>:nth-child(2){
    width: 250px!important;
    }

    We followed the 3rd styling option from the section above: 3 - Apply style to specific rows:

    * Note: The value can be in px or %.

    Hope this helps.

     

    - Randy

  • Avatar
    Angel Christian

    Hi Randy,

     

    I tried that but it is not making any difference. What am I doing wrong?

  • Avatar
    Randolph Abelardo (Edited )

    Hi @Angel.

    First, please read our article on the safety of your data (and files) when troubleshooting - https://goo.gl/8CCULC.

    If our data-safety protocol is ok with you, please share your:

    ⚫ *AwesomeTable link*
    Share with us your AwesomeTable & Google Sheets datasource so we can *pinpoint* where the *problem* is and *provide the right solution* at the soonest possible time. Detailed instructions here https://goo.gl/gDaAaP.

    ⚫ *Google Sheets datasource*
    It's best to set the sharing settings to *Anyone with the link*. Click here to learn more - https://goo.gl/uiRzJs.

    * _You can opt to anonymize your content by using *dummy data* (fake, but realistic) if your Sheets contains confidential info._

    Or you could email the files to me at rabelardo@gmail.com.

  • Avatar
    Awesome Table

    Hello Angel Christian,

    You can also try this code:

    tbody>:nth-child(2){
    min-width: 250px!important; 
    }

    Normally it should work.

    Kind regards,
    Thomas

  • Avatar
    Randolph Abelardo (Edited )

    But if both @Thomas' and my solution doesn't work, 
    I'm assuming that you don't have a template linked to your view (since you're using a Table view).

    If this is so, please consult this article on how to reference or link a template to your Awesome Table view.

    - Randy

  • Avatar
    Muhammed Aadhil (Edited )
    But what I got is only fixed row

    tbody>:nth-child(2){
    color:red;
    font-weight: bold;
    }

    What I want is if the cells contain the word Today in column A, I want the respective rows to be highlighted in green.

    Can you help me to modify the above code? it would be really helpful and easy my task.

    Thanks
     
     
  • Avatar
    Awesome Table

    Hello Muhammed Aadhil,

    In this way, I suggest you follow this article about the conditional display. It will be helpful in your case.

    Kind regards,
    Thomas

Please sign in to leave a comment.