KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Specific styling for Table Header #2091

Closed Keith opened this topic on on May 18, 2021 - 2 comments

Keith commented on May 18, 2021

I have a column in my DataTables with the label: "Arranged To Payer (Includes Outstanding)". I would like it so that the text inside the brackets are smaller then the text outside.

Is there a way I can set only the text inside the brackets to a smaller font?

https://stackoverflow.com/questions/7341164/how-to-style-parentheses-and-the-text-inbetween-them

The above post is a solution if I can add an id to a specific column header. Is that possible?

code:

DataTables::create(
        array(
            "name"      => "reportTable",
            "showFooter" => TRUE,
            "dataSource" => $this->dataStore("result"),
            "columns"   => array(
                "indexColumn" => ["label" => "#", "formatValue" => function($value, $row) { return ""; }],
                "Charge Date",
                "Location",
                "Payer First Name",
                "Payer Last Name",
                "Child First Name", 
                "Child Last Name", 
                "Cycle", 
                "Program",
                "Program Description",
                "Program Fee Description",
                "Charge Per Period" => ["prefix" => "$", "type"=>"number"],
                "Arranged To Payer"=> [
                    "label"=>"Arranged To Payer (Includes Outstanding)",
                    "prefix" => "$", 
                    "type" => "number", 
                    "footer"=>"sum", 
                ]
                ));

Or if its possible to add cssStyle to the header with the ::after attribute kind of like this:

   "Arranged To Payer"=> [
        "label"=>"Arranged To Payer",
        "prefix" => "$", 
        "type" => "number", 
        "footer"=>"sum", 
        "cssStyle"=> array(
               "th::after" => "content:'(Includes Outstanding)';font-size:5px;"
         )]
Sebastian Morales commented on May 19, 2021

Oh, just put the label text in parenthesis in a spana with css style like this:

    "label" => "Arranged To Payer (<span style='font-size:8px'>Includes Outstanding</span>)",

Hope it works for you. Tks,

Keith commented on May 19, 2021

Works! Thanks!

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

DataGrid