[This article was first published on Numbers around us - Medium, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.
Why Interactive TablesMatter
When people think of tables, they often picture static rows and columns, a no-frills way to present data. But interactive tables are a whole different story! These tables let users engage with the data directly, exploring it in ways that feel almost hands-on. Adding features like sorting, filtering, and searching transforms a simple table into a dynamic tool where readers can make their own discoveries.
So, why use interactive tables? Imagine you’re building a report for a large dataset. Instead of bogging down readers with endless rows and columns, you can let them filter out what they need or sort by their specific interests. For data professionals, this level of flexibility is invaluable — it allows anyone to find exactly what they’re looking for, without having to navigate through a mountain ofdata.
In this article, we’ll explore how R can help us create interactive tables across different contexts: from dashboards and reports to interactive web apps. With R’s powerful packages, like DT and reactable, you can bring tables to life with just a few lines of code. Let’s get started with the basics and work our way to some advanced features!
Getting Started with DT: DataTables inR
When it comes to building interactive tables in R, the DT package is a fantastic place to start. Developed as an interface to JavaScript’s DataTables library, DT enables you to quickly add interactive features to your tables without complex coding. This means you can create tables that support sorting, filtering, and navigating large datasets—all with minimal setup. Whether you’re designing a report, building a dashboard, or creating a web app, DT offers functionality that transforms static tables into dynamic data exploration tools.
One of the main appeals of DT is its ease of use. To get started, simply pass your dataset to DT::datatable(), and with just that, you’ll have a tablethat:
- Sorts each column by clicking the column header, allowing users to view data in their preferred order.
- Searches through all table content with a convenient search box above the table, so users can instantly locate specific information.
- Paginate large datasets, displaying a specified number of rows per page, making it easy to navigate through hundreds or thousands of rows without scrolling endlessly.
To see this in action, here’s a basic example using R’s built-in iris dataset. In this example, we’re creating a table that displays five rows perpage:
library(DT)# Creating a basic interactive tabledatatable(iris, options = list(pageLength = 5, autoWidth = TRUE))
In thiscode:
- pageLength = 5 sets the number of rows visible at once to five, which is especially useful for datasets with many rows. This setting allows users to page through rows smoothly without feeling overwhelmed by thedata.
- autoWidth = TRUE automatically adjusts column widths based on the data content, ensuring your table looks clean and well-organized.
This single line of code provides a fully interactive table that you can integrate into HTML-based documents, Shiny apps, or R Markdown reports. The table is easy to navigate, visually appealing, and functional. With DT, you can create a data table that allows users to explore your dataset directly and efficiently, all without having to build custom interfaces or write extensive JavaScript.
Customizing Tables in DT: More Control andStyle
The basic setup for DT tables is functional and simple, but if you want your tables to truly shine, DT offers a wealth of customization options. These let you adjust not only the appearance but also the interactivity of your tables, giving users more control over how they explore the data. Customization can be especially useful for tailored reports or web-based dashboards where readers may have specific needs, such as filtering by certain values or only viewing selectcolumns.
Adding Individual ColumnFilters
In many cases, a global search box is helpful, but if users need to filter specific columns independently, individual column filters make a big difference. For example, imagine you’re working with a dataset like iris, where users might want to see only rows with Sepal.Length above 5 or filter Species to show only specific categories. With DT, you can easily add filters for eachcolumn.
Here’s how to enable individual columnfilters:
datatable(iris, filter = "top", options = list(pageLength = 5))
By setting filter = “top”, DT automatically places a filter box at the top of each column, giving users the flexibility to search for values independently. This feature can be particularly useful when working with larger datasets where users need to narrow down rows by specific values or ranges, allowing themto:
- Filter categorical data: Users can select one or more categories (e.g., filtering Species for “setosa” or “versicolor”).
- Filter numeric data: Users can set numeric filters (e.g., showing only rows where Sepal.Width is greater than3).
- Search by partial matches: This can be helpful when columns contain text or unique identifiers.
These individual filters empower readers to explore data without cluttering the main table view. Instead of having to scan through all rows, users can focus on the exact data points they need, making for a highly personalized viewing experience.
Adjusting Page Length and TableLayout
When you’re working with large datasets, adjusting the page length — or the number of rows visible at once — improves readability and reduces scrolling. While displaying 5 rows per page works for smaller tables, larger datasets often benefit from showing more rows per page (e.g., 10 or 15), allowing users to view more data at a glance without extensive paging. You can set the page length to fit the specific needs of yourproject.
The layout, including table width and column visibility, can also affect readability. DT gives you control over layout settings through the dom parameter. This parameter specifies which elements (buttons, filters, search bars, etc.) are visible. Here’s how to adjust both page length and layoutoptions:
datatable( iris, extensions = 'Buttons', # Enable the Buttons extension options = list( pageLength = 10, dom = 'Bfrtip', autoWidth = TRUE, buttons = c('copy', 'csv', 'excel', 'pdf', 'print') # Specify the types of buttons ))
In thisexample:
- pageLength = 10 displays 10 rows at a time, making it easier to view more data perpage.
- dom = 'Bfrtip' customizes the toolbar layout. Each letter represents a different component:
- B: Buttons (for exporting or downloading data)
- f: Filter (the searchbar)
- r: Processing indicator (useful for largertables)
- t: Tableitself
- p: Pagination (for navigating pages)
This dom setting lets you control exactly which table features appear on the page, simplifying the view for readers. For example, if you’re using the table in a Shiny app and only need the table and pagination features, you could set dom = 'tp', which hides the search bar and toolbar to give a more streamlined look.
- autoWidth = TRUE automatically adjusts column widths to fit the content, which helps maintain a clean, proportional look without columns being too cramped or stretched.
- buttons = c('copy', 'csv', 'excel', 'pdf', 'print'): This argument specifies which export options to show in thetoolbar.
Adding Styling and Conditional Formatting
In addition to adjusting layout, DT allows you to style your tables to improve readability and focus attention on key values. For example, you may want to highlight high values in a “price” column, or use color to differentiate specific categories. DT supports conditional formatting using the formatStyle() function, which allows you to apply styles to individual cells based on conditions.
Here’s how you could apply conditional formatting to highlight values in the Sepal.Length column that exceed a certain threshold:
datatable(iris, options = list(pageLength = 10)) %>% formatStyle( 'Sepal.Length', backgroundColor = styleInterval(5.5, c('white', 'lightgreen')) )
In thisexample:
- styleInterval() sets intervals for conditional formatting. Here, all values in Sepal.Length above 5.5 will have a light green background, while values below remainwhite.
- This type of formatting is particularly useful when you want to make certain data stand out. For instance, highlighting high or low values in financial data, differentiating categories by color, or adding visual cues for outliers.
Conditional formatting and custom styling give your tables an added layer of professionalism, especially useful in reports or presentations where certain data points need emphasis.
These customization options within DT allow you to tailor the look, feel, and functionality of your tables, ensuring that readers can navigate and interpret the data effectively. Whether you’re fine-tuning pagination, adding individual filters, or applying styling for impact, DT offers plenty of ways to enhance both usability and aesthetics.
reactable: Creating Stylish Interactive Tables
While DT is a fantastic choice for basic interactive tables, reactable takes customization to a new level, allowing for highly flexible and visually polished tables. Built on React, reactable provides rich interactivity and seamless customization, including column-specific settings, themes, and row expansions. If you’re creating tables for dashboards, reports, or any application that demands a bit more styling, reactable is a powerful tool tohave.
With reactable, you can go beyond standard data displays by adding custom formats, colors, and even mini visualizations. Let’s start by creating a basic reactable table with the iris dataset and then dive into some customization options.
Creating a Basic reactable Table
Here’s a quick example of a basic interactive table using reactable:
library(reactable)# Basic reactable table with iris datasetreactable(iris, columns = list( Sepal.Length = colDef(name = "Sepal Length"), Sepal.Width = colDef(name = "Sepal Width"), Petal.Length = colDef(name = "Petal Length"), Petal.Width = colDef(name = "Petal Width"), Species = colDef(name = "Species")))
In thiscode:
- colDef() customizes each column with more readablenames.
- This setup gives you a clean, sortable table that lets users click column headers to sort data. The columns are also resizable by default, providing flexibility for users to adjust theview.
Advanced Customization withcolDef
One of the best features of reactable is the ability to define column-specific settings through colDef(), where you can set custom formatting, alignment, background colors, and even icons based on cell values. This makes it easy to highlight certain data points or apply thematic styling to fit your application’s design.
Let’s add a few customizations to the reactable table:
- We’ll style Species cells to includeicons.
- Format Sepal.Length to two decimal places with color indicators.
reactable(iris, columns = list( Sepal.Length = colDef( name = "Sepal Length", align = "center", cell = function(value) { if (value > 5) paste0("🌱 ", round(value, 2)) else round(value, 2) }, style = function(value) { if (value > 5) list(color = "green") else list(color = "black") } ), Species = colDef( cell = function(value) { if (value == "setosa") "🌸 Setosa" else value }, align = "center" )))
In thiscode:
- Custom Cell Content: In Sepal.Length, cells with values greater than 5 are prefixed with a small plant icon 🌱 and styled ingreen.
- Icons in Text Cells: For Species, we add a flower icon 🌸 for “setosa” values, making it more visually distinct.
- Alignment: By setting align = “center”, we ensure that the values appear centered in each cell, creating a cleanerlook.
Applying Themes andStyling
reactable also comes with several built-in themes, or you can create your own custom styles using CSS to match any design you’re working with. Here’s an example of how to apply the “compact” theme with striped rows, which gives your table a sleek, modernlook:
reactable( iris[1:30, ], searchable = TRUE, striped = TRUE, highlight = TRUE, bordered = TRUE, theme = reactableTheme( borderColor = "#dfe2e5", stripedColor = "#f6f8fa", highlightColor = "#fff000", cellPadding = "8px 12px", style = list(fontFamily = "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"), searchInputStyle = list(width = "100%") ))
This exampleadds:
- Striped Rows: Alternating row colors make it easier to read across large datasets.
- Highlighting: Selected rows are highlighted to improve navigation.
- Compact Layout: Reduces padding for a more compressed view, ideal for tables with manyrows.
With reactable, you have flexibility over everything from themes and icons to row expandability. The package is particularly suited for dashboards, apps, and reports where style and interactivity are both high priorities.
Integrating Interactive Tables inShiny
Interactive tables become even more powerful in the context of Shiny apps, where they can respond to user inputs in real-time. By integrating tables from DT or reactable into a Shiny app, you can allow users to filter, sort, and explore data while responding to additional controls, like sliders or dropdowns. This flexibility makes Shiny ideal for creating dashboards, reports, or custom data exploration tools.
Creating a Basic Shiny App withDT
Let’s start with a simple Shiny app that uses DT to display an interactive table. In this example, we’ll use a slider to allow users to filter rows based on Sepal Length from the irisdataset:
library(shiny)library(DT)# Define the UIui <- fluidPage( titlePanel("Iris Dataset Interactive Table"), sidebarLayout( sidebarPanel( sliderInput("sepal", "Filter by Sepal Length:", min = min(iris$Sepal.Length), max = max(iris$Sepal.Length), value = c(min(iris$Sepal.Length), max(iris$Sepal.Length))) ), mainPanel( DTOutput("table") ) ))# Define the server logicserver <- function(input, output) { output$table <- renderDT({ # Filter the data based on slider input filtered_data <- iris[iris$Sepal.Length >= input$sepal[1] & iris$Sepal.Length <= input$sepal[2], ] datatable(filtered_data, options = list(pageLength = 5)) })}# Run the application shinyApp(ui = ui, server = server)
In thisexample:
- Slider Input: The sliderInput in the UI allows users to filter the table by Sepal Length values. The slider is set to the range of Sepal Length in the dataset, so users can choose any range within thosevalues.
- Filtering Data in Server: In the server function, we filter iris based on the slider values and then render the filtered table using renderDT().
- Table Output: DTOutput displays the filtered table in the main panel, showing 5 rows perpage.
This basic Shiny app provides users with control over what they see, allowing them to explore the dataset interactively with thefilter.
Using reactable for Customization inShiny
If you want even more control over the table’s appearance and functionality, you can use reactable in your Shiny app. Here’s an example of a similar Shiny app with reactable, where we add an input for selecting specific Species to filterby:
library(shiny)library(reactable)# Define the UIui <- fluidPage( titlePanel("Interactive Table with reactable"), sidebarLayout( sidebarPanel( selectInput("species", "Select Species:", choices = c("All", unique(as.character(iris$Species)))), sliderInput("sepal", "Filter by Sepal Length:", min = min(iris$Sepal.Length), max = max(iris$Sepal.Length), value = c(min(iris$Sepal.Length), max(iris$Sepal.Length))) ), mainPanel( reactableOutput("reactable_table") ) ))# Define the server logicserver <- function(input, output) { output$reactable_table <- renderReactable({ # Filter data based on user inputs filtered_data <- iris[iris$Sepal.Length >= input$sepal[1] & iris$Sepal.Length <= input$sepal[2], ] if (input$species != "All") { filtered_data <- filtered_data[filtered_data$Species == input$species, ] } # Render the reactable table reactable(filtered_data, columns = list( Sepal.Length = colDef(name = "Sepal Length"), Sepal.Width = colDef(name = "Sepal Width"), Petal.Length = colDef(name = "Petal Length"), Petal.Width = colDef(name = "Petal Width"), Species = colDef(name = "Species") ), striped = TRUE, highlight = TRUE) })}# Run the application shinyApp(ui = ui, server = server)
In this enhancedversion:
- Species Filter: The selectInput lets users choose a specific species or view all species in the table. This input is especially useful for focusing on subsets within categorical data.
- Slider and Select Filter Combination: We filter by Sepal Length range and Species, providing two levels of control over what userssee.
- reactable Styling: striped = TRUE and highlight = TRUE options add styling to make the table easier to read and navigate.
With reactable in Shiny, users get a polished table with styling and functionality that can adapt dynamically to any dataset they’re exploring.
Enhancing Tables with Advanced Extensions
Now that we’ve covered interactivity, let’s take a look at some tricky extensions that can add advanced customization, small in-table visualizations, and complex formatting to your tables. While they may not add interactivity in the same way as DT or reactable, these packages help you create visually stunning tables that can make your data come alive in reports and presentations. Here’s a rundown of some of the best tools for taking your tables from basic to brilliant.
kableExtra: Advanced Formatting for MarkdownTables
If you’re using knitr::kable() to create tables in R Markdown, kableExtra is a perfect companion. It provides advanced styling options to add borders, bold headers, row grouping, and even color coding, making your tables far more visually appealing and readable.
Example: Creating a Styled Table with kableExtra
In thisexample:
- kable_styling() adds bootstrap options to apply striping, hovering, and condensed spacing.
- row_spec() makes the header row bold, with a custom color and background, drawing the reader’s attention to columntitles.
- column_spec() applies bold formatting to the first column to distinguish it visually.
- add_header_above() creates a merged header spanning multiplecolumns.
gtExtras: Adding Visuals to gtTables
If you’re using gt for creating high-quality tables, gtExtras can help you take it to the next level. This extension enables you to add sparklines, bar charts, lollipop charts, and other mini visualizations directly within cells. It’s a great way to add trend data, comparisons, or distribution insights to your tables without relying on externalplots.
Example: Adding Sparklines and Mini Bar Charts withgtExtras
library(gt)library(gtExtras)library(dplyr)# Prepare example data with a trend for each rowiris_summary <- iris %>% group_by(Species) %>% summarize( Avg_Sepal_Length = mean(Sepal.Length), Sepal_Length_Trend = list(sample(4:8, 10, replace = TRUE)) )# Create a gt table with sparklines for trendsgt(iris_summary) %>% gt_plt_sparkline(Sepal_Length_Trend) %>% tab_header(title = "Iris Species Summary", subtitle = "Including Sepal Length Trends")
In thisexample:
- gt_plt_sparkline() adds a sparkline within the Sepal_Length_Trend column, showing trends for eachspecies.
- tab_header() provides a title and subtitle forcontext.
With gtExtras, your tables can communicate more than just static data — they can tell a story by visually showcasing trends and distributions right in the tablecells.
formattable: In-Cell Visualizations for DataFrames
The formattable package is another powerful tool for creating visually enhanced tables, particularly useful for adding color-coded scales, bars, and visual indicators based on cell values. It’s designed to help you visualize comparisons directly within a data.frame, making it ideal for quick dashboards orreports.
Example: Adding Color Scales and Mini Bars with formattable
library(formattable)# Create a formattable table with in-cell color scales and barsformattable( iris, list( Sepal.Length = color_tile("lightblue", "lightgreen"), Sepal.Width = color_bar("pink"), Petal.Length = formatter("span", style = x ~ style(font.weight = "bold", color = ifelse(x > 4, "red", "black"))) ))
In thisexample:
- color_tile() applies a background color gradient to Sepal.Length, making it easy to compare values visually.
- color_bar() adds a color bar in Sepal.Width cells, giving a quick visual cue of relativesize.
- formatter() applies conditional font styling to Petal.Length, highlighting values above a threshold inred.
flextable: Creating Word and PowerPoint-Compatible Tables
For reports destined for Word or PowerPoint, flextable is a robust choice, offering rich customization options that ensure your tables look polished in these formats. With flextable, you can merge cells, add images, and apply various themes, making it a go-to option for tables that need to be embedded in professional documents.
Example: Customizing a Table for Word with flextable
library(flextable)# Create a flextable with merged headers and stylingft <- flextable(head(iris))ft <- set_header_labels(ft, Sepal.Length = "Sepal Length", Sepal.Width = "Sepal Width")ft <- add_header_row(ft, values = c("Flower Measurements"), colspan = 4)ft <- theme_vanilla(ft)ft <- autofit(ft)# Save to Word# save_as_docx(ft, path = "iris_table.docx")ft
Each of these packages offers unique strengths for customizing tables, making them valuable tools for any R user aiming to create more engaging, insightful, and visually appealing tables. Whether you’re building tables with in-cell visualizations, integrating trends with sparklines, or creating print-ready documents, these extensions let you go beyond basics and add a professional polish to yourwork.
Bringing Data to Life with Interactive and EnhancedTables
Tables may seem simple, but they’re one of the most powerful tools for data communication. In this article, we’ve explored how to transform tables from static rows and columns into dynamic, interactive tools using R’s DT and reactable packages. Whether in a Shiny app or a standalone report, these tables allow readers to explore, filter, and engage with data in real-time, making data insights accessible to everyone.
And when interactivity isn’t needed, we’ve looked at advanced table extensions like kableExtra, gtExtras, formattable, and flextable, which bring tables to life with beautiful formatting, in-cell visualizations, and high-quality styling options. These tools ensure your tables aren’t just functional—they’re visually compelling and professionally polished.
By combining interactivity with powerful formatting extensions, you have everything you need to craft tables that both captivate and communicate effectively. Now, you’re ready to bring data to life, one table at atime!
Data at Your Fingertips: Crafting Interactive Tables in R was originally published in Numbers around us on Medium, where people are continuing the conversation by highlighting and responding to this story.
Related
To leave a comment for the author, please follow the link and comment on their blog: Numbers around us - Medium.
R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.