Add way to pass configuration to Selectize and noUiSlider widgets (#1120

)

DESCRIPTION

@@ -1,7 +1,7 @@
 Package: DT
 Type: Package
 Title: A Wrapper of the JavaScript Library 'DataTables'
-Version: 0.31.3
+Version: 0.31.4
 Authors@R: c(
     person("Yihui", "Xie", email = "[email protected]", role = c("aut", "cre")),
     person("Joe", "Cheng", role = "aut"),

NEWS.md

@@ -14,6 +14,8 @@
 
 - Column formatting now also applies to range labels shown on filter sliders (thanks, @GitChub, @mikmart, #247).
 
+- Added support for passing custom configuration for initializing filter widgets in JavaScript. Use the `filter` parameter to `datatable()` in the form `filter = list(settings = list(select = ..., slider = ...))` (thanks, @yogat3ch, @DavidBlairs, @mikmart, #1072, #1083).
+
 # CHANGES IN DT VERSION 0.31
 
 - Upgraded DataTables version to 1.13.6 (thanks, @stla, #1091).

R/datatables.R

@@ -33,11 +33,8 @@
 #'   \code{bottom/top}: put column filters at the bottom/top of the table; range
 #'   sliders are used to filter numeric/date/time columns, select lists are used
 #'   for factor columns, and text input boxes are used for character columns; if
-#'   you want more control over the styles of filters, you can provide a list to
-#'   this argument of the form \code{list(position = 'top', clear = TRUE, plain
-#'   = FALSE)}, where \code{clear} indicates whether you want the clear buttons
-#'   in the input boxes, and \code{plain} means if you want to use Bootstrap
-#'   form styles or plain text input styles for the text input boxes
+#'   you want more control over the styles of filters, you can provide a named
+#'   list to this argument; see Details for more
 #' @param escape whether to escape HTML entities in the table: \code{TRUE} means
 #'   to escape the whole table, and \code{FALSE} means not to escape it;
 #'   alternatively, you can specify numeric column indices or column names to
@@ -165,6 +162,37 @@
 #'       results in a table whose first column is \emph{invisible}.
 #'     \item See \url{https://datatables.net/reference/option/columnDefs} for more.
 #'   }
+#'   \code{filter}:
+#'   \enumerate{
+#'     \item \code{filter} can be used to position and customize column filters.
+#'       A scalar string value defines the position, and must be one of \code{'none'}
+#'       (the default), \code{'bottom'} and \code{'top'}. A named list can be used
+#'       for further control. In the named list form:
+#'     \item \code{$position} is a string as described above. It defaults to \code{'none'}.
+#'     \item \code{$clear} is a logical value indicating if clear
+#'       buttons should appear in input boxes. It defaults to \code{TRUE}.
+#'     \item \code{$plain} is a logical value indicating if plain styling
+#'       should be used for input boxes instead of Bootstrap styling. It
+#'       defaults to \code{FALSE}.
+#'     \item \code{$vertical} is a logical value indicating if slider
+#'       widgets should be oriented vertically rather than horizontally.
+#'       It defaults to \code{FALSE}.
+#'     \item \code{$opacity} is a numeric value between 0 and 1 used to set
+#'       the level of transparency of slider widgets. It defaults to \code{1}.
+#'     \item \code{$settings} is a named list used to directly pass configuration
+#'       for initializing filter widgets in JavaScript.
+#'       \itemize{
+#'          \item The \code{$select} element is passed to the select widget, and
+#'            \code{$slider} is passed to the slider widget.
+#'          \item Valid values depend on the settings accepted by the underlying
+#'            JavaScript libraries, \href{https://selectize.dev/}{Selectize}
+#'            and \href{https://refreshless.com/nouislider/}{noUiSlider}.
+#'            Please note that the versions bundled with DT are currently quite old,
+#'            so accepted settings may not match their most recent documentation.
+#'          \item These settings can override values set by DT, so specifying
+#'            a setting already in use may break something. Use with care.
+#'       }
+#'   }
 #' @note You are recommended to escape the table content for security reasons
 #'   (e.g. XSS attacks) when using this function in Shiny or any other dynamic
 #'   web applications.
@@ -296,6 +324,7 @@ datatable = function(
   params$filter = filter$position
   params$vertical = filter$vertical
   if (filter$position != 'none') params$filterHTML = filterHTML
+  params$filterSettings = filter$settings
 
   if (missing(container)) {
     container = tags$table(tableHeader(colnames, escape), class = class)

inst/htmlwidgets/datatables.js

@@ -447,6 +447,7 @@ HTMLWidgets.widget({
     };
 
     if (data.filter !== 'none') {
+      if (!data.hasOwnProperty('filterSettings')) data.filterSettings = {};
 
       filterRow.each(function(i, td) {
 
@@ -510,7 +511,7 @@ HTMLWidgets.widget({
             }
           });
           var $input2 = $x.children('select');
-          filter = $input2.selectize({
+          filter = $input2.selectize($.extend({
             options: $input2.data('options').map(function(v, i) {
               return ({text: v, value: v});
             }),
@@ -529,7 +530,7 @@ HTMLWidgets.widget({
               $td.data('filter', value.length > 0);
               table.draw();  // redraw table, and filters will be applied
             }
-          });
+          }, data.filterSettings.select));
           filter[0].selectize.on('blur', function() {
             $x.hide().trigger('hide'); $input.parent().show(); $input.trigger('blur');
           });
@@ -656,7 +657,7 @@ HTMLWidgets.widget({
             start: [r1, r2],
             range: {min: r1, max: r2},
             connect: true
-          }, opts));
+          }, opts, data.filterSettings.slider));
           if (scale > 1) (function() {
             var t1 = r1, t2 = r2;
             var val = filter.val();
@@ -671,7 +672,7 @@ HTMLWidgets.widget({
                 start: [t1, t2],
                 range: {min: t1, max: t2},
                 connect: true
-              }, opts), true);
+              }, opts, data.filterSettings.slider), true);
               val = filter.val();
             }
             r1  = t1; r2 = t2;