Toggle dark mode

Hi,

📢 Taipy v2.1 is about to be launched! 🚀 ETA:

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

M
July 05, 2022

Column cell styling in tables

Welcome to Taipy Forums Taipy GUI Column cell styling in tables

Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26704
    AndhsAndhs
    Participant

    Hi everyone,

    Impressed by your high-potential framework, real next-gen for its simplicity

    I have some problems with cell styling in tables, namely in columns. For a model example:

    data = pd.DataFrame(
    {“Name”:[“John”,”Mary”,”Bob”],
    “Age”:[32,23,40]
    }
    )

    page = “””
    <|{data}|table|style[Name]={lambda state, value: “red-cell”}|>
    “””

    It throws no errors or warnings but no coloring is displayed

    The corresponding CSS:
    .red-cell td {
    background-color: red;
    }

    At the same time, for row styling, it’s ok, for example:
    <|{data}|table|style={lambda state, idx: “red-cell”}|>

    What can be wrong with my column example?

    Thanks,

    Andrey

    #235391
    Florian JactaFlorian Jacta
    Keymaster

    Hi,

    The problem seems to come from the definition of the CSS class.

    Try to change in your CSS file, this:
    .red-cell td {
    background-color: red;
    }

    To this:

    .red-cell {
    background-color: red;
    }

    I hope this will solve your issue. Don’t hesitate to come back to us if you have more questions.

    Florian

    #235419
    AndhsAndhs
    Participant

    Hi,

    Omitting “td” element from CSS didn’t help for column styling.

    And it didn’t affect row styling, either – it still works just as with “td” in CSS

    Actually, why should it matter if all table cells have this element anyway?

    Andrey

    #235420
    Florian JactaFlorian Jacta
    Keymaster

    Hi Andrey,

    It is strange. The solution works in my environment. This is my complete code in my ‘main.py’:

    import pandas as pd
    from taipy import Gui

    data = pd.DataFrame({“Name”:[“John”,”Mary”,”Bob”],
    “Age”:[32,23,40]})

    page = “””
    <|{data}|table|style[Name]={lambda state, value: “red-cell”}|>
    “””

    Gui(page).run()

    And here is my code in the ‘main.css’:

    .red-cell {
    background-color: red;
    }

    I can see on the webpage a red background for the ‘Name’ column as intended. I have tested it on the newest version of Taipy.

    I hope this will help you. If it doesn’t, maybe if you could provide your Taipy version, the name of your web browser, and your entire code, we will be able to find out what is happening.

    Florian

    #235433
    AndhsAndhs
    Participant

    Hi Florian,

    It’s OK now!

    Actually, when I first tested column styling, I used “td” in CSS. Indeed, it prevents column styling for some reason.

    But in my further experiments I added row styling in the same script, so it looked like:

    import pandas as pd
    from taipy import Gui

    data = pd.DataFrame({“Name”:[“John”,”Mary”,”Bob”],
    “Age”:[32,23,40]})

    page = “””
    <|{data}|table|style[Name]={lambda state, value: “red-cell”}|>
    <|{data}|table|style={lambda state, idx: “red-cell”}|>
    “””

    Gui(page).run()

    Then there are problems with column styling, with or without “td”, but now because of some conflict in style applying between tables, I believe.

    So it was all my negligence, no faults with your great framework.

    Thank you for your help, really appreciated.

    Andrey

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.