{reactable} tables with Greg Lin - Open Source Lounge

Howdy, everybody. I think people should be joining now. I'm just going to be taking a few moments to allow people to be joining the event and set up introductions for folks. So if you bear with me for a few moments.

Well, I see people are joining right now. So hello and welcome. Welcome to another open source chat. The first time branded as Posit open source chat. Two weeks ago, we had Rich for the talking about GT for the RStudio open source chat. And now we're in fully into the Posit world.

First off, setting things up, you know, what's the goal for today? There's kind of two big goals for these open source chats. Firstly, is to just connect users of a tool of an open source tool in particular, to the people who develop the tool. So in this case, Greg, developers like Greg can sometimes feel a little disconnected from end users and from other people who are developing on top of it. And then users are often unaware of how these tools get made, get maintained, fix bugs, you know, add additional functionality, that sort of thing. And then open source software just generally works better, the more active and the more engaged the community is, the better the connection is there between developers and users, the better the software and the ecosystem that flows from it.

And then secondly, this is an opportunity for each of y'all to share with each other, how you use the tools, how you approach common problems with those tools, that sort of thing.

And then thirdly, I should mention another little goal of mine, you know, this is a kind of the second pilot of open source chat. So I am kind of keen to hear your guys's feedback on format and how to structure these events to get the most value for you as well. If you remember two weeks ago, with Rich, we used Zoom, for example, which offered like a nice discussion. Today, we're using Restream, which allows us to stream live to YouTube, as well as to LinkedIn, just live.

So kind of curious, you know, which of these tools or maybe there's a third better tool is a better way to execute on the goal for open source chat. So definitely love to hear from you. You could reach out to me personally, Curtis Hepart on LinkedIn or email at curtis.posit.co.

Okay, so with that in mind, a few things to set up first. Greg and I have a few kind of questions sort of set things up for the full hour. And Greg's prepared a few demos to kind of talk about some interesting things with Reactable. But we would like you to ask your own questions, which you can do so in chat. And then we've also set up this Slido link with POS.it. The URL to the link is in the caption on the screen right there. If you want to ask things anonymously.

And then Greg was also keen to hear from you. He had set up a kind of a seating question, which is this question. What challenges have you or your team been running into related to GT and to Reactables? I'd be kind of keen to hear from you about that. So there's a there's sort of this kind of poll. And then there's also a way to ask anonymous questions as well. So definitely keen to hear from you there.

Great. So to set things up for Greg, a few things. So Greg Lynn is a member of our studio POS.it team. He works actually on the package manager team, which is one of our professional products. And then he's also the Reactable maintainer. The Reactable R package helps you create interactive data tables for R. And it's based on the Reactable JavaScript library made with React R. Which connects the React JavaScript library to R. In this open source chat, we'll dive into Reactables development roadmap. And of course, Greg is happy to field your questions, comments and feedbacks about Reactable and about his work.

So yeah, if you work with Reactable already, if you have feedback, if you're struggling with things, you know, struggling to create tables you need for your work, if you have a lot of things to share regarding Reactable with the rest of the community, this event is absolutely for you.

And then one other mention before I introduce or bring Greg in is there's actually going on right now is the table contest. And Reactable is either the number one or the number two package that gets relied upon for the table contest entries. The table contest is scheduled to end on I think the 15th of November. I think it actually might be the Friday, like the 18th. But yeah, so the deadline for the table contest is coming up. So I would really encourage you all, from beginners to experienced folks, if you haven't already thought about it, to participate in the contest to submit. We're really keen to look through everything, to share everything. So you could learn about building great, you know, interactive, great data display tables and the community could share from your work as well.

Cool. So allow me to introduce Greg. Yeah, first and foremost, questions, comments, please use the Slido link there, the posit slash OS dash chat. And introducing Greg. Howdy, Greg. Hello. Hey, Curtis.

Thank you for joining us. Oh, thank you so much. It's so interesting because I don't, you know, we're not on Zoom anymore. So I can't actually ask people if they've been following it. Yeah. So it's very much a kind of open question as to how well those go. Yeah. So first and foremost, the Reactable on the Reactable package. One thing I noticed for the Reactable package, I don't think it has a hex yet. Why is there no hex?

Hex? Well, I don't really care about hex logos. So if you really want to, you can buy some empty hex stickers off of Amazon or wherever, draw your own and feel free to use that. At the conference, there's actually like blank stickers that you could draw your own hex and you can come to the next conference, pick one of those up and do it yourself.

I don't really care about hex logos.

Yeah, it's interesting because the Reactable formatter by Kyle, I'm going to mispronounce his last name, but Kulia has a hex already. Yeah. Okay. So serious questions now. And we're starting to get a few from the audience. But we'll get to those in a moment.

Origins of reactable

So you started working on Reactable in, I guess, the summer of 2019. Can you kind of talk through that initial idea and where it came from? And also, was my description, was my setup for Reactable accurate? Like, would you add anything else to that?

Yeah, so Reactable started, kind of started at the RStudio conference in 2019. Like you mentioned with the ReactR package, there's a talk there by Alan Dikert. He was working with Ken Russell on this package called ReactR that allowed you to more easily integrate React JavaScript libraries into R and like the HTML widgets ecosystem. And there's just a whole bunch of JavaScript libraries out there. That's really powerful, like database libraries. They're all written in React. That was the booming web framework around that time. It still is super popular. And that just allowed you to more easily integrate those libraries into R instead of having to like write a manual wrapper around a JavaScript library, which is kind of painful.

And I want to try that out too, since I thought the talk was really cool. And so a bit after that conference, I was just looking for libraries to try out. Reactable was not actually started to create a data table library. I just arbitrarily picked a data table because it's a useful thing. It's probably in every app I create, there's going to be a data table. So I was using DT a lot. DT is probably still like the most common HTML widgets or library that I go for when I'm making shiny apps or whatever, or markdown docs.

And so I picked this library called Reactable. It was just a table library. There's a whole bunch of them. I picked this one pretty arbitrarily, but I think it turned out pretty well because it had a lot of provide a lot of flexibility features. And there's some things in there that weren't as easy to do in the data tables library, like nested rows, grouped rows. In data tables world, it's kind of a hard thing to do. Nested rows and Reactable made that easier.

So I thought, why not just pick this one out to try it out. And it just started as an experiment. It still is an experiment with the primary goal of just experimenting and trying out ReactR. And I guess every couple of days I'll work on it and then it just became a real package instead of just like a little toy.

Yeah, now it's either the number two or three table package in R I feel. I see it all over the place, you know, on tiny Tuesdays and it's used throughout people's work. So yeah, it's an amazing contribution after a few years of development.

Why open source?

Another question, I'd warned you about this too. So this is kind of like more in the setup realm of things. Can you kind of tell me why open source? So you work on the package manager team, which is one of the professional products, not so much open source. There are open source elements and package manager, but you know, why are you working for an open source software company? Why is it important to you?

Open source. So I think my own reason for why open source is important is that I've learned so much from open source. Like, probably as much as I've learned about software and programming from just being a professional software developer, just reading open source code and using open source libraries. I think the learning part is really important. Like, there's so much high quality code out there in software that you can look at, learn from, adopt and contribute back to. And so I think open source is really awesome in that aspect.

Also, like, at Posit or RStudio, our products use a lot of open source. And maybe in past years, a lot of people, some people have said that open source software isn't as high quality as like closed source software. And I've heard that in person too. But if you look at all the professional products, all the closed source products, out there, even a bunch of the closed source products at Posit, most of our software, or actually all of our software is using a ton of open source libraries and components underneath. And we don't think it's low quality or anything. It's as high quality as any other software out there.

Well, I guess as an end user, why should I strongly consider an open source set of tooling rather than some sort of closed source tooling that, you know, maybe my employer's kind of pointing me to that sort of thing? Like, what would you what would be your pitch for trying to consider the open source alternative to getting your work done?

Okay, well, as a user, it's free. That's, that's my number one reason. It's, it's, it's free, it doesn't cost like thousands of dollars. But also, still also the, what I said about open source software being as high quality as any software. It's just not, it's not as high quality as any other software. I mean, of course, there's some closed source software that doesn't exist in the open source world. And so, of course, you do have to use closed source software sometimes. But if you can reach for an available open source library component, then why not?

And then also, there's also the nice aspect about contribution back and being able to file bug reports or ask for feature requests on their open issue tracker. Some closed source products don't really have like a direct path for feedback back into the products. You kind of like, sometimes you have to yell out on Twitter or send them emails or something. I don't know. Does that answer your question?

Questions from the audience

Yeah, yeah. And sorry, I should apologize again, to start with sort of high end philosophical blends. But it's definitely the thread that kind of connects these OS chats together. So yeah, I really appreciate it. So kind of shifting tacks a little bit, changing tacks a little bit, we have a couple demos that you had set up. And then there's a few questions that have that have kind of come in through chat.

So I feel we might as well just dive into a couple of the questions. Some are technical and some are less so. So I'll just kind of jump in. Let's just kind of work through each one of those. And once we've kind of gone through those, we'll shift to demos and hopefully a couple more questions come up out of that or something. So the first one is, yes, it's GitHub issue number one. What's the ATA on editable, reactable, editable tables?

Okay. Also, okay. So looking at editable tables, I guess there are two ways to kind of answer this. The first is a editable tables are technically possible right now. A while back, there's like a table contest submission for DT where you could edit. It's not it wasn't using the, it was a editable table example, but it wasn't using the built in editing features. Of DT, you had like a table with an edit button where you click the edit button and it showed a modal where you can edit the data in shiny. And you can also do that in reactable. I just haven't gone around to making a public demo of that, but it is possible. Maybe after this, I'll go finish up that example and put it up on the website somewhere.

But you could also look at this as an opportunity to maybe call upon the community to help you with that example. Not to make you do anything.

And then the, so what the, and then the other side of it, what the issue was originally talking about, and what I should probably post on that issue instead is that editable tables as in like an Excel based data grid kind of thing. Just, I don't think that's ever going to happen in reactable. And part of that is because that kind of components, like a data grid is technically different from a table. Like in an Excel grid, like you have every cell that's editable. You can navigate around with arrow keys and it's, it's technically, it's considered more of like a grid rather than a table in HTML.

HTML semantics and like assistive technologies and screen readers and just the way you use it, it's totally different. So while it could be implemented in reactable, I just don't think it really makes sense. I mean, it might be like a separate package that kind of shares the same stuff, enters as reactable, but for now, I don't think that's going to happen. It's also a really hard thing to do. There's so many, so many different challenges with it that I just don't have time for it. And I'm sorry.

That's great. I'm going to jump into some of the kind of technical questions that appeared in chat. If I'm completely honest, I don't fully understand this question, but we'll see, see how we go. So Patrick is asking, update reactable does not allow for JS style direct manipulation of the DOM. The data is loaded new. Do you follow that context? He had a kind of a second chat question, which I can maybe show.

So, okay. The, the second part was registering custom JS function on reactable does not work with one session on flushed and then two in the tag style, because when the table is rendered later, the JS is not registered. Do you follow that? Or would that maybe be a better question posed on GitHub issues?

Yeah, definitely. Definitely post that on, on GitHub. And it'll be easier to think about. This is going to get into like the weeds a bit. And I don't totally understand it as well. But the first question, I think, might be answered by one of the demos. You're asking about update reactable. It's like reloading the entire table or something like that.

So I should apologize to Patrick, then we could we could follow with this kind of after the event. You know, I think a GitHub issue would probably be the ideal place to do that. Another question from a different person from kind of mispronounced, but Airdy. Hi, first thing I wanted to say that's nice to have opportunity to chat with you. Greg developing this package since we can't be found on Twitter. So this is another core thing. In fact, one of the advantages you mentioned of open source software is that oftentimes reaching out to the maintainer is kind of a bit easier. So I'm curious, like, you know, people do want to reach out to say thanks or to offer bug reports or feature requests, that sort of thing. Yeah, what are your ideal? What are your preferred ways for people to reach out to you?

First, thanks for the comments. And I think the best, the best way to reach out is probably on GitHub, GitHub issues. I kind of treat the issues as like a general discussion forum. So you're free to ask questions, or open bug reports, of course, ask for features. And then if you, if you really want to, if you really don't want to use GitHub issues, there are a couple of ways to do that. There's actually been people that emailed me, you can find the, you can find my email from the description file. If you really want to do that. No Twitter for me, though. I don't have time for Twitter.

Perfect. And then in chat, folks just shared the link to, to the GitHub issues, by the way, which I'll, if you're watching this after the recording is live, you know, if you're watching it on YouTube, or after the live events, it'll be in the description as well.

There's a question from sort of a question from from Michelle, I've mocked up Python data frames with reactable, but I cannot cannot seem to create arbitrary number of stacked column headers to mock hierarchical hierarchical columns, multi index, which does not exist in our data frames. I know that there's like a lot of a lot of like context on top of that. So yeah, I'm curious if you if you do have a reaction, or is this maybe something that's like a kind of a feature request or thing?

Yeah, so I'm not. Michelle, if you can draw a picture and file a feature request on GitHub, that would help. Otherwise, I don't really understand what this exactly means. But complex headers and tables are just going to be a challenge and a pain. So

broadly, is there Python support? This is interesting in terms of format, you can kind of see the strengths of more of a zoom or more interactive format versus that's just an aside for future ones. I am taking that into account. But yeah, broadly, are you considering kind of a Python package or better support for Python people working with Python?

Might be able to answer some of this from when the first demo, maybe. And then for first class Python supports is definitely possible. The core library of reactable is all JavaScript. And so you can wrap JavaScript libraries in any other language. Sure, we could have a Python IPy widgets or whatever you're using now. I'm not really that familiar with the Python ecosystem, but I think I'll take a look at Shiny for Python soon. And the Jupyter side of widgets, maybe eventually down down the road, just need time. But also check out the first demo that I'll have.

Demo: Quarto and Observable with reactable

Okay, so the good news about the good news about the Python support is that if you're doing this static docs, you can use the awesome new Quarto to connect different languages, you can do your data managing in Python and then build some interactive UI inputs with observable and then visualize those that filter data from Python in an ARDS reactable package. So here's a simple demo of using observable with reactable in a Quarto doc. This was made literally yesterday. So it's still a work in progress. And also it uses some new features and the unreleased development version of reactable.

So if you want to try this out, then you do have to install the package from GitHub for now. But here's a preview of what should eventually be possible. So here's an example of using observable inputs to filter a reactable table. You got the slider. This is the penguins Palmer penguins data sets. It's one of the examples from the Quarto websites. You can use the slider from observable to filter tables. You can subset the data frame. It's basically like the same example from the same penguins example from the Quarto websites that instead of an observable table, I think it's called, we're showing a reactable table instead. And the code for that.

The code to hook up observable with reactable is just one line. It's using this new method in the JavaScript API, where you can update a reactable tables data using a JavaScript call alone. And so here, this is just an observable cell. In the observable cell, we're filtering the data from the penguins data sets. And then anytime the data is filtered, we're also updating the reactable table data with the filtered data. And it's hooked up to observable.

And then we can also do it the other way around where you can use a reactable table to filter unobservable charts. And let's see.

Let's see. For whatever reason, the plot isn't showing up. I think I have to refresh. Okay.

So instead of a slider input in checkboxes, I have a table here. This is a reactable table with a couple of custom filters. And then this plot down here is not made by R, but it's one of the D3 observable plots. A plot plots, plotting penguin body mass by sex and species. So we can use the reactable table to filter and the plot automatically updates.

Could we get a ggplot in there? Or is that is that something to be highly customizable?

ggplot, let's see. I think ggplots are static. So you might have to use Shiny for that. I haven't played around with the Quarto-Shiny integration, but it's probably possible. You just need a, well, you might need a server, an R server behind the scenes. Maybe you can use ggplotly. I'm not sure.

What about for, there's a question from Uriel asking about, for nested tables, I guess for, you know, like collapsed versions or nested tables. Does that work as well?

nested tables. You mean to update the nested table? Like, I believe so. Yeah. I think so. I think that would work. You just need in your nested table, you would need to add an ID to that table so you can identify it and it should work. Although nested tables have always been kind of slightly buggy. Or you might, if you, if you collapse the table, it'll reset the state. So it might be a little wonky, but I think it'll work. You can try it out.

That'd be another good user demo. One thing I've appreciated as I've been doing research for this is the community does a lot of development on their own. And it'd be good to see some experiments with that to see how it works. I think you just answered this question, but Mike also was asking about, yeah. So if GT table here, you know, getting updated with the filter and the sliders, you know, is maybe a little tricky. What about Plotly? I think you just said that that conceivably would work, but yeah. What do you think?

Yeah. So Plotly, probably the same. If you're using Plotly from R, then probably a similar answer to the ggplot or ggplotly answer. It might be a little trickier. So that the whole point of doing this or the whole point of this demo is that the, this plot is using observables plotting library. So I forgot to show the code, but it looks like this. It looks like this. This is a built in library and an observable. So you can just use out of the box and it just works.

And so if you're using Plotly from R, then it might be a little bit trickier to set up. You can do with Plotly if you use crosstalk. Yeah, that'll probably work. Hooking up crosstalk to the observable inputs might be a little trickier, but it's probably possible. And then if you're using Plotly from like the JavaScript library, the JavaScript wrapper, then it might be a little easier. I don't know. I haven't, I haven't tried that out much. It's definitely a good, interesting thing to test out if you want to.

Development roadmap

So I feel we might as well just dive into a couple of the questions. Before we jump to this question, I should remind folks, you know, feel free to ask questions on Slido. There's a couple more that I'll get to there or pose questions on chat. I was curious, you know, for users of Reactable and maybe even people looking to contribute in one way or another and kind of guide your development roadmap. Yeah, what does development look like? You know, what is being worked on now?

So the development roadmap is not very concrete. It's a, there's not really a development roadmap just because this is a free time project for fun. And so I just work on it whenever I want to, whenever I feel like it. And don't really have much planned for kind of do just, um, there's some things like general features issues that I have in mind, but no real roadmap.

But what's currently being worked on now is a really popular feature request in the past, um, server-side data processing. So that's something that's been missing in Reactable for a long time. But DT has it. That's actually part of why it hasn't been added to Reactable because DT server-side data support is just, it's there and it works really well. So that's, that's what I've been using for server-side data myself. And server-side data is also kind of hard to do. It's at least a lot of efforts.

But, um, I actually do have some time to work on now, um, mostly being sponsored by Posit. They're giving me like some time at work to work on it. And so right now it's, I wouldn't say it's coming soon, but at least soon there should be at least a working branch that you might be able to experiment with.

Yeah, so there's server-side data processing. I can show a demo of that in a bit. Um, a bunch of JavaScript API enhancements, like the one I just showed with, uh, Quarto and Observable. There's a whole lot more that you can do with the JavaScript API where you can manipulate a Reactable table just like you could with like Shiny, but without having a server in the background. It's all in your browser. You can do, basically create an interactive app, kind of like Observable, all from R and JavaScript.

So there's actually a quick question we can answer from chat. And then if you'd like, I'd love to dive into your demo for the JavaScript API. The question is from Leonel asking about adding Sparklines to Reactable.

I should mention, because I could sort of answer that as well. There's a really nice package that Kyle Kulio, I'm going to mispronounce the name, Kulio, Kulio has in the packages Reactable Formatter, which is Reactable FMTR and has a really nice integration with Sparklines. And I was kind of curious what your advice would be as well.

Yeah, you can use Reactable Formatter to do Sparklines. I think that's using the data UI package that Arthur Shaw mentioned. There's also the classic Sparkline package. It's kind of an older HTML widget package, but if you go on to the documentation websites, let me pull that up.

On the website, if you go to the examples page. Somewhere in custom rendering. Okay. So in the custom rendering section of the examples page, there is an example called embedding HTML widgets. And this uses the Sparkline package that you can install from CRAN. And it's got like really simple Sparklines, box plots, bar graphs, and usage is just like you call Sparkline on your data and then give it a type if you wanted something other than like the classic Sparkline.

And then PositPBC posted a table contest example with doing Sparklines with Reactable Formatter.

There's a question. Is there some sort of Reactable-verse yet? I'm not sure exactly how to interpret these questions, but it's, you know, Arthur was sort of asking, are Sparklines, are there any maintained packages that help? I'm not sure exactly what that means because, you know, Kyle is maintaining the Reactable Formatter package.

Yeah, I have no idea other than Reactable Formatter. I think if there is one, then Kyle probably started it with Reactable Formatter, but maybe that's like a, let's use that as like a call to action to the community. If you want to extend Reactable, because Reactable is definitely made and designed for extensibility. Like it's really just a simple data table library that lets you render custom HTML, custom contents. It doesn't actually do Sparklines or any of this other fancy bar chart stuff. Those are all examples in the documentation.

And if you see like a lot of the code is kind of just, if you want to use it, then you can copy paste it from the examples. But if there are other libraries that make it easier to, or save you from having to copy paste examples, then that's really nice. But yeah, I don't know of any other packages besides Reactable Formatter. Although you can use other, if you look at through the examples, there are all sorts of packages that help out with creating tables, particularly like data viz kind of tables. There are packages for formatting data, things like tooltips. You can use any of the HTML widgets, packages in Reactable, Reactable's custom HTML rendering stuff.

So I mean, this is kind of related to that question. It's really not so much a question for you, but a question to the broader community. Suppose I am an R developer, and some of this JavaScript stuff is a little beyond me. But there's some functionality I would really like, but it's sort of not doesn't exist yet, or it's not well documented. You know, maybe there's a Stack Overflow post that kind of like describes how you should approach it. But you know, you're just, you're just not kind of there yet, in terms of your ability to kind of pull it off.

So again, it's not so much a question for you, because you're kind of like, well, you're well advanced in terms of your ability. But what would you suggest to these kind of R users to like, to kind of turn, I guess, sort of turning to the open source community to get their help to kind of pull these things off to get those examples developed, so that more people can kind of pull in these additional features that they really want to like really, you know, make the table that they really want to make?

So I think probably the best way to get started is just look through examples. Especially like the simpler examples, you can start from there, and then tweak it to however you like and kind of learn from there. Definitely, you can also use like the reactable formatter package to simplify some of that. I don't know about, I don't know how much the reactable formatter package does with custom JavaScript, but at least with custom R, custom R rendering, it helps a lot there. For JavaScript, that's kind of like more on the advanced side. And for the reactable package, I've tried to make it possible where you don't need to use JavaScript.

In custom rendering, you can write your custom, custom cells on R. We just stick to the, the shiny HTML tools, HTML widgets, ecosystem, you can do it on R if you want to. But if you do want to make your tables fancier and flashier with JavaScript, then there are a bunch of resources. For learning and getting started with JavaScript, I guess I would always recommend, I always recommend the Mozilla Docs, the MDN Docs. You just type in MDN in Google, and you'll find them. Those are great resources for learning about just general HTML, JavaScript, and CSS.

Demo: JavaScript API

Awesome. And you also had set up a demo diving into the JavaScript API. Would you like to dive into that?

Sure. So, I've already talked about the JavaScript API bit, but this is a feature that's already in the release version on CRAN. Like I said, it helps you make, helps you manipulate tables and make like custom and direct controls without the use of shiny, and also without the use of crosstalk. So, crosstalk is also really nice. If we had more time, we could probably look at crosstalk examples, but a lot of people might already be familiar with crosstalk. But the thing with crosstalk is that it's kind of limited to what it can do. And of course, it doesn't help you do fancy stuff with like very specific packages like, like sorting a table.

So, first example in the JavaScript API docs, if you want to go to the examples page, scroll down all the way to the end. There's a couple of examples with the JavaScript API. And then in the articles, there's also like a more detailed guide on how to use the JavaScript API. So, the first example here is a CSV download button. This is a, sorry, this is a really popular feature request, making a download button for like a table without the use of shiny. You could definitely do it in a shiny app, but if you're like, you got an R Markdown documents or a Quarto document, then it wasn't really possible before. But now you can use the JavaScript API to download data.

to a CSV file. And it's just one line of code here. It's not like, it's not like built in, the nicest built in creation like you have with DT's, one of DT's download button extensions, but it isn't too bad to implement your own button. This is a download button in four lines of code. You can click it and it'll download the data to CSV.

And then there are other things like doing custom filtering with the JavaScript API. This example has a custom column filter that's completely external to the table. So it's this select input here. It's not a table at all. It's outside the table and it filters the table by by type of car.

And then you can also build your own custom search inputs using a similar thing, along with custom column filtering, you can do custom table filtering. This is also a external filter input outside the table. You can do the same thing. Search for up and then it'll filter your table.

You can do Oh, sorry. Go ahead. Sorry, I think there's still more JavaScript API examples. Sorry.

I'll just go through these. We can talk more. We can talk more. This one is a programmatic grouping example. So there's no way to do this interactively from the table, but you can now create your own grouping inputs. So you can, it's basically like an interactive pivot table grouped by whatever. Then you have these group rows that you can expand. You can look at the data in different ways.

Yeah, before you couldn't really control this on the fly. All you had to do with, or all that was possible was just grouping up fronts and you couldn't change that in on the page after the table loads. And here's another example of creating a button that expands all rows in the table.

So these are just a couple examples. You can take a look at the JavaScript API guide for more details and more information on usage. There will probably be more examples in the future too.

Demo: Custom filtering

Yeah, you had mentioned you had another demo focused on custom advanced filtering. I think that's a separate article, right? Yeah. I know there's many popular features, but I know in particular that was a very popular feature.

Yeah, so we can go through real quick. This is also related to the JavaScript API. Another popular feature request has been custom filtering, advanced filtering, range filtering. Right now, historically, it's only been possible to do the little text inputs, text search, which is really simple. Range filtering is particularly complicated, but you can now at least create your own custom filter inputs and custom filter methods and logic. Instead of the case insensitive text search right now, you can do a regex search or you can do a numeric minimum value search or fuzzy text search.

So this article is under articles, custom filtering. And if you go down to examples, you can see a little of what's possible. I'll just go through like the couple examples here. Like, for example, if you want to do regular expression filtering instead of the plain text search, you can do that if you want to with a custom filter method.

And this does require you to know some JavaScript, so it's not the easiest to use, but at least we're going to start here making a filter. So it's not the easiest to use, but at least we're going to start here making it possible to do custom filtering and then maybe later there will be like built in ways to select different filter methods and different filter inputs. So here's like a regular expressions, try out regular expression and I think that works.

This example is fuzzy text searching. And it uses an external JavaScript library that lets you do fuzzy text matching. So here I've added a fuzzy text search to the default search input. You can search for something like CDL and it'll match Cadillac. So this definitely is not possible with the default table, but you can do you can basically type whatever you want and it'll still search for, it'll still get the result that you probably wanted to see.

I showed some of this in the Quarto demo, but you can also do like a select input search and search by categorical values or factors. This already exists in DT, but it's just a little harder to do in Reactable right now. This example is a custom datalist filter. So a datalist is like a native HTML input that lets you have, it's like a hybrid between a text input and an autocomplete. So it autocompletes what you typed here. And then it'll search just like a select input.

This is a range filter example. I think I showed this earlier too, but you can now do a range filter if you want to. It's just a little, just a little effort to make this happen, but it is possible now.

So this is a range filter example. It's just a little effort to make this happen, but it is possible now. This example searches for a minimum value and then you can put your range filter outside the table if you want to, all using the JavaScript API. You can do check boxes or whatever other type of input you want. This example, I think it's, it's like a filter to filter the table by rows that have missing values.

And there's a bunch of other examples, but I'll skip it for now.

Yeah, I was going to mention, there's actually, you'd prepared a few demos for us, and I don't think we're going to have time to get through any more of them. But if you, so I'll, I'll put all the demos in the, in the video description. So for people who are watching this afterwards, I'll put into the video description, a link to all the demos that you wanted to get through today. And in particular, I'll put timestamps associated with ones you haven't gone through today.

Looking at your pattern, it does look like they're pretty much, they're, they're all the reactable articles or new sections within articles that have already existed, like the examples, for example. So, yeah, it's a lot of material there just in your package documentation. And there was a couple of nice compliments about how good your documentation is. So, side note there.

Reactable versus other table packages

So yeah, Arthur was asking, just to add to Mike's question about Reactable-verse, what would you, what would be the best and most logical way for the community to add Reactable functionality, for example, more custom Reactable extensions, that sort of thing?

Yeah, so I think, probably the, or I guess it depends on where in the, in the Reactable, the stack that you're adding, want to add functionality, like, if you want to add, like, custom Reactable extensions, that sort of thing. Yeah, so I think, probably the, or I guess it depends on where in the, in the Reactable, the stack that you're adding, want to add functionality, like, if you want to add, like, custom formatters or renders, or rendering helpers, like, kind of like Reactable formatter, then a separate package definitely makes sense. You can create functions that, like, other people can plug into their own Reactable tables. You can create different table themes that people can put into their tables.

As for, like, core table functionality, they'll probably have to mostly go in the Reactable package. So you can, I guess I would recommend starting out with, like, a GitHub issue to talk about what you're thinking about adding, and then we can figure out where to go from there, whether it makes sense to open a pull request in Reactable, or if it makes sense to contribute something to the Reactable JavaScript library.

And then kind of one underlying theme of some kind of comments and questions was, I'm going to kind of reinterpret things a little bit. So apologies to folks who did ask, you know, kind of more specific stuff. But some of the questions are sort of like, there's Reactable, but there's alternatives. There's DT, there's R, sorry, there's GT. And there's FlexTable, there's Huxtable. Yeah, there's many, many others, actually.

So, yeah, if you could kind of compare Reactable with other popular packages like GT and R. And kind of related to this, too, I mean, it's just tangentially related. You know, Mike had asked this question just now. Like, you know, what would be the differences between Reactable and DT that you would kind of point out? You've already said a few. Areas, use cases where I might choose one over the other. And I sort of bring up that question because there's also GT, which is under active development, supported by Posit as well. So how do you think about that?

So I might start with saying that I didn't start this package to, like, create a, well, I didn't intentionally start this package to create, like, a better data table library. I was really just experimenting with the React R package. And so it wasn't meant to be, like, a replacement or an improvement over DT. And there are some features that exist in DT that I just never wanted to add, like, service-side data because it already exists.

But in terms of Reactable versus GT or other, most other data table packages, Reactable is interactive. And so it's a whole lot different doing interactive tables versus, like, static HTML tables. This package is mostly JavaScript, driven by JavaScript there. You've got sorting, filtering, and pagination, grouping, nested tables, a bunch of other stuff that just aren't possible with static HTML.

So I think the only real similar table or similar table library is really DT. Maybe our hands-on grid, if you kind of want to consider, like, the data grid kind of thing, a table. But I think it's really only similar to DT.

And as for Reactable versus DT, I think there are a few points we could talk about. But for maturity, definitely DT has been around forever. I think it's more stable. Definitely less breaking changes. Reactable has probably been around for, like, three years now, but I still consider it pretty new. Just because I haven't spent a whole lot of time working on it. It's still kind of, like, in the experimental phase. I haven't bothered to take off the experimental badge from the readme. So if you want stability, definitely stick with DT and data tables.

We can talk about styling. I'm pretty sure that the most common reason for picking up Reactable versus DT is just that it's easier to style Reactable. Like, in the data tables world, if you want to customize, like, the default theme, you need to go to the data tables websites, use their custom CSS generator. And I've done that before. It's a huge pain. It's not very fun to customize.

But, like, the Reactable formatter package that Kyle made, I think there's already built-in themes that you could then extend to. Yeah. It's pretty clear how you could really make it look custom the way you want it to look.

Calls to action and winding down

So I wanted to wind down things and give you a chance to, once again, go over again. So as people kind of have questions or feedback or they want to contribute, I was curious if you could offer them ways. I'll give you the first way, just to be a little selfish. Again, we have the table contest going on right now.

Whether you're a new user, which we have special prizes just for people who are starting out developing in R in general, or an experienced user, I really encourage you to participate in the table contest, to share your work, you know, with the community, to kind of use that as a motivation to just kind of really dive into some of this stuff. And then, you know, there's prizes involved. There's celebration involved. And then a lot of the kind of best contributions are often invited into the table gallery, which is a nice little resource. You know, table gallery is basically here's a nice looking table or collection of tables or tutorial. And then here's all the code and well-documented kind of narrative that explains everything. And it's all done by the community, celebrated contributors to the community.

But yeah, how would you, you know, what kind of calls to action would you give to the community in order to, as you're kind of shifting over to developing, sorry, when you shift over to develop Reactable?

Yeah, definitely submit stuff through the table contest. It's always cool to see those entries and I think some really fancy stuff. Really nice, nice stuff. Open issues on the GitHub repo, ask questions, ask for, submit feature requests or bug reports. And I guess that's, those are my calls to action. Any feedback is helpful, even on the documentation, the website that's not specifically about Reactable, but all of it helps.

And also, I know we're out of time, but I do want to show real quick, like 30 seconds, the service side data demo before we end.

Demo: Server-side data processing

Absolutely. This is the only demo that you can't find on the internet. So here's a prototype for a work in progress for service side data processing. It's just like DT, DT service side processing. All the data manipulation is done in R and Shiny instead of all in your browser. So here's a 100,000 data, 100,000 row data table. These are not 100,000 rows in your browser, which will just, it'll barf. So you can paginate. It's pretty fast. You can search. It's pretty fast.

Oh, this is a, this is also, I should mention, this is a Shiny app that's running on a different server. So it's not on this laptop. You can search for, you can do all the same stuff, and it's still pretty fast. And then for fun, we can go to the 1 million row table. So this is like why you would use service side rendering over client side, over the defaults. You don't want to blast your users with a million rows of data and put all that network bandwidth and break somebody's browser. So here's a million rows. Pagination is still fairly fast, fast enough. Search filtering is still very fast.

You don't want to blast your users with a million rows of data and put all that network bandwidth and break somebody's browser.

This is all, these 1 million rows are all in memory in this other server that I have. So it's not on my laptop. I'm doing all the searching, sorting. Sorting kind of lags a bit, but still, you can see, not too bad. As you probably know, this comes up a lot. How do I deliver to my user a big table? But I know there's no link to this yet.

So if I wanted, imagine someone's watching this in the future, the recording of it, where is this example going to live to learn more about? I have no idea yet, but hopefully it will be possible to find it from the websites. It'll be a pretty, it should be a pretty important feature. So I'll make sure you can find it.

And for what it's worth, I recall the table contest, or maybe it was the Shiny contest if I'm confusing things. I think it had a couple examples of kind of server-side with like pagination. Yeah, there's one really awesome example from, I can't remember the name, but they basically implemented server-side data processing in Reactable, even when it wasn't possible. So it was technically possible, kind of possible for it, but they did it. And the interesting thing about that was that it was using data that was not in memory. It wasn't like a SQLite database. And you could also like pull data from a third-party API. And that will also be eventually possible.

You can, you will be able to write your own custom backends to hook it up, hook up Reactable to like Postgres or SQLite database or some third-party API. But coming down the line, it's probably not going to be available immediately. That's an awesome example. That was a really cool table contest submission.

Well, to wind things down, thank you so much. For the folks who are sticking around to the end as well, thank you so much as well. This will be, I mean, I think it's immediately uploaded to YouTube, but I'll probably edit things a little bit to make sure the start and the stop have a nice beginning and end. And I'll make sure the description is kind of cut up well with good appropriate timestamps. So if you wanted to skip to a particular kind of set of content, you'll be able to.

But I do want to mention to the few people watching still now, right, this is the second pilot of the open-source chats. So I am really keen to hear your feedback on how these are going. So if you have feedback on this kind of open-source chat as a format and a thing that we'll be doing next year, please feel free to reach out to me. I'm at Curtis at Posit.co or rcb.com. So you can reach out to me on LinkedIn and on Twitter. I'm actually Economic Curtis as well. So I'm definitely keen to hear your positive and constructive feedback for kind of how to do these. You know, maybe what other technology we should use to help encourage discussion and sharing that sort of thing.

So with that, thank you so much, Greg, for doing this. It was awesome. We'll share all this demo and all of your other demos that you had arranged to highlight as well. Really appreciate it. Thank you so much for giving us an insight into how you made Reactable reality and how you're looking to improve it in the future. Thanks for hosting this. And thanks to everyone for watching. And also thanks to all the people who have posted something on GitHub. Everyone is oddly nice. Almost all of them come with a thank you note. So, yeah, thanks. Thanks a bunch. Toodaloo. Bye. Bye.