[00:00] The table component allows you to display tabular data in a variety of ways. I can drag one on my window from the tables tab in the component pallet of the designer. Right now, the table has no data because the data property, which is the table's underlying data set, currently holds no data. I can bind this data set to the results of an SQL query by clicking on the chain link icon and choosing the SQL query tab. Then I will paste in a query to select the data I want and choose my database connection. Finally, I will hit okay to populate the table. Now that the table data is populated, let's cover some of the important features. Right now my table data is displayed with the default order of the data set. However, I can go into preview mode and sort any column. For example, I can sort the column col three in ascending or descending order by clicking on the columns header.

[01:06] Additionally, we have many properties available in our vision property editor, to alter the table's appearance, we can change the fonts of all the text. The foreground color, which is the color of the text, the table's background color, and similarly the font and foreground color of our column headers. These can also be hidden by disabling the header visible property. The size of the rows can be altered by changing the pixel amount in our row height property. If I set this to 25 pixels, then the rows will appear thicker and we can control the display of the background color with the background mode. Right now, this is set to a constant. However, we could have alternating rows with the alternating selection. Doing so provides an option to change the background of every other row. The mapped background mode makes it so our background can be mapped to the values within the table. The mappings are configured in the table customizer.

[02:04] This can be accessed by going back into design mode and right clicking into the customizers option of the table, and then selecting the background color mapping tab. The mapping is set on a particular columns value, so I will choose mapping column col five and set the value of zero to red and the value of one to green. Finally, I'll add a value two mapping with the plus button and set its background to yellow. The table's background colors are now represented by the mapping we did for the values in col five. Let's go back to the table customizer to see what else can be altered. The customizer works by providing a number of options that can be applied to one or many of our tables columns. The header option allows us to change our header's text from its original value to anything else we want represented. Enabling the hide option will hide the entire column from our windows view.

[03:03] Enabling the editable option will allow our table cells to be edited by the user. We can also disable the sorting we saw earlier with the sortable option. There are a few ways to change the vertical and horizontal alignment of our values, and we can add a prefix or a suffix character to our values, like a percent symbol to represent percentage values. The formatting of numbers and dates can also be configured. I can ensure col three always has two decimal places and maybe I want to represent the value as a progress bar. By enabling the progress bar option, I can then make the progress bar color to green. I will hit okay to see the changes. To recap the changes, the column col one, had the header changed to the text temperature col four was hidden. from our view. Col three is now represented by a progress bar and a percent suffix where the values must have two decimal places and call five is now editable to the user.

[04:07] We can also set up additional mappings on our table. For example, we could translate numeric values to strings using col five with the translation list option. Here I can add a mapping for the value of zero to translate to the string off the value of one to the string on and the value of two to the string manual. There are also mappings for images, colors, and fonts. We can also create a mapping based on another columns value. For example, I can set up the col one or temperature column to have its background color change based on the value in col five. By typing in col five to the background color column cell and opening up the list below it. Then I'll add the three options for zero one and two, where zero will be blue, one will be pink, and two will be orange.

[05:06] Then I will hit okay to see the mapping changes. To recap, the table component is an excellent way to view tabular data in a variety of formats.