Table Advanced Showcase
Table ID
abcdefg
Table Name
Edit Table Name
Some Header
Table Description
Edit Table Description
This has data about uh...stuff...idk
Are You Sure?
This will permanently delete this table.
Are You Sure?
This will permanently delete these 0 rows.
Sort By
| Sort Order | Data Variable Path | Is Ascending | Remove | |
|---|---|---|---|---|
| Primary | Defined Target Selector[] Defined Variable: Path Items (optional) No Path Items |
File
Insert
Create Column
IDs should be in snake_case format.
Database Column:
Database Data Type
None
Data Type Builder
Postgres Type
None
Default Value
Select Data Type First
Is Use in Short Display:
Autogenerated:
Updatable:
Primary Key:
Nullable:
Force Uniqueness:
Header Content
Add First Element
No available elements found
Missing type
Edit Attributes
Element ID
Markdown to astc
Note: for valid json make sure all keys and strings are in double quotes, and no trailing commas. example:
{
"type_id": "div",
"children": []
}
Input Type:
Body Content
Add First Element
No available elements found
Missing type
Edit Attributes
Element ID
Markdown to astc
Note: for valid json make sure all keys and strings are in double quotes, and no trailing commas. example:
{
"type_id": "div",
"children": []
}
Input Type:
Shown:
Fixed:
Alignment:
Are You Sure?
This will delete this column.
Insert Row
Content
Bulk Upload and Insert Rows
json or csv upload:
Id | Other Known Prizes | Finalists | Official Urls | Twist Summary | Winner Prize Usd | Jury Votes | Winner | Tribe Count Start | Contestant Count | Title | Total Days | Location | Season Number | Last Air Time | First Air Time | Db Epoch Created | Db Epoch Updated | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Loading Rows (0%)... | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Component Documentation
Component Name
TableAdvanced
Builder Function Name
create_table_advanced_manager
Description
Builds a dynamic and extendable table layout with editable rows/columns, sorting, pagination, bulk-selection, inserting rows, uploading bulk rows, exporting CSV/JSON, and more.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| table_id | string | An optional unique identifier for the table. | |
| table_name | string | A display name for the table. | |
| table_description | string | A descriptive text for the table. | |
| rows_data_from_variable_path | array of strings or nested arrays | Specifies a path to retrieve the rows array within your variable/loop structure. Example: `['variables','data','my_table_rows']`. | |
| row_input_content | ASTC (abstract content) or null | Defines the content structure for editing/creating each row. | |
| variables_data_type | object | An optional data-type scheme for advanced usage. Typically derived from overall JSON data type. | |
| is_data_editable | boolean | false | If true, enables editing features for rows, columns, and bulk insert/delete. |
| nav_items | array of strings | Select which interactive elements appear above the table. For instance, 'search', 'file' (export options), 'insert', 'bulk_select', etc. | |
| is_paginate | boolean | false | If true, includes pagination controls. |
| is_more_to_load | boolean | false | Toggles the 'Load More' button visibility if some server-based pagination still has more rows to fetch. |
| table_header_max_height | number or null | Optional maximum height (in rem) for the table header cells. Contents become scrollable if exceeded. | |
| table_row_max_height | number or null | Optional maximum height (in rem) for table body cells. Contents become scrollable if exceeded. | |
| columns | object of { [column_id]: column_definition } | [object Object] | A dictionary of columns. Each column_id has metadata including `header_content`, `body_content` ASTC for the table header / cell rendering, plus optional properties like min_width, alignment, etc. |
| on_event | function or null | A callback that intercepts table events (insert/delete row, insert/delete column, load more, update row, bulk delete, etc.). Should return an object `{ is_success: boolean, ... }`. This is how the table manager interacts with external data storage. | |
| on_search_table_row_ids | function or null | Optional: if columns reference foreign tables, you can pass a function for searching row IDs from other tables. | |
| table_options | object or null | Optional higher-level table config references, e.g. for specialized column input behavior or server-based queries. | |
| mapkit_js_token | string or null | If any columns or row content uses map-based location input, you'll need this MapKit token. | |
| rows_per_page | number | 100 | Default rows per page when `is_paginate` is true. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | Called once to initialize internal managers (popovers, text input, etc.) and set up columns/rows from config. | No Params | |
| set_attributes | Allows dynamic updating of key attributes (like columns, row data path, is_data_editable, etc.) after creation. | No Params | |
| set_rows_prepped | Re-builds rows_prepped from the current columns_prepped and the raw data at `rows_data_from_variable_path`. | No Params | |
| set_columns_prepped | Re-builds columns_prepped from a new columns object. Also re-applies display_order and content managers. | No Params | |
| set_table_search_text_input | Helper to set the search box value programmatically. | No Params | |
| copy_json | Copies the full table row data as JSON to the clipboard. | No Params | |
| copy_structure | Copies only the 'structure' of the row data. (Currently same as copy_json, but you can modify to only copy the shape or schema). | No Params | |
| download_json | Downloads row data as a .json file. | No Params | |
| download_csv | Exports row data as CSV for download. | No Params |
Returned Properties
| Property | Type | Description |
|---|---|---|
| nav_items | array of strings | Processed array for controlling which nav items appear. |
| rows_prepped | array of row_prepped objects | Internal structure storing data needed for each row's rendering, bulk select checkbox, and content manager references. |
| columns_prepped | object { [column_id]: column_config } | Processed columns dictionary with each column's content manager (header_content), up-to-date metadata, etc. |
| table_search_text_input_manager | object | TextInput manager used if 'search' is in nav_items. |
| pagination_manager | object | Pagination manager used if `is_paginate` is true and 'pagination' is in nav_items. |
| rows_per_page_dropdown_manager | object | Dropdown manager for changing how many rows per page if 'rows_per_page' is in nav_items. |
| sort_by_input_manager | object | Handles advanced multi-column sorting selection if 'sort_by' is in nav_items. |
| file_popover_manager | object | Popover manager for the file menu, controlling export to CSV/JSON or copy to clipboard. Visible if 'file' is in nav_items. |
| insert_popover_manager | object | Popover manager controlling the Insert dropdown for columns/rows/bulk upload if 'insert' is in nav_items. |
| bulk_select_all_rows_toggle_checkbox_manager | object | Global checkbox manager for toggling all row checkboxes if 'bulk_select' is in nav_items and table is editable. |
| bulk_delete_rows_popover_manager | object | A confirmation popover manager for deleting multiple rows if 'bulk_select' is in nav_items. |
| bulk_insert_rows_prepared_data | array or null | Holds parsed data from the user's JSON/CSV upload for inserting multiple new rows. |
| row_edit_content_manager | Content manager object | Manager that controls how a row is displayed/edited in a panel popover. |
| column_edit_input_manager | ColumnInput manager object | Manager that controls how a column is displayed/edited in a panel popover. |
