ErgoTechWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== BootstrapTable =====

com.ergotech.vib.graphics.BootstrapTable

==== Image Examples ====

| {{:mistudio:graphics:more_layout:text_display_lists:pasted:20260627-111612.png?40|BootstrapTable in the graphics palette}} | {{:mistudio:graphics:more_layout:text_display_lists:pasted:20260627-111647.png?120|BootstrapTable graphic example}} |
| //BootstrapTable in the graphics palette.// | //BootstrapTable graphic example.// |

==== Overview ====

The BootstrapTable graphic is a More Layout table graphic used to display row-and-column data in a table format.

BootstrapTable is useful when an application needs to show changing table-style values from logic or a data source.

BootstrapTable expects two-dimensional or table-shaped data.

==== Common Uses ====

  * Displaying row-and-column data
  * Showing table-style values from a data source
  * Displaying changing values over time
  * Creating compact data tables in an application
  * Showing multiple values in a structured layout

==== Input Behavior ====

BootstrapTable supports table-style input through **valueInput** and **updateDisplayedValue**.

Two-dimensional or table-shaped values update the displayed table contents.

BootstrapTable works with **TwoDimensionalDataSource**.

**ArrayDataSource** is not appropriate for BootstrapTable because BootstrapTable expects row-and-column table-shaped data.

==== Output Behavior ====

BootstrapTable includes **PrimaryOutPort**.

The output behavior depends on table interaction and the current configuration.

==== BootstrapTable-Specific Behavior ====

BootstrapTable displays data in a styled table.

BootstrapTable-specific settings include:

  * **Name** Sets the name of the BootstrapTable graphic.
  * **BorderStyle** Sets the table border style.
  * **DarkMode** Controls whether the table uses dark mode styling.
  * **HeaderFont** Controls the font used for the table header.
  * **HeaderVerticalPadding** Sets vertical padding for the table header.
  * **Hover** Controls whether hover styling is used.
  * **IncludeReadingTime** Controls whether reading time is included.
  * **Striped** Controls whether alternating row striping is used.
  * **TableFont** Controls the font used for table content.
  * **TableVerticalPadding** Sets vertical padding for table rows.
  * **Visible** Controls whether the BootstrapTable is shown.

==== Table Data Behavior ====

BootstrapTable is designed for table-shaped data.

A **TwoDimensionalDataSource** can update BootstrapTable with changing row-and-column values.

Array-style data does not provide the same row-and-column structure and does not display correctly in BootstrapTable.

==== Logic Ports ====

In the Logic Editor, BootstrapTable includes these default ports:

  * **PrimaryOutPort**
  * **updateDisplayedValue**
  * **valueInput**

The **updateDisplayedValue** port updates the displayed table values from another source.

The **valueInput** port also updates the displayed table values from another source.

The **PrimaryOutPort** provides table output behavior when supported by the current interaction or configuration.

==== Notes ====

Use BootstrapTable when row-and-column table data needs to be displayed.

Use **TwoDimensionalDataSource** or another table-shaped source when testing BootstrapTable.

Do not use **ArrayDataSource** for BootstrapTable. Use ArrayDataSource with list-style graphics or charts that support array input.

For general graphic behavior, see [[mistudio:design_editor:active_graphic|Active Graphic]].

==== Related Pages ====

  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:more_layout:start|More Layout]]
  * [[mistudio:design_editor:more_layout:text_display_lists:start|Text, Display, Lists, and Tables]]
  * [[mistudio:design_editor:more_layout:text_display_lists:list|List]]
  * [[mistudio:design_editor:more_layout:text_display_lists:multiselectlist|MultiselectList]]
  * [[mistudio:design_editor:more_layout:text_display_lists:multiselectduallist|MultiselectDualList]]
  * [[mistudio:design_editor:active_graphic|Active Graphic]]