addStyle
Add style to table or tree UI component
Syntax
Description
Table
addStyle(
adds the style to a specific row, column, or cell. For example,
tbl
,s
,tableTarget
,tableIndex
)addStyle(tbl,s,'column',3)
adds the style to the third column of the
specified table.
Tree
addStyle(
adds the style to a specific node or tree level. For example,
tr
,s
,treeTarget
,treeIndex
)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' |
| [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' |
| node1 | Adds a style to the specified tree node. |
Vector of | [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 R2019bR2021b: 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.
MATLAB Command
You clicked a link that corresponds to this MATLAB command:
Run the command by entering it in the MATLAB Command Window. Web browsers do not support MATLAB commands.
Select a Web Site
Choose a web site to get translated content where available and see local events and offers. Based on your location, we recommend that you select: .
You can also select a web site from the following list:
How to Get Best Site Performance
Select the China site (in Chinese or English) for best site performance. Other MathWorks country sites are not optimized for visits from your location.
Americas
- América Latina (Español)
- Canada (English)
- United States (English)
Europe
- Belgium (English)
- Denmark (English)
- Deutschland (Deutsch)
- España (Español)
- Finland (English)
- France (Français)
- Ireland (English)
- Italia (Italiano)
- Luxembourg (English)
- Netherlands (English)
- Norway (English)
- Österreich (Deutsch)
- Portugal (English)
- Sweden (English)
- Switzerland
- United Kingdom (English)