Tables with a fixed header may be generated to permit the headings to remain visible with the data. The CSS is not difficult, but it not-trivial and requires some coordination across a few parts. This functions standardizes the generation of the CSS code using as few elements as possible. Note that there is potential for conflicts with existing CSS in this method.
fixed_header_css(
fixed_header_class_name = "pixie-fixed",
scroll_body_height = 300,
scroll_body_height_units = "px",
scroll_body_background_color = "white",
fixed_header_height = 20,
fixed_header_height_units = "px",
fixed_header_text_height = fixed_header_height/2,
fixed_header_text_height_units = "px",
fixed_header_background_color = "white",
pretty = TRUE
)character(1). When
include_fixed_header_css = FALSE, this
class name is used to reference CSS classes provided by the user to
format the table correctly.
integerish(1). Sets the height of the scrollable
table body.
character(1). Determines the units for the
height of the scrollable table. Defaults to "px". Must be one
of c("px", "pt", "%", "em").
character(1). The color of the background
of the body. Must be a valid color. It defaults to white, which may
override CSS settings provided by the user. If this needs to be avoided,
you may use the fixed_header_css function to assist in
generating CSS code to use to define the CSS. See Avoiding CSS Conflicts.
integerish(1). Sets the height of the header
row.
character(1). Determines the units for the
height of the header row. Defaults to "px". Must be one of
c("px", "pt", "%", "em").
numeric(1). Sets the height at which the
header text appears. By default it is set to half of the header height.
This should be approximately centered, but you may alter this to get the
precise look you want.
character(1). Determines the units for
placing the header text. Defaults to "px". Must be one of
c("px", "pt", "%", "em").
character(1). Sets the background color for
the header row. This defaults to white and may override the user's CSS
settings. See Avoiding CSS Conflicts.
logical(1). When TRUE, the result is printed
to the console using cat, making it easy to copy and paste the
code to another document. When FALSE, it is returned as a
character string.
Because of all of the shenanigans involved, exporting the CSS with the tables
may result in conflicts with your custom CSS. Most importantly, any CSS
you have applied to the th or td tags may be overwritten.
If you are using custom CSS, you may want to consider using
include_fixed_header_css = FALSE and then utilizing
fixed_header_css to generate CSS you can include in your
CSS file to provide the fixed headers. The code generated by
fixed_header_css ought to be placed before your definitions for
td and th.
To get the same header design in the fixed table, you will want to modify
the .th-pixie-fixed div definition in the CSS to match your desired
th definition.
The code produced by fixed_header_css will include comments where
there is potential for a CSS conflict.
If pretty = TRUE print results to the console.
If pretty = FALSE Return a character string of length 1.
Cast an error if scroll_body_height is not integerish(1)
Cast an error if scroll_body_height_units is not character(1)
Cast an error if scroll_body_background_color is not character(1)
Cast an error if scroll_body_background_color is not a valid color.
Cast an error if fixed_header_height is not integerish(1)
Cast an error if fixed_header_height_units is not character(1)
Cast an error if fixed_header_text_height is not numeric(1)
Cast an error if fixed_header_text_height_units is not character(1)
Cast an error if fixed_header_background_color is not character(1)
Cast an error if fixed_header_background_color is not a valid color.
Cast an error if pretty is not logical(1)
CSS doesn't make this kind of table natural. The solution to
generate the fixed headers used by pixiedust is probably not the
best solution in terms of CSS design. It is, however, the most conducive
to generating dynamically on the fly.
The fixed header table requires nesting several HTML elements.
a div tag is used to control the alignment of the table
a section tag is used to set up the header row that remains fixed.
a div that sets the height of the scrollable body
the table tag establishes the actual table.
The th tags inside the table are set to full transparency and
the content of the headers is duplicated in a div within the
th tag to display the content.
To accomplish these tasks, some CSS is exported with the table and placed in the document immediately before the table. Read further to understand the conflicts that may arise if you are using custom CSS specifications in your documents.