d3tf: d3tf Generate a HTML table widget with advanced filtering,...
In ThomasSiegmund/D3TableFilter: A table widget based on D3.js and the "HTML Table Filter Generator"

Description Usage Arguments Configuration Extensions Editing Colouring Row selection Sparklines See Also Examples

R interface to Max Guglielmi's TableFilter JavaScript library. Provides advanced filtering and sorting. Columns can be formatted using D3 functions.

d3tf(df, enableTf = TRUE, tableProps = NULL, showRowNames = FALSE,
  colNames = NULL, extensions = NULL, selectableRows = NULL,
  selectableRowsClass = "info", tableStyle = "table", rowStyles = NULL,
  bgColScales = list(), fgColScales = list(), edit = FALSE,
  radioButtons = NULL, checkBoxes = NULL, cellFunctions = list(),
  filterInput = FALSE, initialFilters = list(), footData = NULL,
  footCellFunctions = list(), sparklines = list(), colsResizable = FALSE,
  colsResizableOptions = list(), width = NULL, height = NULL)

`df`	Data frame, matrix or or SharedData object to display as html table
`enableTf`	Enable the features for the "HTML table filter generator"
`tableProps`	A list object describing appearence and function of the table
`showRowNames`	Add the R row names as first column to the table
`colNames`	Named character list to display as column names
`extensions`	List of table filter extensions to load. See inst/examples/feature/server.R
`selectableRows`	Enable row selection on (`cltr-`) mouse click. If `"multi"` multiple rows will be selectable using (`cltr click`), if `"single"` only a single line will be selectable.
`selectableRowsClass`	CSS class of selected row. Could be "active", "success", "info", "warning", or "danger" from Bootstrap3. Default: "info."
`tableStyle`	List css classes to apply to a table. Bootstrap3 provides `table`, `table-striped`, `table-bordered`, `table-hover`, and `table-condensed`. The `table-hover` class is applied automatically if `selectableRows` is active. If `tableStyle` is not NULL, the normal CSS styling of TableFilter is automatically cut down by appending `stylesheet = "tablefilter-2.5/filtergridBS.css"` to the tableProps.
`rowStyles`	Character vector of Bootstrap classes to apply to rows. Could be used to pre-select rows when using the `selectableRows` interface.
`bgColScales`	List of background colour scales to apply to the columns
`fgColScales`	List of text colour scales to apply to the columns
`edit`	Set whole table or selected columns editable. See details.
`radioButtons`	Turn logical columns into radio buttons (`radioButtons = "col_4"`).
`checkBoxes`	Turn logical columns into checkboxes (`checkBoxes = "col_3"`).
`cellFunctions`	Run D3 functions to format a column. Can be used to generate D3 graphics in cells.
`filterInput`	Generate an input element named outputid + "_filter" listing filter settings and valid rows
`initialFilters`	List of initial filter settings filter settings and valid rows
`footData`	Data frame or matrix to append as footer to the table. Column names must match the colnames of the main table. Cells in the footer will get an id attribute (e.g. first footer row, second column in "mtcars" output is named "frow_0_fcol_1_tbl_mtcars") allowing them to be used with the "col_operation" option of TableFilter.
`footCellFunctions`	Run D3 functions to format a footer column. Can be used to format table footer or to generate D3 graphics in cells.
`sparklines`	List of per column options to turn cell values into sparkline visulizations.
`colsResizable`	Enable interactive column resizing using the jquery colResizable plugin.
`colsResizableOptions`	List of options for column resizing. See the "colsresizable" shiny app in the #' inst/examples/ directory of this package for an example. Set to NULL to disable.

The D3TableFilter widget can be highly customized. See the website of the JavaScript library TableFilter for details. Configuration is passed as a list of key value pairs to the JavaScript engine. A shiny app demonstrating many useful features in one table can be found in the inst/examples/feature directory of this package.

Some of the TableFilter functions are beeing provided as extensions, in particular

ColsVisibility: Visibility of columns can be adjusted by configuration or interactively
Sorting: Sort table by click on column headers
FiltersRowVisibility: Interactively show or hide the filter row.

To activate these extensions simply define them as a character vector in the extensions parameter, e.g. extensions = c("ColsVisibility", "ColumnsResizer", "FiltersRowVisibility"). This takes care of enabling and basic configuration of the extensions. For further customization use the tableProps parameter.

The whole table (edit = TRUE) or selected columns (edit = c("col_1", "col_3")) can set to be editable. An editable table provides an input element named like the corresponding output element + "_edit". Here each (debounced) edit event in a table cell is visible as a list of row (row), column (col) and new value (val). See examples/interaction for a Shiny app demonstrating this feature.

Table columns can be colored based on their cells value using D3.js colour scales. Table background and foreground (text) can be coloured independently. Colour definitions are passed to the JavaScript engine as D3 scale functions. This allows for a variety of scales for different purposes. See D3 scale documentation and examples below for details. As a shortcut a linear scale over the full value range of a column can be defined as col_n = "auto:startcolour:endcolour" (n is the column number, starting with 0). For better mapping from numeric values to perceived intensity a HCL colour interpolation is used. An example Shiny app showing various colour scales can be found in the inst/examples/colour/ directory of this package.

If selectableRows is set to "single" or to "multi", the widget provides a shiny input named outputid + "_select". On (ctrl-) mouse click the input delivers an array of 1 based row coordinates. Selected rows are highligthed using the "info" Bootstrap class. setRowClass can be used to set or to unset this class from the server. See the "interaction" shiny app in the inst/examples/ directory of this package for an example.

Table columns containing a comma separated series of numbers ("1,3,5,7,11") can be turned into sparkline visualizations. For example, sparklines = list(col_0 = list(type = "line")) will turn the cells of the first column into a minature line chart. See the "sparklines" shiny app in the inst/examples/sparklines directory of this package for an example.

datatable.

# ------------------------------------------------------------------------------
# colour definition: apply a white to blue linear scale to the background of the 
# first column ("col_0") over a range of values from 0 to 200 
# ------------------------------------------------------------------------------ 
bgColScales <- list(
col_0 = JS('function colorScale(i){
        var color = d3tf.scaleLinear()
        .domain([0, 200])
        .range(["white", "blue"]);
        return color(i);
     }'));
# ----------------------------------------------------------------------------    
# simplified colour definition: first column, linear scale from white to green
# ----------------------------------------------------------------------------
bgColScales <- list(
 col_0 = "auto:white:green"
)


# --------------------------------------------------------
# Minimal shiny app demonstrating the D3TableFilter widget
# server.R
# --------------------------------------------------------
library(shiny)
library(htmlwidgets)
library(D3TableFilter)

data(mtcars);

shinyServer(function(input, output, session) {
  output$mtcars <- renderD3tf({
    
    # Define table properties. See http://tablefilter.free.fr/doc.php
    # for a complete reference
    tableProps <- list(
      btn_reset = TRUE,
        # alphabetic sorting for the row names column, numeric for all other columns
        col_types = c("string", rep("number", ncol(mtcars)))
    );
    
    d3tf(mtcars,
         tableProps = tableProps,
         extensions = list(
          list(name = "sort")
         ),
         showRowNames = TRUE,
         tableStyle = "table table-bordered");
  })
})