In the context of Fuuz screen design or a web page within the Fuuz platform, a "table" refers to a structured and organized grid-like layout component used to present and display data in a tabular format. Tables are a fundamental part of user interfaces for managing and visualizing data related to manufacturing, production, and other relevant information. Here's a definition specific to the Fuuz context:

In Fuuz screen design, a "table" is a layout component that arranges data in rows and columns to provide a structured and systematic presentation of information. Tables within Fuuz are designed to efficiently display manufacturing-related data, such as production orders, inventory items, or quality control metrics. Each row typically represents a specific data entry or record, while each column corresponds to a particular attribute or data field. Tables in Fuuz allow users to view, sort, filter, and interact with data, making them a vital tool for monitoring, analyzing, and managing manufacturing processes. Proper table design within Fuuz focuses on clarity, accessibility, and user-friendly functionality to ensure that users can effectively work with and make informed decisions based on the displayed data.

Tables in Fuuz play a crucial role in facilitating data-driven decision-making and enabling users to efficiently access and manipulate manufacturing-related information within the platform's user interface.

Table Row Dragging Demo Screen

Table Row Dragging w/Master-Detail Demo Screen

A Fuuz table is a screen element that can autofill data from a preselected data Model or be customized as a way to display a variety of information.

You can nest some screen elements inside the table columns creating a dynamic display in your screen's table. The Fuuz table also supports row dragging to reorder rows within the table and row dragging between adjacent tables to add or remove rows from one table to another.

Table Screen Element in the Screen Designer

 

1.) Table (screen element in canvas screen)

2.) System name of the selected screen element displayed as property editor panel header

3.) Property editor panel view: Designer

4.) Table (screen element in Toolbox)

5.) Table Column (screen element in Toolbox)

 

1.) Property editor panel header as view: Layers

2.) Property editor panel view tab: Layers

3.) Table screen element in the Layers view

4.) Table column child screen element in Layers

Editable Properties

Editable properties are organized into the above categories within the property editor panel

 

Here is where you would click to directly edit the JSON object of properties

System allows you to edit the system name and should not be changed after any edits are made to the screen element.

General allows you to edit or customize names, helper texts, and other general information.

 

 

The margin slider will allow you to adjust the margin of the selected screen element. Width, height, and font size are all customizable. The Flex Grow property allows you to dictate if you want the screen element to be strictly sized or grow with the content inside the screen element.

Here is where you can specify a Data Model and have the data automatically loaded into the screen element. The Parameters Transform allows you to filter the data and the Additional Fields allows you to add additional fields to your query that are not the table columns.

Here you can customize how you would like the table to behave. You can allow row dragging, be able to select multiple rows at a time, and dictate what happens when you move or select a row.

 

In View, you can adjust the number of rows that will populate from the available columns made viewable on the screen once deployed.

 

 

Table

1. Optional search filters

2. Table Columns

3. Column/View window (Column selected)

4. Columns

5. Views

Table Row Drag and Drop

In the Behavior category of the Property Editor Panel for tables, the user can determine how to implement the drag and drop behavior. Tables also have an “On Data Change Transform” field that can be used to implement additional logic when rows are dragged and dropped.

This allows the user flexibility for reordering table rows.

The user can also drag rows between tables