[00:00] The table component is one of the most powerful and flexible components in Ignition. Let's take a look at some of it's features. The table component can be found on the tables tab of the component palette, there's actually two of them, table and power table. Let's take a look at the table one first. The most important property of this component is the data property. It's a data set that contains multiple rows and multiple columns of data. We typically bind this to SQL query, or to a function binding to bring back some data. I'm going to bind mine to an SQL query to bring back some information from my database. As you can see here I have a bunch of data that we can work with. Now really all the features I'm going to show you here is about how we can customize this table to make it look a certain way to an operator. First and foremost, there's a bunch of appearance properties here, to change the font of what's inside the table, change the background color and the foreground color of the table, the header font, if you want to show the header or not, there's as a little property for making that visible. The row height and the background mode here. So row hight first, we can set that to however many pixels we want each row to be. So if I set it to 25, you'll see that the rows are bigger here, make it a little easier for the operator to see each of the individual rows. As far as the the background color and the foreground color, we have them up here, the foreground color is what you see the text as, I can set it to red, you can see everything's red now, of course. The background color is white right now all the way through. If I set it to yellow, you can see everything is yellow. Now we can actually alternate that background color by setting the background mode here instead of constant to alternating, where we can alternate between white and something else, like maybe a light yellow or something. We can also map the background color to a value inside the data set. So for example, maybe I want to map it to column five here, which is a number. Has to be integer mapping, so that if it's zero, it's red. If it's one, it's green, And two, maybe it's yellow or something. So I can actually right click, go to the customizers, table customizer. On the second tab, I can do background color mapping, map it on col5, the value is zero, I would make it red. If it's one, I can make it green. And lastly, if it's two, I can make it yellow. I press OK, I can see all the colors here for each of the appropriate rows. So we can pick and choose how we want the the table to look on the surface here. And then even below this, we can actually change how you want the columns, each cell, to look to the user. So we can right click and go to the table customizer. On the first tab, there's a lot of column configuration that we can do for every column that exists inside the data set. So you can see id, col1, 2, 3, 4 and 5. And then down the left hand side, we have all the different properties we can specify for each one of those columns. So for example, I can actually hide a column, like the id column, maybe I don't want that, I can hide that column so the user doesn't see it. I can also change the header, that very top, to something that's a little bit more human readable. Right now it came back as col1 and col2, maybe I want that to be here, Value, and Name, and I could do that for the rest of them here as well. So you can actually change the header up there. You can mark columns editable so they can actually go and edit the value, double click to change a value. You can mark which columns are sortable. You can do alignment. So maybe I want the value here to be centered, and I want column three to be centered. We can add prefixes and suffixes, maybe I want to add a suffix to column one, I put a percent sign at the end of that, as you can see, I can do that. I can, if it's a number, I can actually format that number anyway I want, maybe at col3 here, I want it to have two decimal places all the time. So I put a dot zero zero. If it's a date, I can format as a date. I can turn things into Booleans. I can also turn things into progress bars. So maybe I want column one here to be a progress bar, with a value goes from zero to a hundred. And I can make that maybe a green color and have the background there be white. We can do quite a bit in this configuration. When I press OK, you can see what we've gotten so far. With some columns are hidden. We've maybe centered some of the columns and made things progress bars, we can actually show check-boxes in there. Very easy to work with that customizer. There's a couple more things we can actually do at the bottom, which allow us to actually translate a number into a string and into an image, into maybe a change in the background color, the foreground color, whatever we want here. Let's look at changing the number into a string. So let's say on that this, for, column five, which is a numbers, 0, 1, 2, I want to do a translation list. So I'm going to do it right here, and click on the translation list, add one for that column five, and do three things. If it's zero, one, and two. Zero, I want to say off. Two I want to be on. And three, I want it to be maybe manual or something. So as soon as I do that, and press OK, You can see this column here is now it's translated to a string. I could also translate that to image if I want to, by doing an image path list, specify an image that we have in Ignition. It's also possible to change the background, foreground, and font of each particular column or cell. And so let's say I want to change the the foreground color and the background color of the Name column based on column five. So we can actually do that here. I can go and set on column two, which is the Name, I can do a background color list, and the column I want to do it off, is col5. So I'm going to type in col5 here, and then do a background color list, where again I do three options, 0, 1 and 2. If it's zero, it's red. One, I'll make it green. And two, will make it yellow. So then press OK, as you can see now, this particular cell, the background color is changing based on col5. There's quite a bit that we can do inside of this table using that customizer.