TDGrid

The TDGrid widget displays data as a table (grid) of multiple rows and columns.
It supports headers and footers, per-column cells, sorting, row and column controls, and scroll events — use it to build list and table screens.

info

This widget is locked on the Free plan. It's available on the Pro and Enterprise plans.

Definition and role

The TDGrid widget draws a spreadsheet-style grid that lays data out in rows and columns. Each column is built from cell widgets, and binding to data renders one row per item. It provides header and footer rows, column visibility and width adjustment, sorting, per-row styling (color, height, border, and visibility), frozen rows, and scroll events.

• Category: Layouts
• Default setup: header on (useHeader = on), footer off (useFooter = off), and 0 data rows

Features

Feature	Description
Row and column data	Bind data to render one row per item, and build each column from cell widgets.
Header / footer	Turn the header row at the top and the footer row at the bottom on or off. Each one has its own height, background, and divider settings.
Sorting	Sort rows by the value of a chosen column (property) in ascending order, descending order, or the original order.
Column control	Show or hide individual columns and adjust their width — optionally with animation — and rearrange the column order.
Per-row styling	Set visibility, background color, border, and height for each row.
Frozen rows	Freeze a set number of rows from the top so they stay in place no matter how far the grid scrolls.
Scroll events	Run actions when scrolling starts, updates, stops, or reaches the end. When horizontal scrolling is available, the header can show left and right navigation buttons.

How to use

1. Open the Layouts category in the left widget palette.
2. Drag and drop the TDGrid item onto the canvas.
3. In the Properties panel on the right, configure the columns (columns) and bind each cell's content to your data.
4. If needed, turn on the header and footer with useHeader and useFooter, then shape the table with frozenRowCount, rowHeight, and more.
5. To react to scrolling, connect the logic or script you want to run to the scroll events.

Properties

note

Set detailed values — row height, colors, divider thickness, and so on — in the properties below and in the shared Style settings. The table below lists the TDGrid properties that appear in the Properties panel.

Property	Description	Default	Values / type
useHeader	Whether to use a header row	true (on)	true / false
useHeaderLine	Whether to show the header divider	true	true / false
useHeaderScrollButton	Show left and right navigation buttons in the header when horizontal scrolling is available	true	true / false
headerHeight	Header row height	Default row height	Number (px)
headerBgColor	Header background color	Not set	Color
headerLineColor	Header divider color	Not set	Color
headerLineThickness	Header divider thickness	1.0	Number (0.1–10.0)
padding	Inner padding of the grid	Not set	Padding value
primary	Whether this acts as the primary scroll view	Not set	true / false
columns	List of column definitions for the grid	Not set (empty list)	Column list
rowHeight	Data row height	Default row height	Number (0 or greater, px)
frozenRowCount	Number of rows to freeze at the top	0	Number (0–20)
useRowLine	Whether to show dividers between data rows	false (off)	true / false
itemCount	Number of data rows	0	Number (0 or greater)
rowLineColor	Row divider color	Not set	Color
rowLineThickness	Row divider thickness	1.0	Number (0.1–10.0)
useFooter	Whether to use a footer row	false (off)	true / false
useFooterLine	Whether to show the footer divider	true	true / false
footerHeight	Footer row height	Default row height	Number (px)
footerBgColor	Footer background color	Not set	Color
footerLineColor	Footer divider color	Not set	Color
footerLineThickness	Footer divider thickness	1.0	Number (0.1–10.0)

Notes and tips

tip

Turn on useHeader and the top row becomes the header; turn on useFooter and the bottom row is added as the footer. The remaining rows are the data area, which repeats once for every item in the bound data.

note

frozenRowCount accepts values from 0 to 20 only. The number of rows actually frozen never exceeds the number of data rows.

Learn more

tip

For the complete Widget Control (Property, Method, and Event) reference for scripting this widget, see TDGrid Widget Control.