import{_ as d,a as o,b as l,ag as r,p as t,g as a}from"./chunks/framework.BcrMLAmg.js";const f=JSON.parse('{"title":"Table","description":"","frontmatter":{},"headers":[],"relativePath":"references/elements/Table.md","filePath":"references/elements/Table.md","lastUpdated":1757844696000}'),n={name:"references/elements/Table.md"};function s(i,e,c,u,h,b){return l(),o("div",null,e[0]||(e[0]=[r('
This is the table class. It provides a sortable data grid with customizable columns,row selection, and scrolling capabilities.
Extends: VisualElement
| Property | Type | Default | Description |
|---|---|---|---|
| columns | table | {} | List of column definitions with {name, width} properties |
| data | table | {} | The table data as array of row arrays |
| headerColor | color | blue | Color of the column headers |
| selectedColor | color | lightBlue | Background color of selected row |
| gridColor | color | gray | Color of grid lines |
| sortDirection | string | "asc" | Sort direction ("asc" or "desc") |
| scrollOffset | number | 0 | Current scroll position |
| customSortFunction | table | {} | Custom sort functions for columns |
| Method | Returns | Description |
|---|---|---|
| Table:addColumn | Table | Adds a new column to the table |
| Table:addData | Table | Adds a new row of data to the table |
| Table:setColumnSortFunction | Table | Sets a custom sort function for a column |
| Table:setFormattedData | Table | Adds formatted data with raw sort values |
| Table:setData | Table | Sets table data with optional column formatters |
| Table:sortData | Table | Sorts the table data by the specified column |
Adds a new column to the table
name string The name of the columnwidth number The width of the columnTable self The Table instanceAdds a new row of data to the table
any The data for the new rowTable self The Table instanceSets a custom sort function for a specific column
columnIndex number The index of the columnsortFn function Function that takes (rowA, rowB) and returns comparison resultTable self The Table instanceAdds data with both display and sort values
displayData table The formatted data for displaysortData table The raw data for sorting (optional)Table self The Table instanceSet data with automatic formatting
Table self The Table instanceSorts the table data by column
columnIndex number The index of the column to sort byfn function ? Optional custom sorting functionTable self The Table instance