addStyle

Add style to table or tree UI component

Syntax

addStyle(tbl,s)

addStyle(tbl,s,tableTarget,tableIndex)

addStyle(tr,s)

addStyle(tr,s,treeTarget,treeIndex)

Description

Table

addStyle(tbl,s) adds a style created with the uistyle function to the specified table UI component. The style is applied to the whole component. The component must be parented to a figure created with the uifigure function or to one of its child containers.

addStyle(tbl,s,tableTarget,tableIndex) adds the style to a specific row, column, or cell. For example, addStyle(tbl,s,'column',3) adds the style to the third column of the specified table.

Tree

addStyle(tr,s) adds a style created with the uistyle function to the specified tree. The style is applied to the whole component. The component must be parented to a figure created with the uifigure function or to one of its child containers.

addStyle(tr,s,treeTarget,treeIndex) adds the style to a specific node or tree level. For example, addStyle(tr,s,'level',1) adds the style to the top-level nodes of the specified tree.

Examples

Change Color of Table Column

Change the background color of the cells in a table column by creating a style and applying it to the table.

Create a figure with a table UI component in it and populate the table with numeric data.

fig = uifigure;
fig.Position = [500 500 520 220];
uit = uitable(fig);
uit.Data = rand(5);
uit.Position = [20 30 480 135];

Then, create a style with a specific background color and add the style to the second column of the table using the addStyle function.

s = uistyle('BackgroundColor','red');
addStyle(uit,s,'column',2)

Change Color of Table Cells Based on Data

Style cells in a table UI component that contain missing values. In this case, add a yellow background color style to cells that have NaN values.

Read tsunami sample data into the workspace as a table array. Then create a table UI component to display the data.

tdata = readtable('tsunamis.xlsx');
vars = {'Year','Month','Day','Hour', ...
        'MaxHeight','Cause','EarthquakeMagnitude'};
tdata = tdata(1:100,vars);

fig = uifigure('Position',[500 500 750 350]);
uit = uitable(fig);
uit.Position = [20 20 710 310];
uit.Data = tdata;
uit.RowName = 'numbered';

Use the ismissing function to get a logical array of the table elements that contain missing values. Find the row and column subscripts for the elements that have NaN values. Finally, create a yellow background color style and add it to the cells with NaN values in the table UI component.

styleIndices = ismissing(tdata);
[row,col] = find(styleIndices);

s = uistyle('BackgroundColor','yellow');
addStyle(uit,s,'cell',[row,col])

Highlight Levels of a Tree

Create a tree to display a simple app hierarchy and highlight the different hierarchy levels.

Create a tree that represents the component hierarchy in a MATLAB^® app. At the top level there is a UI figure window. The figure contains a UIAxes object and a Panel container. The panel holds a Button and a DropDown object. Expand all nodes of the tree to see the full hierarchy.

fig = uifigure('Position',[100 100 250 350]);
t = uitree(fig);
fignode = uitreenode(t,'Text','UI Figure');
pnlnode = uitreenode(fignode,'Text','Panel');
axnode = uitreenode(fignode,'Text','UIAxes');
btnnode = uitreenode(pnlnode,'Text','Button');
ddnode = uitreenode(pnlnode,'Text','DropDown');
expand(t,'all')

Create three styles with background colors in different shades of blue to highlight the different tree levels. Apply the darkest background to the nodes at level one, a lighter background to the nodes at level two, and the lightest background to the nodes at level three.

s1 = uistyle('BackgroundColor','#3773EB');
s2 = uistyle('BackgroundColor','#78A1F2');
s3 = uistyle('BackgroundColor','#B5CBF8');

addStyle(t,s1,'level',1);
addStyle(t,s2,'level',2);
addStyle(t,s3,'level',3);

Emphasize Different Parts of Table Using Multiple Styles

Create multiple styles and add them to different parts of a table UI component.

Create a figure with a table UI component in it and display numeric data in the table. Find the row and column subscripts for elements in the table with a value less than zero so you can style these cells later.

fig = uifigure;
fig.Position = [500 500 720 230];

uit = uitable(fig);
uit.Data = randi([-20,20],7);
uit.Position = [20 30 680 185];

[row,col] = find(uit.Data < 0);

Create two background color styles and one style that specifies font color and weight. Add a cyan background color to columns 1, 3, and 5. Emphasize the cells with negative values by making their font red and bold. Then, style rows 3 and 4 with a green background color. Finally, reuse the cyan background color style and add it to column 7. For cells where multiple styles of the same type are added, the style that is added last is the one that displays in the cell.

s1 = uistyle;
s1.BackgroundColor = 'cyan';
addStyle(uit,s1,'column',[1 3 5])

s2 = uistyle;
s2.FontColor = 'red';
s2.FontWeight = 'bold';
addStyle(uit,s2,'cell',[row,col])

s3 = uistyle;
s3.BackgroundColor = 'green';
addStyle(uit,s3,'row',[3 4])

addStyle(uit,s1,'column',7)

Style Tree Nodes to Indicate File Type

Style nodes in a tree that showcases a file structure to visually distinguish different file types.

Create a tree UI component. Each top-level node represents a folder. Each child node represents a file in that folder. Expand the tree to see all the nodes.

fig = uifigure("Position",[300 300 350 400]);
t = uitree(fig);

% Parent nodes
n1 = uitreenode(t,"Text","App 1");
n2 = uitreenode(t,"Text","App 2");
n3 = uitreenode(t,"Text","Images");

% Child nodes
n11 = uitreenode(n1,"Text","myapp1.m");
n21 = uitreenode(n2,"Text","myapp2.m");
n22 = uitreenode(n2,"Text","app2callback.m");
n31 = uitreenode(n3,"Text","peppers.png");

expand(t)

Create three styles: one with a bold font weight, one with an italic font angle, and one with an icon.

dirStyle = uistyle("FontWeight","bold");
mStyle = uistyle("FontAngle","italic");
imgStyle = uistyle("Icon","peppers.png");

Apply the bold style to the top-level nodes to distinguish the nodes that represent folders. Apply the italic style to the children of the App 1 and App 2 nodes to distinguish the nodes that represent MATLAB program files. Finally, apply the icon style to the node that represents an image file to show a preview of the image.

addStyle(t,dirStyle,"level",1)
addStyle(t,mStyle,"node",[n1.Children;n2.Children])
addStyle(t,imgStyle,"node",n31)

Create Consistent Appearance Between UI Components

Add a single style to both a check box tree and a table UI component to create a cohesive app appearance.

Create a figure window, and add a check box tree and a table in a grid layout manager. Populate both components with some sample data.

fig = uifigure('Position',[300 300 450 330]);
gl = uigridlayout(fig,[1 2]);
gl.ColumnWidth = {'1x','2x'};

tr = uitree(gl,'checkbox');
n1 = uitreenode(tr,'Text','Reptiles');
n11 = uitreenode(n1,'Text','Snake');
n12 = uitreenode(n1,'Text','Dinosaur');
n2 = uitreenode(tr,'Text','Amphibians');
n21 = uitreenode(n2,'Text','Turtle');
expand(tr)

tbl = uitable(gl,'Data',randi(100,[20 3]));

Create a style that specifies the font color, name, and weight. Apply this style to both the entire tree and the entire table.

s = uistyle('FontColor',[0.1 0.5 0.06], ...
  'FontName','Calibri', ...
  'FontWeight','bold');
addStyle(tr,s)
addStyle(tbl,s)

Input Arguments

tbl — Table component

Table object

Table component, specified as a Table object created with the uitable function. The component object must be parented to a figure created with the uifigure function or one of its child containers.

s — Style object

Style object

Style object created with the uistyle function.

tableTarget — Table style target

'table' (default) | 'row' | 'column' | 'cell'

Table style target, specified as 'table', 'row', 'column', or 'cell'. Use this argument to indicate the type of table part to apply the style to.

Example: addStyle(tbl,s,'column',5) adds the style to the fifth column of tbl.

Example: addStyle(tbl,s,'cell',[3 7]) adds the style to the table cell of tbl in row 3, column 7.

tableIndex — Table style target index

'' (default) | positive integer | vector of positive integers | n-by-2 array of positive integers | ...

Style target index, specified as one of the values listed in the tables. The types of values that you can specify depend on the value of tableTarget and on the type of data used in the table UI component.

tableTarget	Supported tableIndex Values	Examples	Result
'row'	Positive integer.	4	Adds a style to the row with the corresponding row index.
	Vector of positive integers.	[3 8 9 12]	Adds a style to the rows with the corresponding row indices.
'column'	Positive integer.	3	Adds a style to the column with the corresponding column index.
	Vector of positive integers.	[1 2 7 14]	Adds a style to the columns with the corresponding column indices.
'cell'	n-by-2 array of positive integers.	[2 4;5 9;13 27]	Adds a style to the cells with the corresponding row and column subscripts.
'table'	Empty character vector.	''	Adds a style to the entire table.

In table UI components in which the underlying data is a table array, there are additional options when the target is specified as 'column'. Specify these values for the tableIndex if you want to apply a style to a column based on the variable names in the table array.

tableTarget	Supported tableIndex Values	Examples
'column'	String scalar. Adds a style to the column with the corresponding variable name.	"Torque"
	String array. Adds a style to the columns with the corresponding variable names.	["Torque" "Mass"]
	Character vector. Adds a style to the column with the corresponding variable name.	'Revenue'
	1-D cell array of character vectors Adds a style to the columns with the corresponding variable names.	{'Year','Expenses','Revenue'}

If you are styling cells based on whether the value of the cells meets a specific condition, and your cells are editable, then use a CellEditCallback function to recompute the style target indices that meet the specified condition, and add a new style to the table that sets these new cells as the tableIndex.

tr — Tree component

Tree object

Tree component, specified as a Tree object created with the uitree function. The component object must be parented to a figure created with the uifigure function or one of its child containers.

treeTarget — Tree style target

'tree' (default) | 'level' | 'node'

Tree style target, specified as 'tree', 'level', or 'node'. Use this argument to indicate the type of tree part to apply the style to.

Example: addStyle(tr,s,'level',1) adds the style to the top-level nodes of tr.

Example: addStyle(tr,s,'node',[n1 n2]) adds the style to the nodes n1 and n2.

treeIndex — Tree style target index

'' (default) | positive integer | vector of positive integers | TreeNode object | vector of TreeNode objects | ...

Style target index, specified as one of the values listed in the table. The types of values that you can specify depend on the value of treeTarget.

treeTarget	Supported treeIndex Values	Examples	Result
'node'	TreeNode object	node1	Adds a style to the specified tree node.
	Vector of TreeNode objects	[node1 node2]	Adds a style to the specified tree nodes.
'level'	Positive integer	2	Adds a style to the tree level with the corresponding index.
	Vector of positive integers	[1 4]	Adds a style to the tree level with the corresponding indices.
'tree'	Empty character vector	''	Adds a style to the entire tree.

The tree level index specifies the location within the tree hierarchy. The tree nodes at level one are those parented directly to the tree UI component, the nodes at level two are those parented to the nodes at level one, and so on.

Tips

• To see a list of the styles that have been added to a table or a tree, query the value of the StyleConfigurations property of the component.

Version History

Introduced in R2019b

R2021b: Add styles to nodes and levels in a tree UI component

To apply a style to a tree, tree node, or tree level, specify the Tree object as the first argument to the addStyle function. Specify the target type and index using the treeTarget and treeIndex arguments.