opt_css: Option to add custom CSS for the table

View source: R/opts.R

opt_cssR Documentation

Option to add custom CSS for the table

Description

opt_css() makes it possible to add CSS to a gt table. This CSS will be added after the compiled CSS that gt generates automatically when the object is transformed to an HTML output table. You can supply css as a vector of lines or as a single string.

Usage

opt_css(data, css, add = TRUE, allow_duplicates = FALSE)

Arguments

data

The gt table data object

⁠obj:<gt_tbl>⁠ // required

This is the gt table object that is commonly created through use of the gt() function.

css

CSS declarations

⁠scalar<character>⁠ // required

The CSS to include as part of the rendered table's ⁠<style>⁠ element.

add

Add to existing CSS

⁠scalar<logical>⁠ // default: TRUE

If TRUE, the default, the CSS is added to any already-defined CSS (typically from previous calls of opt_table_font(), opt_css(), or, directly setting CSS the table.additional_css value in tab_options()). If this is set to FALSE, the CSS provided here will replace any previously-stored CSS.

allow_duplicates

Allow for CSS duplication

⁠scalar<logical>⁠ // default: FALSE

When this is FALSE (the default), the CSS provided here won't be added (provided that add = TRUE) if it is seen in the already-defined CSS.

Value

An object of class gt_tbl.

Examples

Let's use the exibble dataset to create a simple, two-column gt table (keeping only the num and currency columns). Through use of the opt_css() function, we can insert CSS rulesets as as string. We need to ensure that the table ID is set explicitly (we've done so here with the ID value of "one", setting it in the gt() function).

exibble |>
  dplyr::select(num, currency) |>
  gt(id = "one") |>
  fmt_currency(
    columns = currency,
    currency = "HKD"
  ) |>
  fmt_scientific(columns = num) |>
  opt_css(
    css = "
    #one .gt_table {
      background-color: skyblue;
    }
    #one .gt_row {
      padding: 20px 30px;
    }
    #one .gt_col_heading {
      text-align: center !important;
    }
    "
  )
This image of a table was generated from the first code example in the `opt_css()` help file.

Function ID

10-13

Function Introduced

v0.2.2 (August 5, 2020)

See Also

Other table option functions: opt_align_table_header(), opt_all_caps(), opt_footnote_marks(), opt_footnote_spec(), opt_horizontal_padding(), opt_interactive(), opt_row_striping(), opt_stylize(), opt_table_font(), opt_table_lines(), opt_table_outline(), opt_vertical_padding()


gt documentation built on Sept. 11, 2024, 5:15 p.m.