11.1 Work with datatables of tabular data - Video Tutorials & Practice Problems
Video duration:
6m
Play a video:
Video transcript
<v Voiceover>In recent</v> years, there has been great development in JavaScript packages for data display. Fortunately, the new HTML widgets package from our studio and Ramnath Vaidyanathan make it very easy to create bindings to these packages in R. The first one we look at is a library called DT, which provides connection to the JavaScript library DataTable. This is not to be confused with Matt Dawes data.table package in R, which allows for easy data manipulation. This is for tabular display of data in JavaScript. To illustrate we will look at the baseball data. We say: data of baseball comma package equals plyr. This is how we load the data without loading the package. And right now we're only going to care about anything since the year 2000. So, we say: baseball gets baseball square bracket baseball dollar year greater than equal to 2000 and leave the column entry blank. Now we load the DT package and let's take a look at data table of baseball. If you're using R studio it is displayed here in the viewer pane, which is essentially a little web browser. If you're using R anywhere else it should pop up in your default browser, which is preferably Chrome. I'm going to make this bigger, so it's easier to see. And we have this beautiful HTML and JavaScript table. Thing is it's a wide table so we do have to scroll across the page which is never a good thing to see them all, but we want to see different entries it's only showing us one through 10 come here 11 through 20, 21 through 30, so forth and so on. Let's go back to the first one. Another nice feature is that we can sort. Right now it's sorted on ID, but we could also sort it on team, maybe games it's really convenient. However, it's printing the row names by default and we don't necessarily like that. So, let's go ahead and get rid of that. We will say: data table of baseball row names equal false and now those are no longer printed. However, we still have the scrolling issue. I have to scroll vertically, I have to scroll horizontally not entirely pleasant. Fortunately, HTML widgets let's you use any extensions for these JavaScript libraries. So, let's use the scroller extension. So, we say: data table of baseball continue to say row names equal false and then extensions equals in quotes capital "s" scroller. At first blush, nothing really changed. We still have to scroll for the whole page on the master scroll bars. It didn't do wanted that's because we simply said to use the scroller extension, we didn't provide any options. So, let's do that. In fact, let's copy this line of code and paste it. Let's go to the next line and say: options equals list the first one will be dom that is an HTML thing do not worry about it just set it to in quotes f-r-t-i capital S. The next argument is: scroll by equals 400 that controls the wide scrolling and we will allow this to collapse so we say: scroll collapse equals true and don't forget the closing parenthesis. We'll put the original on its own line. If we run this we now have a nice data table where we can continue scrolling and scrolling and scrolling showing more and more rows and the horizontal scroll is built into the table itself not into the whole page. So, it's nicer to work with. A nice feature is the search bar. We can go ahead and search in all the columns. Let's say we want to search Paul O'Neill from the Yankees. We start typing in O'Neill and there he is he has a few entries, but that's Paul O'Neill. This search box is amazing. But what would be even better is if we could search each column individually. To do that we will copy these lines of code and we will add an argument here that says: filter equals top. We run these and we now have a search box for each column and we can search for O'Neill right here. Another nice feature here is that we can change the styling. There's the default styling, but they've also included the bootstrap styling. So, I'll put one more argument and say: style equals bootstrap. We run the code now and our table just looks a little different, looks a little cleaner, you might not be able to see it on your screen but there's some cross hatching here. Just a move attractive look and this can be further extended with all the different extensions available to data table. This package data table provides a nice, easy, convenient way to take advantage of these new breakthroughs in JavaScript and display a tabular data in an interactive fashion inside your web documents.