fixed_header_css: Generate CSS Code for Fixed Header Tables

In pixiedust: Tables so Beautifully Fine-Tuned You Will Believe It's Magic

Generate CSS Code for Fixed Header Tables

Description

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.

Usage

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
)

Arguments

fixed_header_class_name	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.
scroll_body_height	integerish(1). Sets the height of the scrollable table body.
scroll_body_height_units	character(1). Determines the units for the height of the scrollable table. Defaults to "px". Must be one of c("px", "pt", "%", "em").
scroll_body_background_color	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.
fixed_header_height	integerish(1). Sets the height of the header row.
fixed_header_height_units	character(1). Determines the units for the height of the header row. Defaults to "px". Must be one of c("px", "pt", "%", "em").
fixed_header_text_height	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.
fixed_header_text_height_units	character(1). Determines the units for placing the header text. Defaults to "px". Must be one of c("px", "pt", "%", "em").
fixed_header_background_color	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.
pretty	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.

Details

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.

1. a div tag is used to control the alignment of the table

2. a section tag is used to set up the header row that remains fixed.

3. a div that sets the height of the scrollable body

4. the table tag establishes the actual table.

5. 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.

Avoiding CSS Conflicts

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.

Functional Requirements

1. If pretty = TRUE print results to the console.

2. If pretty = FALSE Return a character string of length 1.

3. Cast an error if scroll_body_height is not integerish(1)

4. Cast an error if scroll_body_height_units is not character(1)

5. Cast an error if scroll_body_background_color is not character(1)

6. Cast an error if scroll_body_background_color is not a valid color.

7. Cast an error if fixed_header_height is not integerish(1)

8. Cast an error if fixed_header_height_units is not character(1)

9. Cast an error if fixed_header_text_height is not numeric(1)

10. Cast an error if fixed_header_text_height_units is not character(1)

11. Cast an error if fixed_header_background_color is not character(1)

12. Cast an error if fixed_header_background_color is not a valid color.

13. Cast an error if pretty is not logical(1)

Source

Jonas Schubert Erlandsson. https://jsfiddle.net/dPixie/byB9d/3/

pixiedust documentation built on Oct. 10, 2023, 9:07 a.m.