D3TableFilter (version 0.7.1)

d3tf: d3tf Generate a HTML table widget with advanced filtering, sorting and colouring.

Description

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

Usage

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)

Arguments

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.

Configuration

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.

Extensions

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.

Editing

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.

Colouring

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.

Row selection

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.

Sparklines

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.

See Also

datatable.

Examples

# NOT RUN {
# ------------------------------------------------------------------------------
# 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");
  })
})
# }