[]
(Showing Draft Content)

Data Table

The Data Binding tab for the Data Table controls which data attributes are displayed in the table and which are available as tooltips when hovering over rows.

1. Columns

  • The Columns binding slot defines what fields are displayed in the table.

  • Drag and drop any data attributes (such as Product Name, Sales Amount, Order Date) into this slot.

  • Each attribute becomes a column in the table, shown in the order you add them.

  • You can rename the columns, reorder them, or apply formatting once they are added.

2. Tooltip

  • The Tooltip binding slot defines additional data that appears when a user hovers over a row.

  • Drag and drop any data attributes you want to show in the tooltip (for example, Category, Manager Name, Forecast).

  • Tooltip data does not appear directly in the table — it is only revealed on hover.

Customization

You can further customize your data table using the following properties.

Table Setting


Use Alternate Row Style – Toggles alternating background colors for rows to improve readability. Enabled (True) by default.

Show Row Number – Toggles a row number column on the left side of the table. Disabled (False) by default.

Show Column Header – Toggles the display of column headers. Enabled (True) by default.

Show Quick Filter – Toggles a quick filter control for filtering visible data without adjusting main filters. Disabled (False) by default.

AutoFit Column Width – Determines how columns adjust their width.

  • Fit to Content (default) – Adjusts each column to fit its cell contents.

  • Fit to Header – Adjusts columns to fit the header text.

  • None – Keeps columns at a fixed width.

Row Height – Sets the height of table rows. Enter a numeric value in pixels.

Scrollbar Mode – Controls when scrollbars appear.

  • Hover to Display (default) – Shows scrollbars only when hovering over the table.

  • Auto – Displays scrollbars when content exceeds the table bounds.

  • Hidden – Hides scrollbars entirely.

  • Visible – Always shows scrollbars.

Scrollbar Thumb – Sets the color of the draggable portion of the scrollbar.

Scrollbar Track – Sets the color of the scrollbar track background.

Text Alignment – Aligns text within cells. Options are Auto (default), Left, Center, or Right.

Word Wrap – Toggles wrapping text within cells so long content appears on multiple lines. Disabled (False) by default.

Cell Background Color – Sets the background color for table cells.

Text Style – Configures font family, size, color, weight, and style (normal or italic) for table text.

Cell Border Color – Sets the color of cell borders.

Style Template – Applies a predefined style template to the table. Options include “Batch Setting Style,” built-in Excel-style templates, or Add New Style… to create a custom style.

Image Layout – Controls how images are displayed in table cells.

  • Zoom (default) – Scales the image proportionally to fill the cell as much as possible without cropping.

  • Origin – Displays the image at its original size and position.

  • Fill – Stretches the image to completely fill the cell, which may change its aspect ratio.

Pagination Setting


Enable Pagination – Toggles pagination for the table. When enabled, data is divided into pages. Enabled (True) by default.

Show Page Size – Toggles the display of the page size selector. Disabled (False) by default.

Page Capacity – Sets the maximum number of rows displayed per page. The default is 200.

Page Alignment – Aligns the pagination controls within the table footer. Options are Right (default), Left, or Center.

Text Style – Configures font family, size, color, weight, and style (normal or italic) for pagination text.

Select Text Color – Sets the text color for the active page number. Defaults to the palette color.

Select Background Color – Sets the background color for the active page number. Defaults to the palette color.

Input Text Color – Sets the text color for page number input fields. Defaults to the palette color.

Input Background Color – Sets the background color for page number input fields. Defaults to the palette color.

Tooltip


Tooltip Mode – Determines how tooltips are displayed when hovering over the chart:

  • None – Disables tooltips.

  • Data Point (default) – Shows a tooltip for the specific data point under the pointer.

  • Category – Shows a tooltip for all data points that share the same category value.

Column Headers


  • Word Wrap – Toggles wrapping of header text (False by default).

  • Background Color – Sets the background color for the header area.

  • Header Font Setting – Configures font family, size, color, weight, and style for header text.

  • Border Color – Sets the border color for the header area.

First Data Stripe


First Data Stripe – Sets the background color, text style, and border color for alternating data rows in the first stripe pattern.

Second Data Stripe


Second Data Stripe – Sets the background color, text style, and border color for alternating data rows in the second stripe pattern.