How to modify the font size of the first column of table

To modify the first column of values you can apply custom style to the visual.

There are generally two steps:

  1. define a CSS class for the visual so you do not impact other visuals on the dashboard
  2. apply the CSS to the custom style of the visual.

Below is a screenshot of the two fields you want to used

Cross table

.bold-table .viz-crosstab-table tr>td.viz-td-header {
    font-size: 25px !important;
}
.bold-table .viz-crosstab-table tr.viz-tr-header>td.viz-td-header {
    font-size: 12px !important;

Regular table

.bold-table .dataTables_scrollBody .table tbody tr :first-child{
    font-size: 25px !important;
}

1 Like

If you want to make one entire column specific color or custom style you can apply the following CSS.

Modify the “nth-child(k)” with the proper column number for k. So if you want the 3rd column to be specific color then use “nth-child(3)”

Regular Table

.bold-table .dataTables_scrollBody .table tbody tr :nth-child(2){
    font-size: 25px !important;
    color: white !important;
    background-color: grey !important;
}

.bold-table .dataTables_scrollHead .table thead tr :nth-child(2){
    font-size: 25px !important;
    color: white !important;
    background-color: grey !important;
}
1 Like

Additionally, you can add the following CSS to your visual if you would like hide the header of your table:

.custom-table th {
    display: none;
}

Below is a screenshot of an example where this CSS is applied at the visual level. NOTE : You must specify the custom CSS class (i.e. custom-table) at the top of the Custom Style tab for the CSS to apply properly.

is it possible to add customJS and append classname to each cell?
when table is refresh with new data, classname appended was removed. Any advice on this?

@FaridAvesko there’s a solution for that, let me take a look at some of our custom styles on our demo system and I’ll reply back with an example.

Sure, i look forward to it

@FaridAvesko take a look at the code below for some inspiration. Essentially you can trigger your function to fire again based on click behaviors, including resorting and page changes.

        var myFunction = function(input) {
        
        //
        // your function does stuff...
        //
        
        //-------------------------------------------------------
          // for subsequent clicks
          // enable pagination & sorting operations to work
          // let's attach handlers to those elements and call our custom code
          //-------------------------------------------------------
           
          $('#' + arcapi.chartId() + ' .paginate_button').on("click", 
            function() {
                myFunction(input);
          });
          
          $('#' + arcapi.chartId() + ' .sorting').on("click", 
            function() {
                myFunction(input);
          });
         
        };
        
        myFunction();