TableView: Recent Developments

Hi everyone. My name is Jason Abernathy and I'm a front end developer with Wolfram Research. Today I'm going to be showing off some recent developments to Table View. So that's kind of like our grid or spreadsheet like interface for viewing large amounts of data. One caveat before I start. I just found out that my front end is crashing when I use 3D graphics. I'm a Linux user and I just updated some packages yesterday and something must have not gone well. So unfortunately that means that I can't open up my spreadsheet view or, sorry, my presentation view. And if I try to open up some like side note stuff, it crashes. So I'll just, I'll just scroll through my presentation and you'll, you'll see my, my notes at the same time. So just apologies in advance for that. And if, and if my presentation suddenly disappears, I'll reload right away. Okay, so, so we've got Table View. We've had it in the product for a few years now. It's of kind, kind of marked as experimental. As I mentioned before, it's a tool for displaying and interacting with large amounts of data. So why do we have it? We have grid already and grid does a really good job of laying out two dimensional information. But grid kind of tops out around when you have a lot of stuff you want to show a degree Grid does kind of top out. And here I'm just kind of showing I've got a table of data that is like three columns by around 2,000 rows, some random colors and numbers and words in it. And if I want to make some sort of scrollable interface for looking at the data once the data is generated. All right, so yeah, so GRE kind of tops out around 2,000 entries or that's what I'm playing around with on my system. And so we wanted something where you could display a lot of information and interact with it dynamically. So come on aboard. Evaluation. Sorry, this was all working yesterday, of course. Anyways, while it's, while it's aborting, I'll explain a little bit more. So yeah, so. Oh, there we go. Okay, there we go. We've got it. So I just won't use any random words for this presentation. Okay, so we can bump this up to. So I said grid topped out around 2000. Table View can go quite high. So, so we can go to something like, what is that, like 64,000, something like that. And here we go. That typesets or displays immediately, you can scroll through it and you can even edit values all in real time. Sorry. That's kind of the nice thing about tableview, the way grid isn't inefficient for no reason. And I shouldn't even really say inefficient. That's not doing it justice. So grid takes a long. It takes longer for grid to typeset large amounts of data because it has to look at everything and that it does a really good job of laying out rows and columns, making sure that everything fits within the area you require. You can set columns to like, man, like, to like span over certain distances and stuff. It's really cool. But when you. But you want to just look at something, Table View will be much more efficient. And the way it does that is that it doesn't. It doesn't. We use the word typeset so it doesn't turn everything into something you can display. Jason, can you share again? Oh, sure. Yeah. Thank you. It's not sharing. How's that? Oh, there we go. Perfect. Okay. I was wondering why the thing on the thing on the presentation was black, but I just assumed it was related to the graphics problems. Okay, so, yeah, so we've got Table View. Now you can. Table View is a control. So you can. So you can make the first argument dynamic and so. And then if you add. If you make changes to the. To the variable or the symbol and table view will automatically pick up on that and that goes in both directions. So if I add a row to. Oh, shoot. It did the. Oh, it did the random word, but it worked that time. Okay, good. So, you know, I just added a row to the beginning of my data. Tableview picked that up. But it's also two directional. So I can look at the first. I can look at the first element in my data and I can modify it and then it gets updated too. So it's a control. So that's really useful too. So for interacting with data, not just viewing it. And right now Table View can look at ragged arrays. And so that's pretty much the only thing we support right now. So that's like an array where all of the sub lists don't have to be the same length. So it doesn't have to be. You could have one element, the first list, and five elements in the second list. And tableview will just kind of show what it can and ignore what it can't. And we tend to be pretty forgiving with our controls. So that's kind of nice too. So if I take my data and I just set the third element of my Matrix, so which should be a list, and they just give it like a, like a Unicode character. Table view will just kind of ignore it. It won't just, you know, it just won't show anything. Yeah. And so one way to kind of think about it is it's almost like a grid of input fields. And each kind of. So there, there can be a type associated with the table view if you want to specify. Like if you only want to work with numbers or strings or general expressions, you can kind of provide that as the second argument, just like you can to input field. So there's, you know, advantages and disadvantages to that. So just like input field, if you try and show something that doesn't. If you say, hey, I want numbers but I'm giving you a string, it refuses to, you know, display it. Table view goes a little bit further if you can force it to display something. So, okay, so you say all these are supposed to be strings, but then you turn one into a number. I guess numbers can be strings, but if you did, reverse tableview will just refuse to write that value to your variable. And so it kind of protects the type. It does type safety that way. And if you want to say that something's missing from your data, you can just use the word null right now. And then it'll just be like empty space. It's also what the front end puts into your data. If you hit delete on something. So there's a D there, hit delete and it puts the null there. And as far as options go, table view is a lot like grid. So in many cases, if you have a grid, you can replace it with a table view. Just replace grid with table view and a lot of the options will get picked up. So you can choose the size of it, style the background. Unlike grid, you can add headers to it. So that's pretty cool. I'll show you how to do that. What else is neat? Most of these are like grid, except we got a few more that are for first selections here, like pick mode and picked elements and of course some scrolling stuff that grid doesn't have. If you haven't worked with grid before, I'm just going to give you a quick heads up. Now you can style the inside content area of the table view just like you can style the grid. And when you pass options to like background, for example, they kind of have this kind of nested list format. So each columns, rows or block rules. So these are kind of like three different ways of specifying how to style the content area. Can have a list of values that either apply to the beginning of the dimension. So like the first few columns or rows and then you can apply something that gets repeated over the middle and then something that applies at the end. So they can be very listy. So if you. When I show you some options, I'll take a sec to explain what's happening there. So yeah, like I said, you can choose the dimensions. That just chooses the dimensions of the table view. It won't, you know, like clip your data or anything like that. But you know, it can be dynamic too. So here we go. We've got a table view that you know, changes the side from size from size n by n. We also support this keyword value in allowed dimensions, which is fit and it just says fit that dimension of the table view to whatever your data is. So this is now just saying fit this matrix which is an N by n matrix. And if I make it bigger or smaller, the table view will match it. So that's kind of cool. You can also do min max specifications. So you could say like I want somewhere between 0 and 10, 0 and 5 columns and then you can add more, but then you can't add any more when you try and get past five. So it's pretty flexible. So yeah, background is a lot like grid. We've got these kind of like grid like option values here. So we're saying for this one, I want the columns to have an automatic color and then I want my rows to alternate between white and light blue. And you can do that. The values in the rows and columns will mix. So just like grid. So we're alternating red and white in one direction and white and light blue on the other. And then you got purple in the intersections. But if you use that kind of third list and you say you want to apply them to the items themselves, which you can describe with indices, those blow away settings. So it's kind of like what grid does too. Yeah, you can do headers and headers are. They're a lot of fun. So if you know, if you want to describe what's in your rows and columns, headers is option you want to use. There's currently a bug right now which is fixed or fix is being reviewed where the indices are off by one, but you won't see that in 14. So here if you use the keyword automatic, it just uses the row or column number. But you can use whatever you want here. This is in the repeat section. So it's going to repeat header. But I can say one for the first column. And then similarly you can change the headers for the rows over there. Just like the control value. If you say null, then that value isn't going to be there. But you can also say none as well. And yeah, you can use any expression for the header. So here we go. I've got like Unicode character. I've got an expression with more complicated typesetting. It uses a template box and then a plot. So it'll throw those in the header. No problem. You can change the size of the headers. Not that interesting images if you want to use it, but I won't show that off. You can change the amount of spacings between the rows and columns. So here we go. I've made them quite wide so that like they have little margins on the inside. You can also go negative. I don't know why you didn't want to do that, but you can as well. We'll do that too. Unlike grid, spacings only applies. It only has a single specification. You can't change the spacings per row or column. Yet you can align stuff by default. We know we align things with things on the left and numbers on the right, but you can change that if you want. Yeah. And because it's control, you have all these like little extra things around the table view so you can turn on and off your resize area. You can turn on and off your scroll bars headers. And if you look really closely, you can put a tiny little frame around the outside of it too. We use this thing called pick mode and. And it's kind of like the selection mode for the view. So you can change it to either right now row or rows. And then it turns the table view into kind of like this interactive selection widget. And then you can grab the selection with the. I don't have that defined yet. You could grab this selection with the. With the picked elements variable. So this is like one of those two directional option values. So you can write to it or. Or the front end will read from it. So I've. I just need to name the variable pick. And now the front end will write whatever has been selected in terms of indices. So something that could be used with extract to that variable. So that's kind of cool. We use that for the cloud open dialog. You can change scrolling. Yeah, you can turn on and off your scroll bars, but they'll work regardless. Or you can make your own scroll bar ridget kind of thing just by passing the current scroll position to the scroll position option. So Sorry, I'm kind of bombing through these options kind of quickly because I mostly want to show off the new developments we've had. OK, so what's going to be new in 14? You can control the dividers now. So those lines that go between rows and columns, so far it just applies to the content area. So it's like one of those grid like values. So you can choose which rows and columns will and will not have lines. Here I'm using that repeat syntax and saying nothing will have a divider. So that's showing the first one, which is kind of at the edge. You can turn on the first two column dividers and they'll show up and then the rest will be false. So we accept true, false and automatic for values right now. So no styling yet, but that's something I hope to implement soon. So you could change the color of them. If you use true, it means the divider's there, false is not there. And if you do automatic, it picks the value from whatever appearance you're using. So if you used a framed appearance, automatic will mean yes dividers. If you say a frameless table view, then you won't get any dividers for automatic, but you can still manually turn them back on by hitting true. And incidentally, this is the only way currently of controlling whether or not there are dividers in the header area. So. So with the frameless appearance field type. So I mentioned earlier that field type was the second argument to Table Viewbox, just like it is for input fields, but it can actually be supplied as it's not really documented option yet. But you can choose a different field type for each row or column. So that's really useful. If table view will kind of refuse to typeset if it has anything more complicated than a number or string. If you don't tell it that it's supposed to have expressions, we're working on getting rid of that restriction. But in the meantime, if you want to say certain columns or strings or expressions or whatnot, you can use this option and it will override the default field type. So expression with whatever you manually specify. So I'm saying, hey, this column, the columns will have strings, then expression, and everything else will have a string. So this will be string, then expression, and then all the rest are strings. So that's useful because we do custom styling, depending on what we detect as the type of the element, so the cell. So if we detect it's a string, we'll usually hide the quotes around the string and we'll do alignment based on you know, if we think it's a number of strings. So this, this is helpful for. If you don't want everything to look like an expression, you can manually override it here. So we also have item style. I don't think we had this. I presented this last time I was talking about table view. So this is like grid. You can apply custom styling to rows and columns. And so here I'm just kind of. I'm going to say that we're hiding the string characters manually in the first column and we're going to use wider font tracking in the second column and we're going to hide the string characters in the third column. But, you know, we could also. We could, you know, make the first column orange. Not sure why it's only applying to the quotes, but you know what I mean? You could, yeah, you can do whatever you want. You can do large. Anything that would normally be. Yeah. Applied to a, you know, something that you could style something with. Yeah, headers. Okay. So recently we've added the ability to support span from left and span from above in headers. So, yeah, I'll show you what that looks like. Here we have some random information about some people, including their street address and city and all that stuff. But now we can kind of group all of these address things together. And I just called it address parts just by saying span from left a whole bunch in the header option. Yeah, so that's kind of neat. If you have kind of structured data, then, you know, this is a bit nicer than having like street address, you know, city address, you know, for example, if you want to group them all together and we can improve that. I'll show you in a couple of slides. Another thing that you can do now is do custom typesetting for the content area. This isn't documented. This is kind of experimental. So if you want to. Yeah, I guess custom typesetting you can now do. It's kind of like template box, where you can value can be one thing, but you can have it display as something else. And the motivation for us coming up with this concept was when you're looking at large amounts of data where there could be missing elements and it looks like this, which isn't so nice. So we thought, well, why don't we allow an option which lets you change what missing would look like? And then we thought, well, why don't we generalize that and you can change it for anything. So there's this new option, it's hidden, called Display Functions, and it gives you a list of you supply a list of rules and the left hand side of the rule is a pattern and if that pattern applies then the visualization of that value is replaced with what's on the right hand side. So if we look at that same table view but we say hey, we want the thing that's missing to be drawn as this kind of like empty circle. Well you can do that. Now so far it's only one directional. With template box you kind of have to specify how things are displayed but also how they're turned back into expressions because if you edit this things get a little confusing. You're, you know the front end is going to think you're editing a circle but really you're editing a missing. And so we've got to maybe think that a little bit through and how we're going to handle that case. Yeah and you can't. It's not just limited to simple to simple boxes. You can kind of replace it with whatever you want. So I kind of took this people example here and then I replaced all of the province abbreviations with flags. So I'm using graphics. I hope this doesn't crash. Looks good but oh yeah, this is using an older front end build that doesn't have support for simple patterns on the left. But yeah, this will work in master. I'll just show you what it looks like by working around this bug. So yeah you can use that to replace content. So it's kind of neat. Last thing I'm going to show off is yeah, we also are kind of doing multi dimensional headers now. So I showed before how you could kind of group headers together. Well now you can. We don't have a top level option for this in table view but if you manually kind of drill this option down with by giving it the box option you can now give a grid of values for the columnar or row wise specification and that will display as a grid of headers and so making use of spanning, I think I have these span characters in here then you can kind of group things together but show what their subcategory is. So yeah, that's all I have to show today. If you have any questions or comments now would be, you know I can address those. Otherwise I'll be at the front end office hour in a little bit later today. So yeah, that's all I have to say about Table View for now. Thanks for your time. Oh and this, this presentation is also available as a handout so in case anyone wants to see it there. Ok so I see a question about Table view allows header specifications, labels a row and column. Oh no. Yes, so they are. Sorry, my questions are taking a while to load. It says that yeah, you can do row and column headers. So it's like that grid, like option value. So these are for the columns, but if I copy that. Oh actually no, I'm showing you here, I'll show you here. So these are, I'm saying automatic for all the column headers. So I could do column one, column two and then it'll update it over here. And multi dimensional column headers works as well, although things get a little cramped because there isn't as much space by default in the column section. So you have to make sure you make your header a bit wider. Not seeing any more questions. So if you. Yeah, if you have any comments and come to the front end office hour.