Links

Fullscreen object-table

Utilizing all the available screen real estate becomes important for some use cases with object-table. It is possible to put a table into fullscreen mode, allowing it maximize available screen space.

How to implement

Below is a typical pattern for implementing fullscreen capability:
Note: the id="1" attribute is important here as it allows the component.objectTable to target very specific tables.
<var name="fullscreen" type="boolean" />
<object-table mode="scroll" id="1" on-state-changed="$:stateChanged($state)">
<column heading="First Name">{first_name}</column>
<column heading="Last Name">{last_name}</column>
<column heading="Age">{age}</column>
<button-group>
<!-- This button is used to toggle full-screen -->
<button label="{$:getButtonLabel()}" on-press="$:toggleFullscreen()" />
</button-group>
</object-table>
function getButtonLabel(){
/**
* Here we use the full-screen variable provided from the stateChanged function
* to change the name of the full-screen button
*/
return view.fullscreen ? "Exit fullscreen": "Enter fullscreen";
}
function toggleFullscreen(){
/**
* This will take us in and out of full-screen mode for the <object-table> with ID: '1'
*/
component.objectTable({id: "1"}).toggleFullscreen();
}
function stateChanged(tableState){
/**
* tableState will be provided each time the table goes in and out of fullscreen
*/
view.fullscreen = tableState.fullscreen;
}
Note: In the above example, we add the full-screen button to the <button-group> inside the table so that when the table goes full-screen we are able to exit full-screen again since the button is part of the table.
Note: When scrollable tables (mode="scroll") go into full-screen mode, they are automatically modified to expand to the full height of the available viewport and thus the limit="" attribute will no longer have an effect on the height.

Tips and tricks

Use fullscreen to provide a richer editing experience

In this example, we can use the fullscreen variable to show and hide additional buttons that can enrich working with editable tables in a more focused manner. These kinds of workflows are often seen with PDF viewers or image editors embedded in applications.
<object-table>
....
<button-group>
<button label="{$:getButtonLabel()}" on-press="$:toggleFullscreen()" />
<!-- Notice how we are able to show additional buttons when in full-screen mode -->
...
<button show-if="$:view.fullscreen" icon="fa-wrench" />
<button show-if="$:view.fullscreen" icon="fa-align-center" />
<button show-if="$:view.fullscreen" icon="fa-adjust" />
<button show-if="$:view.fullscreen" icon="fa-address-book" />
<button show-if="$:view.fullscreen" icon="fa-address-card" />
</button-group>
</object-table>

Use fullscreen to change table modes

When full-screen mode activates, use a function to dynamically change the mode of the table to scroll. This allows a table to minimize space when idle, but to maximize space when fullscreen is enabled.
<object-table mode="$:getMode()" limit="5">
...
</object-table>
function getMode(){
return view.fullscreen ? "scroll": "paginate"
}
Last modified 5mo ago