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.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.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>
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