{"id":380284,"date":"2023-11-24T05:51:37","date_gmt":"2023-11-24T11:51:37","guid":{"rendered":"https:\/\/wordpress.appsilon.com\/?p=21719"},"modified":"2023-11-24T05:51:37","modified_gmt":"2023-11-24T11:51:37","slug":"reactable-extras-0-2-0-release-enhanced-interactivity-and-efficiency-for-shiny-apps","status":"publish","type":"post","link":"https:\/\/www.r-bloggers.com\/2023\/11\/reactable-extras-0-2-0-release-enhanced-interactivity-and-efficiency-for-shiny-apps\/","title":{"rendered":"reactable.extras 0.2.0 Release: Enhanced Interactivity and Efficiency for Shiny Apps"},"content":{"rendered":"<!-- \r\n<div style=\"min-height: 30px;\">\r\n[social4i size=\"small\" align=\"align-left\"]\r\n<\/div>\r\n-->\r\n\r\n<div style=\"border: 1px solid; background: none repeat scroll 0 0 #EDEDED; margin: 1px; font-size: 12px;\">\r\n[This article was first published on  <strong><a href=\"https:\/\/appsilon.com\/reactable-extras-enhancing-shiny-applications\/\"> Tag: r - Appsilon | Enterprise R Shiny Dashboards<\/a><\/strong>, and kindly contributed to <a href=\"https:\/\/www.r-bloggers.com\/\" rel=\"nofollow\">R-bloggers<\/a>].  (You can report issue about the content on this page <a href=\"https:\/\/www.r-bloggers.com\/contact-us\/\">here<\/a>)\r\n<hr>Want to share your content on R-bloggers?<a href=\"https:\/\/www.r-bloggers.com\/add-your-blog\/\" rel=\"nofollow\"> click here<\/a> if you have a blog, or <a href=\"http:\/\/r-posts.com\/\" rel=\"nofollow\"> here<\/a> if you don't.\r\n<\/div>\n<div><img width=\"450\" src=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Extras.webp\" class=\"attachment-medium size-medium wp-post-image\" alt=\"\" decoding=\"async\" style=\"margin-bottom: 15px;\" loading=\"lazy\" \/><\/div><p>We are thrilled to announce the release of <a href=\"https:\/\/appsilon.github.io\/reactable.extras\/\" rel=\"nofollow\" target=\"_blank\"><code>reactable.extras<\/code><\/a>, which is now available for seamless integration into your Shiny applications, marking its debut as a significant release on <a href=\"https:\/\/cran.r-project.org\/package=reactable.extras\" rel=\"nofollow\" target=\"_blank\">CRAN<\/a>.<\/p>\n<p>With <code>reactable.extras<\/code>, you can elevate your data tables to new heights, <strong>simplifying the management of interactive components<\/strong> within <code>reactable<\/code> tables, offering even more <strong>enhanced functionality<\/strong> and a <strong>smoother user experience<\/strong>.<\/p>\n<h3>Table of Contents<\/h3>\n<ul>\n<li><a href=\"https:\/\/appsilon.com\/reactable-extras-enhancing-shiny-applications\/#choose-reactables\" rel=\"nofollow\" target=\"_blank\">Why Choose <code>reactable.extras<\/code>?<\/a><\/li>\n<li><a href=\"https:\/\/appsilon.com\/reactable-extras-enhancing-shiny-applications\/#install\" rel=\"nofollow\" target=\"_blank\">Installing the Package<\/a><\/li>\n<li><a href=\"https:\/\/appsilon.com\/reactable-extras-enhancing-shiny-applications\/#server-side\" rel=\"nofollow\" target=\"_blank\">Server-Side Processing<\/a><\/li>\n<li><a href=\"https:\/\/appsilon.com\/reactable-extras-enhancing-shiny-applications\/#custom-inputs\" rel=\"nofollow\" target=\"_blank\">Custom Inputs<\/a><\/li>\n<li><a href=\"https:\/\/appsilon.com\/reactable-extras-enhancing-shiny-applications\/#explore-tools\" rel=\"nofollow\" target=\"_blank\">Explore More Open-Source Tools for Your Shiny Projects<\/a><\/li>\n<\/ul>\n<h2 id=\"choose-reactables\">Why Choose reactable.extras?<\/h2>\n<p><a href=\"https:\/\/glin.github.io\/reactable\/\" rel=\"nofollow\" target=\"_blank\"><code>reactable<\/code><\/a> is known for creating interactive, feature-rich tables in Shiny applications. With <code>reactable.extras<\/code>, you can take your <code>reactable<\/code> tables to the next level by adding custom inputs, server-side rendering and more:<\/p>\n<p><strong>Custom Inputs:<\/strong> <code>reactable.extras<\/code> incorporate custom inputs within <code>reactable<\/code> data tables. Supported input types include text input, buttons, dropdowns, dates, and checkboxes. You can now create interactive data tables that respond to user inputs with ease.<\/p>\n<div style=\"width: 1028px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-21719-1\" width=\"450\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/image3.webm?_=1\" \/><a href=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/image3.webm\" rel=\"nofollow\" target=\"_blank\">https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/image3.webm<\/a><\/video><\/div>\n<p>\u00a0<\/p>\n<p><strong>Server-side processing:<\/strong> <code>reactable.extras<\/code> renders only a subset of large data in the server memory. This almost instantly renders the desired page and keeps the amount of memory used in the browser minimal.<\/p>\n<h2 id=\"install\">Installing the Package<\/h2>\n<ul>\n<li>Install the <code>reactable.extras<\/code> package:<\/li>\n<\/ul>\n<pre>\r\ninstall.packages(\u201creactable.extras\u201d)\r\n<\/pre>\n<ul>\n<li>After <a href=\"https:\/\/github.com\/Appsilon\/reactable.extras#how-to-install\" rel=\"nofollow\" target=\"_blank\">installation<\/a>, you can simply load <code>reactable.extras<\/code>:<\/li>\n<\/ul>\n<pre>\r\nlibrary(reactable.extras)\r\n<\/pre>\n<h2 id=\"server-side\">Server-Side Processing<\/h2>\n<p>Rendering a <code>reactable<\/code> with a lot of data can be inefficient. The initial loading will take some time, and a lot of memory will be thrown into the browser.<\/p>\n<p>A more efficient approach is to render only the data that is needed to be displayed on a single page of a table.<\/p>\n<p><code>reactable_extras_ui()<\/code> and <code>reactable_extras_server()<\/code> is a wrapper for <code>reactable::reactableOutput()<\/code> and <code>reactable::renderReactable({reactable(...)})<\/code>.<\/p>\n<p>It renders only a subset of large data in the server memory. This almost instantly renders the desired page and keeps the amount of memory used in the browser minimal.<\/p>\n<p><strong>Consider this example data:<\/strong><\/p>\n<pre>\r\nlibrary(shiny)\r\nlibrary(reactable)\r\nlibrary(reactable.extras)\r\n\r\n\r\nmtcars_ultra &lt;- purrr::map(\r\n  seq(1L, 20000L, by = 1L),\r\n  ~ {\r\n    temp_df &lt;- mtcars\r\n    temp_df$make &lt;- rownames(temp_df)\r\n    rownames(temp_df) &lt;- NULL\r\n    temp_df &lt;- dplyr::mutate(temp_df, id_row = paste0(&quot;id_&quot;, dplyr::row_number(), &quot;_&quot;, .x)) temp_df }, .progress = TRUE ) |&gt;\r\n  purrr::list_rbind()\r\n<\/pre>\n<div id=\"attachment_22027\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" aria-describedby=\"caption-attachment-22027\" decoding=\"async\" class=\"wp-image-22027 size-full\" src=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/pasted-image-0-1.webp\" alt=\"A screenshot of a data table containing automotive information, including miles per gallon, cylinders, displacement, horsepower, and other car specifications, with an indication of '1 of 40000' suggesting a large dataset.\" width=\"450\" \/><p id=\"caption-attachment-22027\" class=\"wp-caption-text\">Sample Data: Automotive Specifications Table<\/p><\/div>\n<p>And compare the difference in initial load time and amount of memory used in the browser when loading all the data at once vs loading only the data needed for the page.<\/p>\n<h3>App 1\u00a0(Rendering All Data at Once)<\/h3>\n<div id=\"attachment_22091\" style=\"width: 1926px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" aria-describedby=\"caption-attachment-22091\" decoding=\"async\" class=\"size-full wp-image-22091\" src=\"https:\/\/i1.wp.com\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/full-data-rendered.gif?w=450&#038;ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><p id=\"caption-attachment-22091\" class=\"wp-caption-text\">Full Data Rendered<\/p><\/div>\n<p>We\u2019ll create a simple interactive table to show the dataset <em>mtcars_ultra<\/em>. This table will have three columns labelled \u201cMiles per Gallon\u201d, \u201cCylinders\u201d, and \u201cDisplacement\u201d. This table will show only 16 rows of data at a time, however, it will try to load all the data at once, which could slow down the webpage.<\/p>\n<pre>\r\n# All of the data rendered all at once\r\nshinyApp(\r\n  ui = reactableOutput(&quot;test&quot;), \r\n  server = function(input, output) {\r\n    output$test &lt;- renderReactable({\r\n      reactable(\r\n        data = mtcars_ultra,\r\n        columns = list(\r\n          mpg = colDef(name = &quot;Miles per Gallon&quot;),\r\n          cyl = colDef(name = &quot;Cylinders&quot;),\r\n          disp = colDef(name = &quot;Displacement&quot;)\r\n        ),\r\n        defaultPageSize = 16\r\n      )\r\n    })\r\n  }\r\n)\r\n<\/pre>\n<h3>App 2 (Server-Side Processing)<\/h3>\n<div id=\"attachment_22093\" style=\"width: 1924px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" aria-describedby=\"caption-attachment-22093\" decoding=\"async\" class=\"size-full wp-image-22093\" src=\"https:\/\/i0.wp.com\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/server-side-processing.gif?w=450&#038;ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><p id=\"caption-attachment-22093\" class=\"wp-caption-text\">Server Side Processing<\/p><\/div>\n<p>Here we\u2019re creating the same table, however, this one is smarter with large datasets such as <em>mtcars_ultra<\/em>. Instead of loading all the data at once, it only loads a portion of the data that\u2019s needed for the current page view. This makes it quicker and more memory-efficient as it\u2019s set up to handle a large number of pages efficiently with <code>reactable_extras<\/code>.<\/p>\n<pre>\r\n# Only the subset of the data needed for the page is rendered\r\nshinyApp(\r\n  ui = reactable_extras_ui(&quot;test&quot;),\r\n  server = function(input, output, session) {\r\n    reactable_extras_server(\r\n      &quot;test&quot;,\r\n      data = mtcars_ultra,\r\n      columns = list(\r\n        mpg = colDef(name = &quot;Miles per Gallon&quot;),\r\n        cyl = colDef(name = &quot;Cylinders&quot;),\r\n        disp = colDef(name = &quot;Displacement&quot;)\r\n      ),\r\n      total_pages = 4e4\r\n    )\r\n  }\r\n)\r\n<\/pre>\n<h2 id=\"custom-inputs\">Custom Inputs<\/h2>\n<p>You can use custom inputs inside your <code>reactable<\/code> column. Custom inputs can significantly enhance the interactivity and functionality of tables in your web applications. For instance, there may be scenarios where you need to allow users to edit values directly within a table, toggle settings, or make selections via dropdown menus without leaving the context of the data they\u2019re working with. <code>reactable.extras<\/code> offers a <strong>seamless way to integrate these interactive elements directly into your <code>reactable<\/code> tables<\/strong>.<\/p>\n<h4><strong>Supported types for now:<\/strong><\/h4>\n<ul>\n<li>text input: text_extra<\/li>\n<li>button: button_extra<\/li>\n<li>dropdown: dropdown_extra<\/li>\n<li>date: date_extra<\/li>\n<li>checkbox: checkbox_extra<\/li>\n<li>tooltips: tooltip_extra<\/li>\n<\/ul>\n<p><strong>It\u2019s possible to apply additional styling to your inputs by passing the class argument:<\/strong><\/p>\n<pre>\r\ncheckbox_extra(&quot;check&quot;, class = &quot;checkbox-extra&quot;)\r\n<\/pre>\n<h3>With Styling<\/h3>\n<div id=\"attachment_22036\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" aria-describedby=\"caption-attachment-22036\" decoding=\"async\" class=\"size-full wp-image-22036\" src=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/with-styling.webp\" alt=\"Screenshot of a data table with car information including Manufacturer, Model, Type, Minimum Price, Date, and a Check column with checkboxes, some of which are marked with green checks.\" width=\"450\" \/><p id=\"caption-attachment-22036\" class=\"wp-caption-text\">Car Inventory Checklist with Pricing and Dates<\/p><\/div>\n<pre>\r\n\/* Default style for checkboxes *\/\r\n.checkbox-extra {\r\n    width: 20px;\r\n    height: 20px;\r\n    border: 2px solid grey; \/* Grey border *\/\r\n    border-radius: 5px;\r\n    appearance: none; \/* Remove default checkbox style *\/\r\n    background-color: white; \/* White background *\/\r\n}\r\n\r\n\/* Style when checkbox is checked *\/\r\n.checkbox-extra:checked {\r\n    background-color: #4CAF50; \/* Green background *\/\r\n    border-color: #4CAF50; \/* Green border *\/\r\n}\r\n<\/pre>\n<p><strong>Remember to correctly link the CSS file in your Shiny app:<\/strong><\/p>\n<pre>\r\nui &lt;- fluidPage(\r\n    tags$head(\r\n        tags$link(rel = &quot;stylesheet&quot;, type = &quot;text\/css&quot;, href = &quot;custom_styles.css&quot;)\r\n    ),\r\n    # ... rest of your UI elements ...\r\n)\r\n<\/pre>\n<h3>Without Styling<\/h3>\n<div id=\"attachment_22038\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" aria-describedby=\"caption-attachment-22038\" decoding=\"async\" class=\"size-full wp-image-22038\" src=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/without-styling.webp\" alt=\"A data table with columns for Manufacturer, Model, Type, Minimum Price, Date, and a Check column with purple checkmarks in some rows.\" width=\"450\" \/><p id=\"caption-attachment-22038\" class=\"wp-caption-text\">Car Inventory Data Table with Selection Checkmarks<\/p><\/div>\n<p><strong>Also, it\u2019s important to import JavaScript dependencies by adding to UI:<\/strong><\/p>\n<pre>\r\nreactable.extras::reactable_extras_dependency()\r\n<\/pre>\n<p>All events of your inputs will be tracked and can be used in your shiny server.<\/p>\n<h4>Example application:<\/h4>\n<div style=\"width: 824px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-21719-2\" width=\"450\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Screen-Recording-2023-11-12-at-11.55.55-PM-1.webm?_=2\" \/><a href=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Screen-Recording-2023-11-12-at-11.55.55-PM-1.webm\" rel=\"nofollow\" target=\"_blank\">https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Screen-Recording-2023-11-12-at-11.55.55-PM-1.webm<\/a><\/video><\/div>\n<pre>\r\nlibrary(shiny)\r\nlibrary(reactable)\r\nlibrary(reactable.extras)\r\n\r\n# Preparing the test data\r\ndf &lt;- MASS::Cars93[, 1:4]\r\ndf$Date &lt;- sample(\r\n seq(as.Date(&quot;2020\/01\/01&quot;), as.Date(&quot;2023\/01\/01&quot;), by = &quot;day&quot;),\r\n  nrow(df)\r\n)\r\ndf$Check &lt;- sample(c(TRUE, FALSE), nrow(df), TRUE)\r\n\r\n# Helper function for string formatting\r\nstring_list &lt;- function(values) {\r\n  paste0(&quot;{&quot;, paste0(names(values), &quot; : &quot;, unlist(values), collapse = &quot;, &quot;), &quot;}&quot;)\r\n}\r\n\r\n# Shiny app\r\nshinyApp(\r\n  ui = fluidPage(\r\n    reactable_extras_dependency(),\r\n    reactableOutput(&quot;react&quot;),\r\n    hr(),\r\n    textOutput(&quot;date_text&quot;),\r\n    textOutput(&quot;button_text&quot;),\r\n    textOutput(&quot;check_text&quot;),\r\n    textOutput(&quot;dropdown_text&quot;),\r\n    textOutput(&quot;text&quot;)\r\n  ),\r\n  server = function(input, output) {\r\n    output$react &lt;- renderReactable({\r\n      reactable(\r\n        df,\r\n        columns = list(\r\n          Manufacturer = colDef(cell = button_extra(id = &quot;button&quot;, class = &quot;button-extra&quot;)),\r\n          Check = colDef(cell = checkbox_extra(id = &quot;check&quot;, class = &quot;checkbox-extra&quot;), align = &quot;left&quot;),\r\n          Date = colDef(cell = date_extra(id = &quot;date&quot;, class = &quot;date-extra&quot;)),\r\n          Type = colDef(cell = dropdown_extra(id = &quot;dropdown&quot;, unique(df$Type), class = &quot;dropdown-extra&quot;)),\r\n          Model = colDef(cell = text_extra(id = &quot;text&quot;))\r\n        )\r\n      )\r\n    })\r\n\r\n    # Render text outputs\r\n    output_text_render &lt;- function(id) {\r\n      output[[id]] &lt;- renderText({\r\n        req(input[[id]])\r\n        paste0(id, &quot;: &quot;, string_list(input[[id]]))\r\n      })\r\n    }\r\n\r\n    lapply(c(&quot;date_text&quot;, &quot;button_text&quot;, &quot;check_text&quot;, &quot;dropdown_text&quot;, &quot;text&quot;), output_text_render)\r\n  }\r\n)\r\n<\/pre>\n<h4>You can also use <code>tippy<\/code> to add tooltips to your <code>reactable<\/code> columns:<\/h4>\n<p>We have implemented tooltips in our application using <a href=\"https:\/\/atomiks.github.io\/tippyjs\/\" rel=\"nofollow\" target=\"_blank\">Tippy.js<\/a>, a JavaScript library designed for creating interactive and customizable tooltips.<\/p>\n<p>For example, let\u2019s build an interactive table displaying car data. We will utilize the <code>reactable.extras<\/code> package and tippy to add tooltips to table headers. When users hover over headers like \u201cManufacturer\u201d or \u201cCheck,\u201d tooltips provide additional context, such as \u201cManufacturer type\u201d or \u201cCheckbox.\u201d<\/p>\n<p>This enhances the app\u2019s interactivity and user experience as it offers more information directly to the UI without cluttering the view.<\/p>\n<div style=\"width: 664px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-21719-3\" width=\"450\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Screen-Recording-2023-11-06-at-9.45.41-AM-1.webm?_=3\" \/><a href=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Screen-Recording-2023-11-06-at-9.45.41-AM-1.webm\" rel=\"nofollow\" target=\"_blank\">https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Screen-Recording-2023-11-06-at-9.45.41-AM-1.webm<\/a><\/video><\/div>\n<pre>\r\nlibrary(shiny)\r\nlibrary(reactable)\r\nlibrary(reactable.extras)\r\n\r\ndf &lt;- MASS::Cars93[, 1:4]\r\ndf$Date &lt;- sample(seq(as.Date(&quot;2020\/01\/01&quot;), as.Date(&quot;2023\/01\/01&quot;), by = &quot;day&quot;), nrow(df))\r\ndf$Check &lt;- sample(c(TRUE, FALSE), nrow(df), TRUE)\r\n\r\nshinyApp(\r\n  ui = fluidPage(\r\n    reactable_extras_dependency(),\r\n    reactable_extras_ui(&quot;table&quot;),\r\n    hr(),\r\n    textOutput(&quot;date_text&quot;),\r\n    textOutput(&quot;button_text&quot;),\r\n    textOutput(&quot;check_text&quot;),\r\n    textOutput(&quot;dropdown_text&quot;),\r\n    textOutput(&quot;text&quot;)\r\n  ),\r\n  server = function(input, output) {\r\n    reactable_extras_server(\r\n      &quot;table&quot;,\r\n      data = df,\r\n      columns = list(\r\n        Manufacturer = colDef(\r\n          header = tooltip_extra(content = &quot;Manufacturer type&quot;),\r\n          cell = button_extra(&quot;button&quot;)\r\n        ),\r\n        Check = colDef(\r\n          header = tooltip_extra(content = &quot;Checkbox&quot;),\r\n          cell = checkbox_extra(&quot;check&quot;),\r\n          align = &quot;left&quot;\r\n        ),\r\n        Date = colDef(\r\n          header = tooltip_extra(content = &quot;Date input&quot;),\r\n          cell = date_extra(&quot;date&quot;)\r\n        ),\r\n        Type = colDef(\r\n          header = tooltip_extra(content = &quot;Type dropdown&quot;),\r\n          cell = dropdown_extra(&quot;dropdown&quot;, unique(df$Type))\r\n        ),\r\n        Model = colDef(\r\n          header = tooltip_extra(content = &quot;Model input&quot;),\r\n          cell = text_extra(&quot;text&quot;)\r\n        )\r\n      )\r\n    )\r\n  }\r\n)\r\n<\/pre>\n<h2>Combine reactable functionalities<\/h2>\n<p>Let\u2019s build a Shiny app that leverages the <code>reactable<\/code> and <code>reactable.extras<\/code> packages to present an interactive table that allows users to filter, search, and select multiple rows within a dataset of 1000 entries.<\/p>\n<p>Each entry has an ID, SKU number, action status, and registration date. Custom buttons are integrated into the \u2018Actions\u2019 column, and a date input is provided for the \u2018Registered\u2019 column for enhanced interactivity.<\/p>\n<p>Additionally, the UI includes buttons for users to select specific rows, clear selections, and navigate directly to the third page of the table. The server logic handles these interactive features by observing button clicks and updating the table accordingly, allowing for a dynamic user experience.<\/p>\n<div style=\"width: 702px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-21719-4\" width=\"450\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Screen-Recording-2023-11-06-at-9.21.22-AM-1.webm?_=4\" \/><a href=\"https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Screen-Recording-2023-11-06-at-9.21.22-AM-1.webm\" rel=\"nofollow\" target=\"_blank\">https:\/\/wordpress.appsilon.com\/wp-content\/uploads\/2023\/11\/Screen-Recording-2023-11-06-at-9.21.22-AM-1.webm<\/a><\/video><\/div>\n<pre>\r\nlibrary(shiny)\r\nlibrary(reactable)\r\nlibrary(reactable.extras)\r\n\r\n\r\ndata &lt;- data.frame(\r\n  ID = 1:1000,\r\n  SKU_Number = paste0(&quot;SKU &quot;, 1:1000),\r\n  Actions = rep(c(&quot;Updated&quot;, &quot;Initialized&quot;), times = 20),\r\n  Registered = as.Date(&quot;2023\/1\/1&quot;)\r\n)\r\n\r\n\r\nui &lt;- fluidPage(\r\n  # Include reactable.extras in your UI\r\n  reactable_extras_dependency(),\r\n  actionButton(&quot;select_btn&quot;, &quot;Select rows&quot;),\r\n  actionButton(&quot;clear_btn&quot;, &quot;Clear selection&quot;),\r\n  actionButton(&quot;page_btn&quot;, &quot;Change to page 3&quot;),\r\n  reactableOutput(&quot;table&quot;)\r\n)\r\n\r\n\r\nserver &lt;- function(input, output, session) {\r\n  output$table &lt;- renderReactable({\r\n    # Create a reactable table with enhanced features\r\n    reactable(\r\n      data,\r\n      filterable = TRUE,\r\n      searchable = TRUE,\r\n      selection = &quot;multiple&quot;,\r\n      columns = list(\r\n        ID = colDef(name = &quot;ID&quot;),\r\n        SKU_Number = colDef(name = &quot;SKU_Number&quot;),\r\n        Actions = colDef(\r\n          name = &quot;Actions&quot;,\r\n          cell = button_extra(&quot;button&quot;, class = &quot;btn btn-primary&quot;)\r\n        ),\r\n        Registered = colDef(\r\n          cell = date_extra(&quot;Registered&quot;, class = &quot;date-extra&quot;)\r\n        )\r\n      )\r\n    )\r\n  })\r\n  \r\n  observeEvent(input$select_btn, {\r\n    # Select rows\r\n    updateReactable(&quot;table&quot;, selected = c(1, 3, 5))\r\n  })\r\n  \r\n  observeEvent(input$clear_btn, {\r\n    # Clear row selection\r\n    updateReactable(&quot;table&quot;, selected = NA)\r\n  })\r\n  \r\n  observeEvent(input$page_btn, {\r\n    # Change current page\r\n    updateReactable(&quot;table&quot;, page = 3)\r\n  })\r\n  \r\n}\r\n\r\n\r\nshinyApp(ui, server)\r\n<\/pre>\n<h2 id=\"explore-tools\">Explore More Open-Source Tools for Your Shiny Projects<\/h2>\n<p><code>reactables.extras<\/code> provides an <strong>improved user satisfaction<\/strong> for customer-facing apps, <strong>optimizes the handling of large datasets<\/strong> with reduced strain on client-side resources and serves as a <strong>cost-effective solution<\/strong> (reduced server load and optimized memory usage).<\/p>\n<p>Be sure to head over to the <a href=\"https:\/\/rhinoverse.dev\/#rhino\" rel=\"nofollow\" target=\"_blank\">Rhinoverse<\/a> to explore more open-source tools for your Shiny project. You can find more resources like tutorials and documentation on <code>reactable.extras<\/code> in Shiny on the <a href=\"https:\/\/appsilon.github.io\/reactable.extras\/\" rel=\"nofollow\" target=\"_blank\"><strong>reactable.extras page<\/strong><\/a>.<\/p>\n<p>If you find value in these open-source packages, be sure to give them a star on <a href=\"https:\/\/github.com\/Appsilon\/reactable.extras\" rel=\"nofollow\" target=\"_blank\">GitHub<\/a>. That lets us know we\u2019re on the right path toward serving you and the fellow R Shiny community. And, of course, if you have feedback or need assistance getting started, <a href=\"https:\/\/appsilon.com\/#contact\" rel=\"nofollow\" target=\"_blank\">reach out<\/a>!<\/p>\n<p>The post appeared first on appsilon.com\/blog\/.<\/p>\n\n<div style=\"border: 1px solid; background: none repeat scroll 0 0 #EDEDED; margin: 1px; font-size: 13px;\">\r\n<div style=\"text-align: center;\">To <strong>leave a comment<\/strong> for the author, please follow the link and comment on their blog: <strong><a href=\"https:\/\/appsilon.com\/reactable-extras-enhancing-shiny-applications\/\"> Tag: r - Appsilon | Enterprise R Shiny Dashboards<\/a><\/strong>.<\/div>\r\n<hr \/>\r\n<a href=\"https:\/\/www.r-bloggers.com\/\" rel=\"nofollow\">R-bloggers.com<\/a> offers <strong><a href=\"https:\/\/feedburner.google.com\/fb\/a\/mailverify?uri=RBloggers\" rel=\"nofollow\">daily e-mail updates<\/a><\/strong> about <a title=\"The R Project for Statistical Computing\" href=\"https:\/\/www.r-project.org\/\" rel=\"nofollow\">R<\/a> news and tutorials about <a title=\"R tutorials\" href=\"https:\/\/www.r-bloggers.com\/how-to-learn-r-2\/\" rel=\"nofollow\">learning R<\/a> and many other topics. <a title=\"Data science jobs\" href=\"https:\/\/www.r-users.com\/\" rel=\"nofollow\">Click here if you're looking to post or find an R\/data-science job<\/a>.\r\n\r\n<hr>Want to share your content on R-bloggers?<a href=\"https:\/\/www.r-bloggers.com\/add-your-blog\/\" rel=\"nofollow\"> click here<\/a> if you have a blog, or <a href=\"http:\/\/r-posts.com\/\" rel=\"nofollow\"> here<\/a> if you don't.\r\n<\/div>","protected":false},"excerpt":{"rendered":"<div style = \"width:60%; display: inline-block; float:left; \">\nWe are thrilled to announce the release of reactable.extras, which is now available for seamless integration into your Shiny applications, marking its debut as a significant release on CRAN. With reactable.extras, you can elevate your data tables to new heights, simplifying the management of interactive components within reactable &#8230;<\/div>\n<div style = \"width: 40%; display: inline-block; float:right;\"><\/div>\n<div style=\"clear: both;\"><\/div>\n","protected":false},"author":2826,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"aioseo_notices":[],"jetpack-related-posts":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts\/380284"}],"collection":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/users\/2826"}],"replies":[{"embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/comments?post=380284"}],"version-history":[{"count":3,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts\/380284\/revisions"}],"predecessor-version":[{"id":380435,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts\/380284\/revisions\/380435"}],"wp:attachment":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/media?parent=380284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/categories?post=380284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/tags?post=380284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}