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


Autoplay Off

Supplemental Videos


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 7.9


(open in window)

[00:00] Let's take a look at the Power Table component. The Power Table offers the same 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 Palette, and we will grab a Power Table component, let me just grab that and drop that on my window. Now we're going to need some test data to work with, so I'll head over to my Property Editor, we'll scroll all the way down to the bottom, and just like the standard Table, there's that TestData property, we'll set it to True, so I have some data to work with. 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 a re quite a few features that are available from the runtime. So, I'll put my designer to Preview mode, and if I head down here, 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 the Boolean Column. I can also re-order 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 left-click on each header, to sort by scending and then descending order. Additionally, I can hold the Ctrl key and left-click on 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. Now a new feature that was added in 7.8 is while I have multiple rows selected, if I hit the Ctrl and C key to copy, I can copy these selected rows, and now I can paste them anywhere I want, once they're in my clipboard. So for example, I might come over here and grab Notepad, and if I right-click and paste, you can see there is my data. And get this up back out of the way here. Now there's another property here, if I come down to my Property Editor, I scroll back up towards the top, under the Behavior section, there's this Row Dragging Enabled property. I set this to true, I can take my selected rows and I can drag and drop them onto other Ignition components. Now, if I try that right now, I can do this, I can drag and drop within the same Power Table component. If I do that though, I get a little warning telling me that the onRowsDropped 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. We'll go and take a look at that, I'll take the design I had, Preview mode, we will right click on the Power Table, and we'll go down to Scripting. And you see there are quite a few extension functions available, including that onRowsDropped. So, if I wanted to do something when I dropped rows from any Power Table onto this Power Table, I would configure the script here. Now, I'm not going to go over every extension function here, we will take a look at one example though. I'll come to this configureCell extension function. This extension function allows you to make changes to individual cells on the table. You can do things such as modify background color, the border, the font, the foreground color, and so on. If I enable this, you'll see that there's a little example, just commented out here. I'll select lines 31 through 26 and hit Ctrl and / and un-comment. We'll go over the script here real quick, all it's doing is, whenever a row's selected, it uses whatever the color of the selection background property in the component is, if a row's not selected, alternate between white and this gray color. I'll click OK and we can see that it's alternating between gray and white. Another feature of the Power Table's that we can have individual cells span across multiple rows and columns. To do this I can come down to the Property Editor again, we'll scroll down to the Data section, and there's the 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. And we'll focus on the very first row, the first column here. So I'll specify a row 0, column 0, we'll use a height of 2 columns and by 2 rows. So I click OK, we can see that that one cell is now expanding two columns and two rows. Lastly, a new feature added in 7.8 is this View Dataset property down below. This property represents the currently visible state and configuration of the table made by the user, verses the full 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. So we see we have all five still on the table technically. So now you can do things like run a script, one of the user hides a column, or re-orders the columns in the table, and so on.

You are editing this transcript.

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


Share this video