Table

ic.Table is a data table for displaying and interacting with structured data. It renders rows from a MATLAB table and gives you full control over column types, sorting, filtering, inline editing, row selection, and pinned columns. Columns are defined using typed subclasses of ic.table.Column, each tailored to a specific data type (text, numbers, booleans, dates, enums, progress bars, ratings, sparklines, images, colors, and action buttons).

Size, striping, and selection

Size controls the row height and font scaling: sm (24px), md (28px, the default), and lg (36px). Striped alternates row backgrounds for readability. Setting Selectable to true enables interactive selection: click a row number to select a row, a header to select a column, or a cell for cell selection. Shift-click adds to the selection. The Selection property is a struct with a type field ("none", "row", "column", or "cell") and a value containing the selected items.

Column types

Every column in a Table is defined by an ic.table.Column subclass. When you assign a MATLAB table to Data without specifying Columns, the framework auto-infers column types from your data (numeric becomes NumberColumn, logical becomes BooleanColumn, datetime becomes DateColumn, everything else becomes TextColumn). For finer control, create column objects explicitly. Each type has its own configuration properties on top of the shared ones (Field, Header, Width, Sortable, Filterable, Resizable, Align, Pinned, Visible, Editable).

TextColumn

Placeholder shows ghost text in empty cells. RichText enables bold and italic markdown parsing. Transform applies CSS text-transform ("uppercase", "lowercase", "capitalize"). Toggle Editable below to try inline text editing (double-click a cell).

NumberColumn

Decimals sets fixed decimal places (-1 = auto). Prefix and Suffix wrap the formatted value (e.g. ”$” or ”%”). ThousandsSeparator adds comma grouping. Numbers also support ColorRules for conditional background coloring.

BooleanColumn

DisplayMode controls rendering: "checkbox" (default), "text" (true/false), or "numeric" (1/0). When editable, a single click toggles the value (no double-click needed). Supports ColorRules (true = 1, false = 0).

EnumColumn

Items defines the set of allowed values. Colors assigns a hex color per item (must match Items length or be empty). Values render as colored tag pills. Sorting uses ordinal position in Items rather than alphabetical order.

DateColumn

Format selects a display preset: "short", "long", "numeric", "iso", "datetime", or "time". Filtering uses date-range inputs. Supports ColorRules.

ProgressBarColumn

Renders an inline progress bar. Min / Max define the value range. ShowLabel displays the formatted value next to the bar, with LabelFormat as a sprintf pattern (e.g. "%d%%"). Variant sets the bar color ("primary", "secondary", "success", "warning", "destructive"). Supports ColorRules for conditional bar color.

RatingColumn

MaxStars sets the scale (default 5). AllowHalf enables half-star increments. Color sets the filled star color as a hex value. When editable, users can click to set a rating. Supports ColorRules for conditional background color.

SparklineColumn

Renders a mini line chart from a numeric vector per row. LineWidth, FillArea, and ShowEndDot control the line appearance. ShowLabel with Metric ("total" for the last value, "relative" for percentage change) adds a value beside the chart. Variant and ColorRules control color.

ColorColumn

Renders color swatches. Format sets the output format ("hex", "rgb", "hsl"). ShowAlpha enables an alpha channel slider. Presets provides quick-pick color swatches. When editable, double-click opens a full color picker.

ButtonColumn

Buttons is an array of ic.table.CellButton objects. Each button has a Key (identifier passed to the callback), Label, Icon, Tooltip, Variant ("default", "primary", "destructive"), and Disabled. Clicks invoke the column’s OnCellAction callback with the button’s Key. Button columns are always non-sortable and non-filterable.

ImageColumn

Displays thumbnails from ic.Asset values (file paths or URLs). PopupWidth / PopupHeight control the hover preview size. ObjectFit sets the CSS fit ("contain", "cover", "fill", etc.). Hover over a thumbnail to see the full-size popup.

Sorting and filtering

Columns with Sortable = true show a sort indicator in the header. Clicking cycles through ascending, descending, and no sort. Columns with Filterable = true show a filter icon that opens a type-appropriate filter popup: text columns get a substring search, number and date columns get min/max range inputs, boolean columns get a toggle, and enum columns get a checkbox list. Table handles sorting and filtering entirely on the client side.

Pinned columns

Pinned on a column definition locks it to the left or right edge so it stays visible during horizontal scrolling. Useful for identifier columns (like an ID or name) that should always remain in view. Resize the playground below to see the pinned columns stick while the middle columns scroll.

Color rules

Number, date, boolean, rating, progress bar, and sparkline columns support ColorRules, an array of ic.table.ColorRule objects. Each rule has an Operator (">", ">=", "<", "<=", "==", "~=", "between"), a Value (scalar or [lo hi] for “between”), and a Color (hex). Rules are evaluated in order: the first match sets the cell background color.

Context menu

Columns can have a ContextMenu property, an array of ic.menu.Entry objects that appears on right-click. Entries can be items (clickable actions), separators, or folders (submenus with nested children). When the user picks an action, the ContextMenuAction event fires with the item’s Key, the column field, and the 1-based row index. Right-click on the “File” column below to try it.

Events

Table fires several events for user interactions. CellClicked and RowClicked fire on every click with the cell value and row data. SelectionChanged fires when the selection state changes. SortChanged and FilterChanged fire when the user interacts with column headers. CellEdited fires after an inline edit is committed, carrying the old and new values. ColumnResized fires after a column resize drag ends.

Programmatic control

Table exposes methods for programmatic interaction. clearSelection() resets the selection. scrollToRow(index) scrolls to a specific row. focusCell(rowIndex, field) scrolls to and highlights a specific cell. removeRow(index) and removeColumn(field) modify the data, and editCell(rowIndex, field, value) updates a cell value from MATLAB.

Custom styling

Every component exposes a .css property for instance-level CSS overrides from MATLAB. This example shows a dark-mode look.

tbl = ic.Table("Data", data, "Columns", cols);

% Dark trading-terminal theme
tbl.css.style(".ic-tbl", ...
    "background", "#0a0a0f", ...
    "border_color", "#1e293b");

tbl.css.style(".ic-tbl__header", ...
    "background_color", "#0d0e14", ...
    "box_shadow", "inset 0 -2px 0 #3b82f6");

tbl.css.style(".ic-tbl__hcell", ...
    "color", "#94a3b8", ...
    "text_transform", "uppercase", ...
    "letter_spacing", "0.06em", ...
    "font_size", "0.6rem");

tbl.css.style(".ic-tbl__cell", ...
    "color", "#e2e8f0", ...
    "border_color", "#1e293b");

tbl.css.style(".ic-tbl__cell--rownum", ...
    "color", "#475569", ...
    "background", "#080810", ...
    "border_color", "#1e293b");

tbl.css.style(".ic-tbl__row:hover", ...
    "background_color", "rgba(59,130,246,0.06)");

tbl.css.style(".ic-tbl__row--striped", ...
    "background_color", "rgba(255,255,255,0.015)");

tbl.css.style(".ic-tbl__row--selected", ...
    "background_color", "rgba(59,130,246,0.12)", ...
    "box_shadow", "inset 3px 0 0 #3b82f6");