Add lazyRender parameter

Author: COMZM

NEWS.md

@@ -1,5 +1,6 @@
 # CHANGES IN DT VERSION 0.34
 
+- Added `lazyRender` parameter to `datatable`, which gives the option for the table to be rendered immediately rather than waiting for it to become visible (#1156).
 
 # CHANGES IN DT VERSION 0.33
 

R/datatables.R

@@ -64,6 +64,8 @@
 #'   (only display the table body) when the number of total records is less
 #'   than the page size. Note, it only works on the client-side processing mode
 #'   and the `pageLength` option should be provided explicitly.
+#' @param lazyRender \code{TRUE} to delay rendering until the table becomes visible
+#'   (the default) or \code{FALSE} to render the table immediately on page load.
 #' @param selection the row/column selection mode (single or multiple selection
 #'   or disable selection) when a table widget is rendered in a Shiny app;
 #'   alternatively, you can use a list of the form \code{list(mode = 'multiple',
@@ -207,6 +209,7 @@ datatable = function(
   escape = TRUE, style = 'auto', width = NULL, height = NULL, elementId = NULL,
   fillContainer = getOption('DT.fillContainer', NULL),
   autoHideNavigation = getOption('DT.autoHideNavigation', NULL),
+  lazyRender = TRUE,
   selection = c('multiple', 'single', 'none'), extensions = list(), plugins = NULL,
   editable = FALSE
 ) {
@@ -375,6 +378,9 @@ datatable = function(
     params$autoHideNavigation = autoHideNavigation
   }
 
+  # record lazyRender
+  params$lazyRender = lazyRender
+
   params = structure(modifyList(params, list(
     data = data, container = as.character(container), options = options,
     callback = if (!missing(callback)) JS('function(table) {', callback, '}')

inst/htmlwidgets/datatables.js

@@ -180,7 +180,9 @@ HTMLWidgets.widget({
     };
   },
   renderValue: function(el, data, instance) {
-    if (el.offsetWidth === 0 || el.offsetHeight === 0) {
+    if (!data.hasOwnProperty("lazyRender"))
+      data.lazyRender = true;
+    if ((el.offsetWidth === 0 || el.offsetHeight === 0) && data.lazyRender) {
       instance.data = data;
       return;
     }