DecSoft App Builder

Table description

The Table control allows to show an arbitrary array of objects in an HTML table that you can customize in several ways. The key of this control is their Data property, which can be set to an arbitrary array of objects. That objects are then show to the user thanks to the Rows property and the Header property.

There is a Table sample app included with the installation of DecSoft App Builder. Take a look to see this control in action!

Table CSS rules

This control has a default style, and, some control JavaScript properties (see below), can also changes the control style, not to mention the Classes property, that you can use to establish one or more CSS classes to be applied to the control.

In addition to that style, you can also set custom CSS rules for the control by using the IDE controls style inspector. If this is not enough, you can include any number of CSS stylesheets in the app by using the app files manager.

If you want to use CSS stylesheets, you need to know how to refer to the control, so take a look at the Runtime selectors help topic.

Table at designtime

The Table control put at your disposition the below designtime properties or variables. Designtime means here that these properties are only available in designtime and not in runtime.

Table at runtime

The Table control put at your disposition the below runtime properties or variables. You can set almost all these variables in designtime, and, they are also available to be use when the app is running. Note that we named here these variables in a capitalized way, because is like you can see it in the designtime control's inspector, however, at runtime we use the lower camel case way.

Table events

The Table control put at your disposition the below events handlers:

Table designtime properties

Table Top property

Designtime. Integer variable. The Top property stores the top position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Table Left property

Designtime. Integer variable. The Left property stores the left position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Table Width property

Designtime. Integer variable. The Width property stores the width of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Table Height property

Designtime. Integer variable. The Height property stores the height of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Table Locked property

Designtime. Boolean variable. The Locked property determines if the control can be moved or resized in app view designer or not. Set a "false" value mean the control can be moved and resized. Set a "true" value (by default) mean the control cannot be moved nor resized. Remember that this control property is only for designtime and is not available in runtime.

Table runtime properties

Table Name property

Runtime. String variable. The Name control property stores the name of the Table control as you set in designtime. The Name property value must be unique for the same app view, dialog or frame, that is, it's possible to have more than one "table1" in the app, if that controls resides in different app views, dialogs or frames. Note that you must consider this variable as read only: change the name of a control in runtime can cause unexpected results.

Table Event property

Runtime. Mixed variable. The Event control property stores the "event" variable received in all the control events. This variable can contain the target (HTML element of the control) that fire the event and more useful stuff.

Table Data property

Runtime. Array of objects variable. The Data control property is the key of the control, and, can stores any arbitrary array of objects, which are then show in the HTML table following the Html markup established in the Header property and the Rows property.

Any changes in the Data property are automatically reflected in the Table control, so it's more or less easy to fill this variable with what we wanted to show in the final HTML table. Filter this variable, means filter what is show the HTML table.

The objects in the Data property are completely arbitrary, that is, can contain any number and types of object properties.

Below you can see a sample of Data property

Since the objects are completely arbitraries, you must fill the Header property and the Rows property accordingly (see below).

Table Header property

Runtime. String variable. The Header control property allows to set an optional HTML table header, according with the data that you use in the Data property. For example, the below HTML markup can be provided for the above sample data:

Table Record property

Runtime. Object variable. The Record control property is available in the control RowClick event. This variable is filled with the appropriate object associated with the HTML table row that has been clicked by the user.

Table Rows property

Runtime. String variable. The Rows control property is similar than the Header property and must store the right HTML markup to show an specific HTML table row, based in the value that you set for the Data property.

The Rows property is similar also to the Html property of the HTML control, that is, we can use HTML markup powered by the Boostrap CSS framework and also the VueJS library template syntax.

Note how the Rows property is prepared. You have at your disposition with the Record property. This Record property is set to one of the objects that you previously set in the Data property. Here you can see that the "record" variable can contain any arbitrary property: exactly the properties that of the objects that you set in the Data property.

Table Bordered property

Runtime. Boolean variable. The Bordered control property determines if the HTML table and table rows appear bordered or not. This property is set to "true" by default, but you can set to "false" to remove the referred borders.

Table Borderless property

Runtime. Boolean variable. The Borderless control property determines if the HTML table must hide all the borders or not. This property is set to "false" by default, but you can set to "true" to hide all the borders.

Table HeaderStyle property

Runtime. String variable. The HeaderStyle control determines the style of the optional table header. This property can be set using the "app.tableStyle.*" constants values. This property is an empty string by default, means no header style is applied.

Table TableStyle property

Runtime. String variable. The TableStyle control determines the style of the HTML table. This property can be set using the "app.tableStyle.*" constants values. This property is an empty string by default, means no table style is applied.

Table Hover property

Runtime. Boolean variable. The Hover control property determines if the HTML table rows background must change when the user over the mouse on it. This property is set to "true" by default, but you can set to "false" to hide the hover effect.

Table Responsive property

Runtime. Boolean variable. The Responsive control property determines if the HTML table must be show in a responsive way. This means, for example, that an horizontal scroll appear if the table cannot be show completely in the scren.

Table ResponsiveBreak property

Runtime. String variable. The ResponsiveBreak control property determines the break point for the responsive behaviour. To use a responsive break point the Responsive property must be set to "true". We can use any of the "app.size.*" constants values, or with an empty string, means the table must be show always responsive, no matter the screen size. This property has an empy string value by default.

Table Small property

Runtime. Boolean variable. The Small control property determines if the Table contents text and padding, etc., must be smallest than the regular size. This property is set to "false" by default, but you can set to "true" to change the table to the "small" look.

Table Striped property

Runtime. Boolean variable. The Striped control property determines if the Table rows must appear striped, that is, odd rows with certain background color, and pair rows with another background color, alternatively. This property is "true" by default, but you can set to "false" to hide the striped effect.

Table Title property

Runtime. String variable. The Title control property stores some small but descriptive text, mainly to be used to be show that text when the user place the mouse cursor into the control.

Table Classes property

Runtime. String variable. The Classes control property stores one or more additionals CSS classes (space separated) to be applied to the control.

Table Hidden property

Runtime. Boolean variable. The Hidden control property determines if the control appear visible to the user or not. Set to "true" to hide the control, or to "false" to show the control (by default).

Table events

Table RowClick event

The RowClick event handler is when the user click or tap in one of the HTML table rows. Here in this event you have at your disposition the Record property, which stores the object associated with the table row. Remember that this object is arbitrary, depending on the value of the Data property. Only the "index" property of the Record property is added with the index (starting by zero) of the row in the HTML table.

Table Click event

The Click event handler is fired when the user click or tap into the Table control. See also the available events variables.

Table DblClick event

The DblClick (Double Click) event handler is fired when the user double click or double tap into the Table control. See also the available events variables.

App SwipeRight event

The SwipeRight event handler is fired when the user made the swipe right gesture with the mouse (browsers) or with the finger (devices) in the control. See also the available events variables.

App SwipeLeft event

The SwipeLeft event handler is fired when the user made the swipe left gesture with the mouse (browsers) or with the finger (devices) in the control. See also the available events variables.

Table MouseUp event

The MouseUp event handler is fired when the user up the mouse into the Table control. See also the available events variables.

Table MouseDown event

The MouseDown event handler is fired when the user down the mouse into the Table control. See also the available events variables.

Table MouseMove event

The MouseMove event handler is fired when the user move the mouse into the Table control. See also the available events variables.

Table MouseEnter event

The MouseEnter event handler is fired when the user enter the mouse into the Table control. See also the available events variables.

Table MouseLeave event

The MouseLeave event handler is fired when the user leave the mouse from the Table control. See also the available events variables.

Table ContextMenu event

The ContextMenu event handler is fired when the browser must shown the context menu of the the Table control, which occur when the user click with the right mouse button into the Table control. See also the available events variables.

Table events variables

The below JavaScript variables are available in all the referred Table control events handlers:

Name Type Description
event Mixed This variable is received in almost all control events. You can use this variable to stop the propagation of the event, to access the HTML element who fire the event and more.
self Object Stores the control object. This is a shortcut to the control variable, and it's available since we are talking about specific control events.
view Object

Stores the current app view or dialog. This variable allow us to access to that view or dialog properties and methods and also their controls properties and methods. For example, you can access to a control properties using the variable "view.yourControlName", suposing the control is named "yourControlName".

views Object Stores all the loaded app views. Note that loaded views mean that the app views has been previously show to the user. It's possible to access to the app view controls properties like "views.view1.yourControlName", suposing the view is named "view1" and the control is named "yourControlName". In the same way we can access to other controls of the view and to other loaded views and their controls.
frames Object Stores all the app frames. You can use this variable to access to all the app frames and their controls.
dialogs Object Stores all the app dialogs. You can use this variable to access to all the app dialogs and their controls.
app Object Stores all the app properties and methods. You can use this variable to access to all the app properties and app methods.