# Saving HTML Reports & Documents

`dtsmartr` supports exporting your interactive grid sessions as offline-capable standalone HTML files, as well as embedding them seamlessly inside R Markdown (.Rmd) and Quarto (.qmd) dynamic reports.

## 1. Standalone HTML Reports (`save_dtsmartr`)

Export any data frame as a standalone web app using the `save_dtsmartr()` function:

    library(dtsmartr)

    # Export as a self-contained portable HTML file
    save_dtsmartr(
      data = mtcars,
      file = "reports/mtcars_dashboard.html"
    )

The resulting file runs offline in any browser without needing R, Shiny, or a network connection.

### Self-Contained vs. Lightweight Output Modes

- `selfcontained = TRUE` (Default): Combines all React code, styling assets, and data base64 streams directly into a single `.html` file. Requires Pandoc to compile.
- `selfcontained = FALSE`: Recommended for large datasets or environments without Pandoc. It saves a lightweight `.html` file alongside a `<file>_files/` companion directory containing the shared javascript and style sheets.

## 2. R Markdown (.Rmd) Document Integration

You can render `dtsmartr` interactive grids inline in any R Markdown HTML document.

Simply place the function inside standard code chunks. Set R Markdown chunk options (like `echo = FALSE` or `message = FALSE`) to suppress code display and warnings:

    ---
    title: "Clinical Analysis Report"
    output: html_document
    ---

    Below is the interactive labs analysis grid:

    ```{=html}
    <div class="dtsmartr html-widget html-fill-item" id="htmlwidget-7732815162899ee6a213" style="width:288px;height:288px;">
    <style>
        html:has(#htmlwidget_container), body:has(#htmlwidget_container) {
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;
          height: 100% !important;
          overflow: hidden !important;
        }
        #htmlwidget_container {
          width: 100% !important;
          height: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
        }
        #htmlwidget-7732815162899ee6a213 {
          width: 100% !important;
          height: 100vh !important;
        }
      </style>
    </div>
    <script type="application/json" data-for="htmlwidget-7732815162899ee6a213">{"x":{"arrow_payload":" ","metadata":[{"name":"mpg","type":"numeric","unique_values":25,"label":null},{"name":"cyl","type":"numeric","unique_values":3,"label":null},{"name":"disp","type":"numeric","unique_values":27,"label":null},{"name":"hp","type":"numeric","unique_values":22,"label":null},{"name":"drat","type":"numeric","unique_values":22,"label":null},{"name":"wt","type":"numeric","unique_values":29,"label":null},{"name":"qsec","type":"numeric","unique_values":30,"label":null},{"name":"vs","type":"numeric","unique_values":2,"label":null},{"name":"am","type":"numeric","unique_values":2,"label":null},{"name":"gear","type":"numeric","unique_values":3,"label":null},{"name":"carb","type":"numeric","unique_values":6,"label":null}],"dataset_name":"mtcars","options":{"advanced_filter":true,"show_labels":true,"column_picker":true,"allow_export":true,"theme":"auto","na_string":"NA","hidden_columns":[],"header_summary":true,"header_density":"auto","row_density":"standard"}},"evals":[],"jsHooks":[]}</script>
    ```

When you knit the document, R Markdown compiles the widget as an interactive grid directly inline with your text.

## 3. Quarto (.qmd) Document Integration

Quarto supports `dtsmartr` natively out of the box. Add the code chunk using Quarto’s standard syntax and comments:

    ---
    title: "Study Cohort Review"
    format: html
    ---

    ## Laboratory Panel Exploration

    Explore the interactive subject database:

    ```{=html}
    <div class="dtsmartr html-widget html-fill-item" id="htmlwidget-358242cc4c1c5bdf0619" style="width:288px;height:288px;">
    <style>
        html:has(#htmlwidget_container), body:has(#htmlwidget_container) {
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;
          height: 100% !important;
          overflow: hidden !important;
        }
        #htmlwidget_container {
          width: 100% !important;
          height: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
        }
        #htmlwidget-358242cc4c1c5bdf0619 {
          width: 100% !important;
          height: 100vh !important;
        }
      </style>
    </div>
    <script type="application/json" data-for="htmlwidget-358242cc4c1c5bdf0619">{"x":{"arrow_payload":" ","metadata":[{"name":"mpg","type":"numeric","unique_values":25,"label":null},{"name":"cyl","type":"numeric","unique_values":3,"label":null},{"name":"disp","type":"numeric","unique_values":27,"label":null},{"name":"hp","type":"numeric","unique_values":22,"label":null},{"name":"drat","type":"numeric","unique_values":22,"label":null},{"name":"wt","type":"numeric","unique_values":29,"label":null},{"name":"qsec","type":"numeric","unique_values":30,"label":null},{"name":"vs","type":"numeric","unique_values":2,"label":null},{"name":"am","type":"numeric","unique_values":2,"label":null},{"name":"gear","type":"numeric","unique_values":3,"label":null},{"name":"carb","type":"numeric","unique_values":6,"label":null}],"dataset_name":"mtcars","options":{"advanced_filter":true,"show_labels":true,"column_picker":true,"allow_export":true,"theme":"auto","na_string":"NA","hidden_columns":[],"header_summary":true,"header_density":"auto","row_density":"standard"}},"evals":[],"jsHooks":[]}</script>
    ```

When Quarto renders to HTML (`quarto render report.qmd`), the widget embeds inside the page container.

## 4. Downloadable Sample HTML Reports

To see what standalone HTML reports generated by `save_dtsmartr()` look and behave like offline, you can download these pre-compiled samples:

1. 🚗 Download mtcars Sample HTML Report (mtcars_report.html) (Lightweight, self-contained single file)
2. 🔬 Download Double-Sized ADLB Performance Report (adlb_large_report.zip) (Heavy clinical dataset: 167,304 rows × 115 columns, packaged as a ZIP containing the HTML and its assets folder for optimal load performance)

Simply download, unzip (for the large report), open the `.html` file locally in any modern web browser, and test all scrolling, column anchoring, and reordering features offline!

## 5. Live Embedded Integration Preview

Here is an actual live rendering of `dtsmartr` embedded inside the R Markdown page container of this article, showing how it looks inside your generated reports:

    library(dtsmartr)
    dtsmartr(mtcars)