Pro Table Data Widget



GitPitch Paid Plans activate powerful Pro syntax shortcuts supported by PITCHME.md markdown that can be used to generate rich visual components - aka. widgets - on any slide. This guide introduces the @table widget.


Table Data Widget

The @table widget renders comma-separated and tab-separated file data as tables. It provides a simple and consistent syntax to render table data on any slide:


@table[property...](path/to/sample.csv)

The widget accepts zero or more CSS property values that can be used to control the size and appearance of your table. The sections that follow demonstrate the use of properties for common use-cases when working with the @table widget.

The following markdown snippet demonstrates how table data is rendered by the @table widget using the default table styles associated with the fixed theme for your slide deck:


@table[](path/to/sample.csv)

This sample markdown snippet renders as follows:

TABLE WIDGET DEFAULT CSS STYLE


Working with Table Data Headers

The first row in a comma-separated or tab-separated data file may contain header information. If your data file contains header information activate the built-in table-header property on your @table widget as follows:


@table[table-header](path/to/sample.csv)

This markdown snippet renders as follows:

TABLE WIDGET HEADERS

You can further customize the appearance of your table headers and data rows using Custom Table Styles.


Working with Table Data Fragments

When you need to introduce each row of data in your table step-by-step activate the built-in table-fragment property on your @table widget as follows:


@table[table-header table-fragment](path/to/sample.csv)

This markdown snippet renders as follows:

TABLE WIDGET FRAGMENTS


Working with Tabbed Table Data

By default, the @table widgets expects comma-separated values in your files. If your data file uses tab delimiters instead, activate the built-in table-tsv property on your widget as follows:


@table[table-header table-tsv](path/to/sample.tsv)

This markdown snippet renders as follows:

TABLE WIDGET TSV


Working with Custom Table Styles

To activate custom table styles for your @table widget data you can define custom CSS styles and then activate those styles as properties on your widgets. For example, see the following sample custom CSS style rules:


table.custom-header th {
  font-variant: small-caps;
}

table.custom-row tr:nth-child(even) {
  background-color: #f2f2f2;
}

table.custom-spacing th, table.custom-spacing td {
  padding: 15px;
}

These sample custom styles rules are designed to modify the appearance of a table as follows:

  1. Table headings are rendered using a small-caps font variant.
  2. Table rows are rendered using alternating striped backgrounds using custom color.
  3. Table header and table data padding is set to a custom 15px size per style rule.

These custom CSS style rules can be activated as properties on a @table widget as follows:


@table[table-header custom-header custom-row custom-spacing](path/to/sample.csv)

This markdown snippet render as follows:

TABLE WIDGET CUSTOM CSS STYLE

The use of custom CSS style rules to customize the appearance of tables generated by the @table widget is entirely optional. Default table styling is determined by the fixed theme for your slide deck.


Sizing Tables with Text Properties

Using standard markdown syntax to create and maintain table data quickly becomes unwieldy after just a few rows of data. The @table widget provides a simple, consistent syntax to work with table data of any size. But your table data still has to fit on the space available on your slides.

The built-in Text Font Size Properties can be activated on the @table widget to control the size of any table on your slides. For example, the following markdown snippet renders data from a large file:


@table[table-header text-05](path/to/sample-large.csv)

This markdown snippet render as follows:

TABLE WIDGET CUSTOM CSS STYLE

The screenshot on the left shows how the default rendering of the large data file overflows the slide. The screenshot on the right shows how with the simple activation of the text-05 property on the @table widget allowed us to fit the table data on our slide.

Note, the @table widget will render up to a maximum of 20 rows of data. Any rows beyond this max limit found in your data file are simply ignored.


Positioning Tables with Snap Layouts

Data rendered by the @table widget can be positioned on your slides using snap-layouts. For example, see the following markdown snippet:


@snap[west span-25]
Table Data Widget Demo
@snapend

@snap[east span-70]
@table[table-header custom-header custom-spacing text-06](path/to/sample.csv)
@snapend

The use of the built-in east and span-70 properties on the @snap tag positions the table within the east of the snap-layouts grid. The additional use of the text-06 property on the @table widget itself sizes the table content to fit cleanly within this area of the slide. This markdown snippet renders as follows:

TABLE WIDGET SNAP LAYOUTS