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.

Table CSS rules

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.

• Top property
• Left property
• Width property
• Height property
• Locked property

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.

• Name property
• Event property
• Data property
• Record property
• Header property
• Rows property
• Bordered property
• Borderless property
• HeaderStyle property
• HeaderSticked property
• TableStyle property
• Hover property
• Responsive property
• ResponsiveBreak property
• Small property
• Striped property
• Title property
• Classes property
• Hidden property

Table events

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

• RowClick event
• RowDblClick event
• Click event
• DblClick event
• MouseUp event
• MouseDown event
• MouseMove event
• MouseEnter event
• MouseLeave event
• ContextMenu event
• Events variables

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

Below you can see a sample of Data property

// This code is suposed to be placed in an app view Show event, for example views.view1.table1.data = [ {name: 'Peter', sport: 'Tennis', phone: 8798261}, {name: 'Danny', sport: 'Futbol', phone: 5673436}, {name: 'David', sport: 'Basket', phone: 3729642}, {name: 'Samuel', sport: 'Golf', phone: 9382791}, {name: 'Marcos', sport: 'Cars', phone: 2716391}, ];

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

Table Header property

<th> Name </th> <th> Sport </th> <th> Phone </th>

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

<td> {{record.name}} </td> <td> {{record.sport}} </td> <td> {{record.phone}} </td>

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.

// Show the table borders views.view1.table1.bordered = true; // Hide the table borders views.view1.table1.bordered = false; // Toggle the table borders views.view1.table1.bordered = !views.view1.table1.bordered;

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.

// Hide all table borders views.view1.table1.borderless = true; // Show table borders views.view1.table1.borderless = false; // Toggle table borders views.view1.table1.borderless = !views.view1.table1.borderless;

Table HeaderStyle property

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

// Set the header style to dark views.view1.table1.headerStyle = app.kind.dark; // Set the header style to light views.view1.table1.headerStyle = app.kind.light; // Set the header style to primary views.view1.table1.headerStyle = app.kind.primary;

Table HeaderSticked property

Runtime. String variable. The HeaderSticked control property determines if the table header (if any) must remain sticked. By default this property is "false", but you can set to "true" if you want that the table header remain sticked.

// Set the header sticked views.view1.table1.headerSticked = true; // Set the header non sticked (by default) views.view1.table1.headerSticked = false;

Table TableStyle property

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

// Set the table style to dark views.view1.table1.tableStyle = app.kind.dark; // Set the table style to light views.view1.table1.tableStyle = app.kind.light; // Set the table style to primary views.view1.table1.tableStyle = app.kind.primary;

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.

// Made the table hoverable views.view1.table1.hover = true; // Made the table no hoverable views.view1.table1.hover = true; // Made the table hoverable views.view1.table1.hover = !views.view1.table1.hover;

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.

// Made the table responsive views.view1.table1.responsive = true; // Made the table no responsive views.view1.table1.responsive = true; // Toggle the table responsive views.view1.table1.responsive = !views.view1.table1.responsive;

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.

// Set the table always responsive views.view1.table1.responsiveBreak = ''; // Set the table responsive break point to "sm" (small) views.view1.table1.responsiveBreak = app.size.sm; // Set the table responsive break point to "md" (medium) views.view1.table1.responsiveBreak = app.size.md; // Set the table responsive break point to "lg" (large) views.view1.table1.responsiveBreak = app.size.lg; // Set the table responsive break point to "xl" (extra large) views.view1.table1.responsiveBreak = app.size.xl;

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.

// Set the table small views.view1.table1.small = true; // Set the table normal views.view1.table1.small = false; // Toggle the table small views.view1.table1.small = !views.view1.table1.small;

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.

// Set the table striped views.view1.table1.striped = true; // Set the table no striped views.view1.table1.striped = false; // Toggle the table striped views.view1.table1.striped = !views.view1.table1.striped;

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.

// Set a new title for the control views.view1.table1.title = 'My new title';

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.

// Set some additional classes for the control views.view1.table1.classes = 'one-class another-class';

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

// Hide table1 views.view1.table1.hidden = true; // Show table1 views.view1.table1.hidden = false; // Toggle table1 views.view1.table1.hidden = !views.view1.table1.hidden;

Table events

Table RowClick event

The RowClick event handler is fired 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.

// This code is suposed to be in the Table control RowClick event // Show the record row index which has been clicked by the user alert( 'Pressed row with index: ' + views.view1.table1.record.index );

Table RowDblClick event

The RowDblClick event handler is fired when the user double click or double 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.

// This code is suposed to be in the Table control RowDblClick event // Show the record row index which has been double clicked by the user alert( 'Double press row with index: ' + views.view1.table1.record.index );

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.

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:

---