Styling Tabular

Min-Hsuan Peng, Wolfram

#WolframTechConf

Overview

Styling overall appearance

Image size, scrollbars, appearance elements, etc...

Styling content

Change appearance by position

Content-based styling

Styling overall appearance

Options

({{▪, (RefLink[AllowedDimensions, paclet:ref/AllowedDimensions]), (RefLink[Automatic, paclet:ref/Automatic]), restrictions on the number of rows or columns}, {▪, (RefLink[AppearanceElements, paclet:ref/AppearanceElements]), (RefLink[Automatic, paclet:ref/Automatic]), elements to include in the displayed view}, {▪, (RefLink[BaselinePosition, paclet:ref/BaselinePosition]), (RefLink[Automatic, paclet:ref/Automatic]), what to align with a surrounding text baseline}, {▪, (RefLink[BaseStyle, paclet:ref/BaseStyle]), {}, base style specifications for the tabular}, {▪, (RefLink[ImageMargins, paclet:ref/ImageMargins]), (RefLink[Automatic, paclet:ref/Automatic]), margins around the displayed tabular}, {▪, (RefLink[ImageSize, paclet:ref/ImageSize]), (RefLink[Automatic, paclet:ref/Automatic]), the overall size of the table view}, {▪, (RefLink[Scrollbars, paclet:ref/Scrollbars]), {(RefLink[Automatic, paclet:ref/Automatic]),(RefLink[Automatic, paclet:ref/Automatic])}, whether to include scrollbars}, {▪, (RefLink[ScrollPosition, paclet:ref/ScrollPosition]), (RefLink[Automatic, paclet:ref/Automatic]), scroll position if scrolling is enabled}})

Options that change the overall looks

Tabular[,]

Tabular[,,AllowedDimensions->{3, 3}]

Tabular[,,ImageSize->{300,100}]

Tabular[,,Scrollbars->{False,False}]

Tabular[,,BaseStyle->{Blue,FontFamily->"Courier"}]

Styling content

Options

({{▪, (RefLink[Alignment, paclet:ref/Alignment]), (RefLink[Automatic, paclet:ref/Automatic]), horizontal and vertical alignment of items}, {▪, (RefLink[Background, paclet:ref/Background]), (RefLink[None, paclet:ref/None]), what background colors to use }, {▪, (RefLink[HeaderAlignment, paclet:ref/HeaderAlignment]), (RefLink[Automatic, paclet:ref/Automatic]), horizontal and vertical alignments of headers}, {▪, (RefLink[HeaderBackground, paclet:ref/HeaderBackground]), (RefLink[Automatic, paclet:ref/Automatic]), background colors to use for headers}, {▪, (RefLink[HeaderSize, paclet:ref/HeaderSize]), (RefLink[Automatic, paclet:ref/Automatic]), width and height of headers}, {▪, (RefLink[HeaderStyle, paclet:ref/HeaderStyle]), (RefLink[Automatic, paclet:ref/Automatic]), styles to use for headers }, {▪, (RefLink[ItemDisplayFunction, paclet:ref/ItemDisplayFunction]), (RefLink[None, paclet:ref/None]), function to use to format items}, {▪, (RefLink[ItemSize, paclet:ref/ItemSize]), (RefLink[Automatic, paclet:ref/Automatic]), width and height of each item}, {▪, (RefLink[ItemStyle, paclet:ref/ItemStyle]), {}, styles for columns and rows }})

Syntax

opt-><|"elem"->spec,…|>

Styling by position

({{▪, "Columns"->{(Subscript[s, 1]),(Subscript[s, 2]),…}, style columns by position}, {▪, "Rows"->{(Subscript[s, 1]),(Subscript[s, 2]),…}, style rows by position}, {▪, "ColumnRules"->{(Subscript[col, 1])->(Subscript[s, 1]),…}, style columns by keys}, {▪, "RowRules"->{(Subscript[row, 1])->(Subscript[s, 1]),…}, style rows by index}, {▪, "ItemRules"->{{(Subscript[row, 1]),(Subscript[col, 1])}->(Subscript[s, 1]),…}, style items by row and column}})

Columns & Rows

Tabular[,,ItemStyle-><|"Columns"->{,,,,}|>]

Tabular[,,ItemStyle-><|"Rows"->{,,,,}|>]

Cyclic

Tabular[,,ItemStyle-><|"Rows"->Cyclic[{,,,,}]|>]

Tabular[,,ItemStyle-><|"Columns"->{Gray,Cyclic[{,}],Gray}|>]

ColumnRules, RowRules & ItemRules

Use index or column key

Tabular[,,ItemStyle-><|"ColumnRules"->{1->,3->,"Species"->}|>]

Tabular[,,ItemStyle-><|"RowRules"->{Range[4]->,3->,8->}|>]

Tabular[,,ItemStyle-><|"ItemRules"->{{3,"SepalWidth"}->Directive[Bold,Italic,]}|>]

Same idea goes to other options - Background, Alignment, ItemSize, etc...

Tabular[,,
ItemStyle-><|"ItemRules"->{{6,3}->White}|>,
Background-><|
"Rows"->Cyclic[{,None}],
"RowRules"->{6->},
"Columns"->Cyclic[{,None}]|>
]

Tabular[,,
HeaderBackground-><|
"Rows"->Cyclic[{,None}],
"RowRules"->{6->},
"Columns"->Cyclic[{,None}]|>
]

Content appearance styling

Syntax

opt-><|"elem"->spec,…|>

Content-based styling

({{▪, "ColumnValueFunction"->cf, style columns by values}, {▪, "RowValueFunction"->rf, style rows by values}, {▪, "ItemValueFunction"->if, style items by value}})

RowValueFunction

"RowValueFunction"->f applies the function f to each row of data

"RowValueFunction"->{(Subscript[row, i])->f,..} applies the function f to ith row of data

Returns a setting to use for the entire row or a list of col->sty

Ex: Highlight rows based on a column’s value

Tabular[,,Background-><|"RowValueFunction"->Function[row,If[row["SepalLength"]>5,StandardYellow]]|>]

Only apply to the first 10 rows

Tabular[,,Background-><|"RowValueFunction"->{Range[10]->(If[#SepalLength>5,StandardYellow]&)}|>]

Only apply to the “SepalWidth” column

Tabular[,,Background-><|"RowValueFunction"->Function[row,If[row["SepalLength"]>5,"SepalWidth"->StandardYellow]]|>]

Ex: Highlight the smallest value of each row

Tabular[RandomReal[1,{10,10}],
Background-><|
"RowValueFunction"->Function[v,PositionSmallest[v]->LightBlue]
|>]

ColumnValueFunction

"ColumnValueFunction"->f applies the function f to each column of data

"ColumnValueFunction"->{(Subscript[col, i])->f,..} applies the function f to ith column of data

Returns a setting to use for the entire column or a list of row->sty

Ex: Color background of each column based on its value from min to max

ColorData["Rainbow"]

Tabular[,,
ItemStyle-><|"Columns"->{Range[4]->White}|>,
Background-><|
"ColumnValueFunction"->Function[col,ColorData["Rainbow"]/@Rescale[col,MinMax[col]]]|>
]

Only apply to the first column

Tabular[,,ItemStyle-><|"Columns"->{1->White}|>,
Background-><|
"ColumnValueFunction"->{
"SepalLength"->Function[col,ColorData["Rainbow"]/@Rescale[col,MinMax[col]]]}|>]

Ex: Highlight the largest value of each column

Tabular[,,
Background-><|"ColumnValueFunction"->Function[column,PositionLargest[Normal@column]->StandardOrange]|>]

ItemValueFunction

"ItemValueFunction"->f applies the function f to each cell value of data

"ItemValueFunction"->{(Subscript[col, i])->f,..} applies the function f to the ith column

Returns a setting to use for the each cell

Ex: Separate values greater than 3 from smaller than 3

Tabular[,,
Background-><|"ItemValueFunction"->Function[val,If[val>3,LightRed,LightBlue]]|>]

Color a specific column based on each item’s value

Tabular[,,
Background-><|"ItemValueFunction"->{"SepalWidth"->Function[val,If[val>3,LightRed,LightBlue]]}|>]

Same idea goes to other options - ItemStyle, Alignment, ItemSize, etc...

Content appearance styling

ItemDisplayFunction

Full control on how to display the content

ItemDisplayFunction->f applies the function f to each cell with 3 arguments: value, index, tabular

Return any expression to use for each cell.

Tabular[RandomReal[1,{1,1}],
ItemDisplayFunction->((Echo[{##}];#)&)](**)

Ex: Add a smooth histogram to show the distribution of the column SepalLength

Tabular[,,
ItemDisplayFunction->(If[#2[[2]]==1,
SmoothHistogram[Normal@#3[All,#2[[2]]],
,Epilog->{{Red,InfiniteLine[{{#,0},{#,1}}]},Text[#,{Right,Top},{1,1}]}],
#]&)]

Examples

Use content-based stying to explore data:

Highlight survived children passengers

Tabular[titanic,
BaseStyle->8,HeaderStyle->{"Columns"->Cyclic[{FontSize->8}]},
Background-><|
"RowValueFunction"->(If[NumericQ[#Age] && #Age<18&&#Survived==1,If[#Sex==="female",LightPink,LightBlue]]&)|>]

SortBy[Tabular[titanic,
BaseStyle->8,HeaderStyle->{"Columns"->Cyclic[{FontSize->8}]},
Background-><|
"RowValueFunction"->(If[NumericQ[#Age] && #Age<18&&#Survived==1,If[#Sex==="female",LightPink,LightBlue]]&)|>],Function[#Age]]

Use content-based stying to decorate a summarized tabular

Highlight sales with background color:

Tabular[markettab,<|"KeyColumns"->{"Category"}|>,
Background-><|
"Columns"->{GrayLevel[0.95],None},
"Rows"->Cyclic[{None,LightBlue}],
"ColumnValueFunction"->{"Sales"->Function[col,ColorData["LightTemperatureMap"]/@Rescale[col,MinMax[col]]]}|>
]

Highlight the categories that have outstanding margin:

Tabular[markettab,<|"KeyColumns"->{"Category"}|>,
Background-><|
"Columns"->{GrayLevel[0.95],None},
"Rows"->Cyclic[{None,LightBlue}],
"RowValueFunction"->Function[row,{"Category","Margin %"}->If[row["Margin %"]>50,Lighter@StandardRed]]|>
]

Stylize a pivot table

sales=ResourceData["Sample Tabular Data: Sales Data"]

PivotTable[sales,Length[#Product]&,{"Sector","Region"},"Product"]

sty=With[{cat=Union@Normal@[All,"Sector"]},Thread[cat->Lighter/@ColorData[45]/@Range[Length[cat]]]]

SortBy[Tabular[,
Background-><|
"RowValueFunction"->Function[row,row["Sector"]/.sty]|>],{Function[#Sector],Function[#Region]}]

Thank you

Init

titanic=;
number1data={
{"Washers & Dryers",1580,197,12.5,247},
{"Projectors & Screens",973,211,21.7,382},
{"Refrigerators",953,-351,-36.8,331},
{"Laptops",668,181,27.1,301},
{"Coffee Machines",476,-11,-2.3,251},
{"Lamps",471,340,72.3,548},
{"Water Heaters",443,95,21.3,152},
{"Monitors",424,-1,-0.2,327},
{"Microwaves",319,14,4.5,375},
{"Desktops",266,23,8.7,184},
{"Air Conditioners",253,138,54.5,216},
{"Printers, Scanners & Fax",219,1,0.3,379},
{"Computers Accessories",128,-18,-14.3,654},
{"Fans",83,-39,-46.4,287}
};
markettab= Tabular[
number1data,
"ColumnKeys"->{"Category","Sales","Margin","Margin %", "Total Customers"}
];
iris=ToTabular[];
census=ToTabular[];
{,,,,,,,,,};
{,,,,,,,,,};