Main Content

addStyle

Add style to table or tree UI component

Description

Table

example

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.

example

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

example

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.

example

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

collapse all

Create a table UI component in a figure.

fig = uifigure;
fig.Position = [500 500 520 200];

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

Table UI component with random data.

Then, create a red italic font style using the uistyle function. Add it to the whole table using the addStyle function.

s = uistyle('FontAngle','italic','FontColor','r');
addStyle(uit,s)

Table UI component. The cell text uses a red, italic font.

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])

Table UI component with tsunami data. Table cells that have NaN values are highlighted in yellow.

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')

Tree that displays the hierarchy of a simple app.

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);

Tree that displays the hierarchy of a simple app, with different levels colored in different shades of blue.

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)

Table UI component with 7 columns and 7 rows. The negative-valued data is displayed in bold red text. Cells in rows 3 and 4 and between columns 1 and 6 are green. The remaining cells in columns 1, 3, and 5 are cyan. All of the cells in column 7 are cyan.

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]));

Figure with a check box tree and a table.

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)

Figure with a tree and a table. Both components use a bold, green Calibri font.

Input Arguments

collapse all

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.

Style object created with the uistyle function.

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.

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.

tableTargetSupported tableIndex ValuesExamplesResult
'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.

tableTargetSupported tableIndex ValuesExamples
'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.

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.

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.

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.

treeTargetSupported treeIndex ValuesExamplesResult
'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.

Introduced in R2019b