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"   
}