This lesson is part of the Vision Components and Property Bindings course. You can browse the rest of the lessons below.

LESSON LIST

Autoplay Off

Supplemental Videos

Description

The Power Table is a more customizable version of the Table component, and it has many more features. The Power Table contains advanced features for displaying your tabular data, such as drag-and-drop rows, multi-column sorting, column filtering, and cell-spanning. Much of the customization comes through extension functions which are available to configure how each cell of the table looks, how the headers look, and more.

Video recorded using: Ignition 8.1

Transcript

(open in window)

[00:00] Let's take a look at the power table component. The power table offers similar functionality as the standard table component, but has a wealth of additional features. I'm here in my designer and I'll come to the table section of the component pallet to drag and drop a power table on my window. I'll need some data to work with. I can utilize the test data property at the bottom of my vision property editor to populate the table data. Now, just like the standard table, the power table has a customizer that allows us to make some changes to the columns in the table. So if I right click, go down to customizers and go to table customizer, we'll see a lot of the same options here, such as hiding specific columns, making them editable and so on and so forth. Now, where the power table differs from the standard table is there are quite a few features that are available from the runtime.

[01:05] So I'll put my designer to preview mode and I can right click on the header row here and I can actually hide specific columns. So maybe I want to hide the date and boolean column. I can also reorder the columns, so I can take my string column and move that over, and I can do this as many times as I like and order the columns in whatever order I choose. I can also sort the columns by ascending and then descending order just as we did in the table component. Additionally, I can hold the control key and left click on the additional columns, and now I'm sorting by multiple columns. Now if I come down here, I can select individual rows. I can also click and drag to select multiple rows. If I hit the control and c key to copy, I can copy these selected rows and now I can paste them anywhere I want, like my notepad. These selected rows can also be dragged and dropped into other ignition components.

[02:04] To do this, I can enable the row dragging enabled property, Under the behavior section. I'll drag and drop the selected rows within the same power table component. Doing so produces an error telling me that the on-rows dropped extension function is not implemented. To make use of this drag and drop functionality, I need to enable an extension function that tells the target component what to do with the data. I'll close out of the error and go back into design mode and right click into the scripting option for the power table. As you see there are quite a few extension functions available, including that on rows dropped. So if I wanted to do something when I dropped rows from any power table onto this power table, I would configure that script right here. Now, I'm not going to cover every extension function here. I'll take a look at one example though. I'll come to this Configure cell extension function. This extension function allows you to make changes to individual cells on the table.

[03:07] You can do things such as modify a background color, the border, the font, the foreground color, and so on. If I enable this, you'll see that there's an example script commented out here. I'll select lines three through eight and hit control slash to uncomment. The script looks at whenever a row is selected and uses the color of the selection background property of the component. If a row is not selected, alternate between white and this gray color. I'll click on okay, and we can see that it's alternating between gray and white. Another feature of the power table is that we can have individual cells span across multiple rows and columns. To do this, I can come down to the property editor again and down to the data section here, there's a cell span data property. We can specify which cell and how large we want to make it. To give you an example, we'll add a new row here.

[04:06] We'll focus on the very first row and the first column I'll specify row zero column zero with the height of two columns and the width of two rows. So I can click okay and we can see one cell is now expanded, two columns and two rows. Lastly, we'll discuss the view dataset property below. This property represents the current visible state and configuration of the table made by the user versus the underlying dataset that's driving the table. So you can see here I have my three columns in order as they are on the table, and that is very different from the data properties dataset. The data properties dataset still has all five on the table technically. So you can do things like run a script whenever a user hides a column or reorders the columns in the table.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.