print

presentation

slug: step-print

Print Step

Purpose

Generates HTML output from dataset data, creating formatted reports and tables for visualization and presentation. Converts raw data into human-readable format.

When to Use

• Create HTML reports for dashboard display
• Generate printable data views
• Format data tables for presentation
• Provide interactive data views with action buttons
• Create quick visualizations of processed data
• Preview data before exporting to other formats

How It Works

1. Takes the input dataset and converts it to an HTML table
2. Applies styling and formatting based on column types
3. Adds a title to the output
4. Optionally includes interactive elements or actions
5. Returns both the original data and the HTML representation

Parameters

Optional

• columns (array) - Columns to include in the HTML output (default: all columns)
• title (string) - Title for the HTML report (default: 'HTML Report')
• actions (array) - Interactive elements to add to the report

Input Requirements

• Any dataset with row/column structure
• Empty datasets are handled gracefully

Output

Data

• Original input dataset (unchanged)

HTML

• Formatted HTML report containing:
  • Title section
  • Data table with headers and rows
  • Any specified interactive elements

OutputType

• Set to 'html' to indicate HTML content is available

Example Usage

print:
  title: "Monthly Sales Report"
  columns:
    - month
    - region
    - product_category
    - sales_amount
    - growth_pct

Example Output

Input Data

month	region	product_category	sales_amount	growth_pct
January	North	Electronics	125000	15.2
January	South	Electronics	98000	8.7
January	North	Furniture	87500	-2.3
January	South	Furniture	112000	5.1

HTML Output

<div class="report">
  <h2>Monthly Sales Report</h2>
  <table class="data-table">
    <thead>
      <tr>
        <th>Month</th>
        <th>Region</th>
        <th>Product Category</th>
        <th>Sales Amount</th>
        <th>Growth %</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>North</td>
        <td>Electronics</td>
        <td class="numeric">125,000</td>
        <td class="numeric positive">15.2%</td>
      </tr>
      <tr>
        <td>January</td>
        <td>South</td>
        <td>Electronics</td>
        <td class="numeric">98,000</td>
        <td class="numeric positive">8.7%</td>
      </tr>
      <tr>
        <td>January</td>
        <td>North</td>
        <td>Furniture</td>
        <td class="numeric">87,500</td>
        <td class="numeric negative">-2.3%</td>
      </tr>
      <tr>
        <td>January</td>
        <td>South</td>
        <td>Furniture</td>
        <td class="numeric">112,000</td>
        <td class="numeric positive">5.1%</td>
      </tr>
    </tbody>
  </table>
</div>

Visual Rendering

The HTML output creates a professional report with:

• Formatted title
• Proper table structure with headers and rows
• Numeric formatting for numeric values
• Color-coding for growth percentages (positive in green, negative in red)
• Responsive design for different screen sizes

Related Documentation

• chart step - Create graphical visualizations
• dashboard step - Build multi-component dashboards
• attributes step - Apply custom formatting before printing