Styling New Straight Table With Custom Theme

[Zack_Vilski]

Within the "New" Straight Table, is it possible to use a custom theme (within the JSON file) to set default styling on the Header, Dimension Values, Measure Values, Total Row, etc.?

I was able to deduce that the object's reference is sn-table and am able to customize the "Main" section (Headers, footers, etc.) but I haven't been able to locate any documentation for the rest of the Styling options.

I imagine the format would be something like this, but no combinations/arrangement that I've tried seem to work

"sn-table": {
"dimension":{
"values":{
"fontSize":"16px",
"color":"#FFFFFF",
"background":"#326F91"
}
}
}

Attached is a screenshot of the properties panel in question.

Any assistance would be much appreciated. Thanks in advance!

[etrimoreau · Accepted solution]

EDIT :
For those who want to go further, you can also define the style and weight of text elements in the theme file.
By defining typical weights and styles in the "_variables" section, you can then later use them to apply bold weight or italic styling for example.

Here is an example using the included Roboto font that is available in Qlik:

"_variables": {
  "@main-font-family": "Roboto",

  "@main-font-style": "normal",
  "@italic-font-style": "italic",

  "@bold-font-weight": "700",
  "@main-font-weight": "400",
  "@light-font-weight": "300",
  "@extralight-font-weight": "200"
}

Then you just refer them in the desired section using "fontWeight" or "fontStyle" properties:

      "title": {
          "main": {
              "fontSize": "@H1",
              "fontWeight": "@bold-font-weight",
              "backgroundColor": "@bg-transparent"
          },
          "subTitle": {
              "fontSize": "@H4",
              "fontWeight": "@bold-font-weight",
              "backgroundColor": "@bg-transparent"
          },
          "footer": {
              "color": "@B50",
              "fontSize": "@H6",
              "fontStyle": "@italic-font-style",
              "backgroundColor": "@bg-warning"
          }

Again, hope this helps you get your styling level over 9000!

Hi,

The new Straight table can indeed be styled within the custom theme json file.
All the information needed can be found here:
https://qlik.dev/extend/property-panel-basics/define-properties/themes-properties/#straighttablev2

You just made a tiny error concerning the objet name to refer to in the theme file:

Hence it is not sn-table but straightTableV2.
The whole example is indicated on the aforementioned url:

"straightTableV2": {
      "dimension": {
        "label": {
          "name": {
            "fontFamily": "Verdana",
            "fontSize": "18px",
            "color": "#ccc",
            "backgroundColor": "#ff0000"
          },
          "value": {
            "fontFamily": "sans-serif",
            "fontSize": "12px",
            "color": "#000000",
            "backgroundColor": "orangered"
          }
        }
      },
      "measure": {
        "label": {
          "value": {
            "fontFamily": "Arial",
            "fontSize": "14px",
            "color": "#ccc",
            "backgroundColor": "#ff0099"
          }
        }
      },
      "total": {
        "label": {
          "value": {
            "fontFamily": "Tahoma",
            "fontSize": "24px",
            "color": "#fff",
            "backgroundColor": "#3399aa"
          }
        }
      },
      "null": {
        "label": {
          "value": {
            "color": "red",
            "backgroundColor": "#ccc"
          }
        }
      },
      "grid": {
        "borderColor": "purple",
        "divider": {
          "borderColor": "lime"
        },
        "hover": {
          "color": "orange",
          "backgroundColor": "black"
        }
      }
    }

Hope this helps!

I must say I found the way to style this chart by reading your chart and looking for sn-table in Qlik documentation!
So thanks to you and your post! 🙂

Good day.

Bests,

[mikaelsc]

hello, thanks for the info. 

is it possible to set the zebra stripes/alternating rows of color definitions in the theme file? 

[etrimoreau]

Hello,

As of now, it appears to be impossible to do so in the theme file. Or at least there is no corresponding properties in the ones listed on qlik.dev website.

It would be a good thing that they do so!

Bests,

[Zack_Vilski]

That's great news that the documentation is out there now. At the time of posting, there wasn't much out ther for the Straight Table (only the Table-Table).

I had figured some of this out by parsing through the logic in the JavaScript file behind the Extension, but having the extensive documentation will be nice for future reference!

It should be noted that the new Pivot Table works quite similarly and has a similar reference. Below is an outline of what I have working on my end.

"pivotTableV2": {
	"measure": {
		"label":{
			"name":{
				"fontSize": "@TextSize",
				"color": "@White",
				"backgroundColor": "@Blue"
			},
			"value":{
				"fontSize": "@TextSize",
				"color": "@Black",
				"backgroundColor": "@Blue"
			}
		}
	},
	"dimension": {
		"label":{
			"name":{
				"fontSize": "@TextSize",
				"color": "@White",
				"backgroundColor": "@Blue"
			},
			"value":{
				"fontSize": "@TextSize",
				"color": "@White",
				"backgroundColor": "@Blue"
			}
		}
	},
	"total": {
		"label":{
			"value":{
				"fontSize": "@TextSize",
				"color": "@Black",
				"backgroundColor": "@NaviTotalGray"
			}
		}
	}
}

[etrimoreau]

Yes, and if you want to go further, check the edit on my previous post. You can also apply weights (bold) or styles (italic) to your texts!