Examples 1: Coulmns Properties

Basic Usage

To create aggrid table, use aggrid() on a data frame or matrix.

library(aggrid)
library(dplyr)
#> 
#> Attaching package: 'dplyr'
#> The following objects are masked from 'package:stats':
#> 
#>     filter, lag
#> The following objects are masked from 'package:base':
#> 
#>     intersect, setdiff, setequal, union
library(htmlwidgets)

aggrid(iris)

Column Properties

Columns: Width

For column width adjustment, you can use ag_col_def() or ag_col_width().

aggrid(iris) |>
  ag_col_def(columns = c(Sepal.Length, Sepal.Width), width = 80)

aggrid(iris) |>
  ag_col_width(c(Sepal.Length, Sepal.Width), width = 80)

Size Columns to Fit

If you don’t want a particular column to be included in the auto resize, you can use size_to_fit(). For example, you want the first column to remain fixed width, but all other columns to fill the width of the table.

iris |>
  dplyr::relocate(Species) |>
  aggrid() |>
  ag_col_width(Species, width = 400) |>
  ag_size_fit()

Auto-Size Columns

Auto width to fit the contents of the cells in the column.

aggrid(iris) |>
  ag_size_columns()

More options please see https://www.ag-grid.com/javascript-data-grid/column-properties.

Columns: filter

aggrid() default set columns filter, and automatically identify the data type to select filter mode. If you want to change the default behavior, please use ag_col_filter().

aggrid(iris) |>
  ag_col_filter(Sepal.Length, filter = FALSE) |>
  ag_col_filter(Species, filter = "agTextColumnFilter")

More options please see https://www.ag-grid.com/javascript-data-grid/filter-text/.

Columns: pinned

aggrid(iris) |>
  ag_col_pinned(Species, pinned = "left")

Columns: Header

By default, aggrid() will remove colnames dots, use ag_col_header() can custom colnames.

aggrid(iris) |>
  ag_col_header(Sepal.Length, headerName = c("Sepal.Length")) |>
  ag_col_header(Sepal.Width, headerName = c("Sepal.Width"))

The above code is bad, you can use ag_col_defs() for vectorization.

aggrid(iris) |>
  ag_col_defs(columns = everything(), headerName = names(iris))

menuTabs parameter default is c('filterMenuTab','generalMenuTab','columnsMenuTab'), If you only want to filter menuTab, you can:

head(iris, n = 10) |>
  aggrid() |>
  ag_col_def(columns = Species, menuTabs = list("filterMenuTab"))

Columns: group

head(iris, n = 10) |>
  aggrid() |>
  ag_col_group(columns = starts_with("Sepal"), headerName = "Sepal")

Center header:

head(iris, n = 10) |>
  aggrid() |>
  ag_col_group(columns = starts_with("Sepal"), headerName = "Sepal", headerClass = "ag-header-center") |>
  ag_col_group(columns = starts_with("Petal"), headerName = "Petal", headerClass = "ag-header-center")

Set all content content center:

head(iris, n = 10) |>
  aggrid() |>
  ag_col_group(columns = starts_with("Sepal"), headerName = "Sepal", headerClass = "ag-header-center") |>
  ag_col_group(columns = starts_with("Petal"), headerName = "Petal", headerClass = "ag-header-center") |>
  ag_col_def(cellStyle = list(textAlign = "center"), headerClass = "ag-header-center")

Columns: format

ag_col_format() use numeraljs to format number.

data.frame(
  price = c(9603.01, 100, 98322),
  percent = c(0.9525556, 0.5, 0.112),
  exponential = c(123456789, 0.0001314, 0.52),
  bytes = c(1024^3, 1024^2, 1024)
) |>
  aggrid() |>
  ag_col_format(price, "$0,0.000") |>
  ag_col_format(percent, "0.0%") |>
  ag_col_format(exponential, "0,0e+0") |>
  ag_col_format(bytes, "0 b")

Custom columns format use valueFormatter:

data.frame(
  Area = c(1000, 200, 40)
) |>
  aggrid() |>
  ag_col_def(valueFormatter = JS('
    (params) => {return params.value + " mi\u00b2";};
  '))

Coulmns: CellRender

valueFormatter mainly used for formatting, and cellRenderer use for adding html tags and cellStyle use for cell style.

data.frame(
  go_term = c("GO:0140359", "GO:0036094", "GO:0048029", "GO:0042626", "GO:0097367"),
  p_value = c(3.30e-07, 1.60473e-06, 2.47191e-01, 1.19e-05, 0.05)
) |>
  aggrid() |>
  ag_col_render(go_term, cellRenderer = JS('(params) => {
    return `<a href="https://amigo.geneontology.org/amigo/term/${params.value}">${params.value}</a>`
  };')) |>
  ag_col_render(p_value, cellStyle = JS('function(params) {
    if (params.value <= 0.05) {
      return { color: "green" };
    } else{
      return { color: "red" };
    }
  }'))

TO DO: need to encapsulate some simple functions to modify the cellRender.

More example to see <./Examples2.html>