Tables#

Tables and content can be added to Slides.

#Usage

// TABLE 1: Single-row table
let rows = [["Cell 1", "Cell 2", "Cell 3"]];
slide.addTable(rows, { w: 9 });

// TABLE 2: Multi-row table
// - each row's array element is an array of cells
let rows = [["A1", "B1", "C1"]];
slide.addTable(rows, { align: "left", fontFace: "Arial" });

// TABLE 3: Formatting at a cell level
// - use this to selectively override the table's cell options
let rows = [
    [
        { text: "Top Lft", options: { align: "left", fontFace: "Arial" } },
        { text: "Top Ctr", options: { align: "center", fontFace: "Verdana" } },
        { text: "Top Rgt", options: { align: "right", fontFace: "Courier" } },
    ],
];
slide.addTable(rows, { w: 9, rowH: 1, align: "left", fontFace: "Arial" });

#Usage Notes

• Properties passed to addTable() apply to every cell in the table
• Selectively override formatting at a cell-level by providing properties to the cell object

#Cell Formatting

• Table cells can be either a plain text string or an object with text and options properties
• When using an object, any of the formatting options above can be passed in options and will apply to that cell only
• Cell borders can be removed (aka: borderless table) by using the 'none' type (Ex: border: {type:'none'})
• Bullets and word-level formatting are supported inside table cells. Passing an array of objects with text/options values as the text value allows fine-grained control over the text inside cells.
• Available formatting options are here: Text Props

#Row Height

• Use the h property to have row(s) divided evenly across the defined area
• Use the rowH property with an array of values to specify row heights (indexed 0-n)
• Omit both properties to have table rows consume only the space required for its contents

#Properties

#Position/Size Props (PositionProps)

#Table Layout Options (ITableOptions)

#Table Formatting Props (ITableOptions)

#Table Border Options (IBorderOptions)

#Table Auto-Paging

Auto-paging creates new slides automatically as table rows overflow the current slide.

#Table Auto-Paging Options (ITableOptions)

#Auto-Paging Property Notes

• autoPage: allows the auto-paging functionality (as table rows overflow the Slide, new Slides will be added) to be disabled.
• autoPageCharWeight: adjusts the calculated width of characters. If too much empty space is left on each line, then increase char weight value. Conversely, if the table rows are overflowing, then reduce the char weight value.
• autoPageLineWeight: adjusts the calculated height of lines. If too much empty space is left under each table, then increase line weight value. Conversely, if the tables are overflowing the bottom of the Slides, then reduce the line weight value. Also helpful when using some fonts that do not have the usual golden ratio.
• newSlideStartY: specifies where continuation tables are placed on new Slides. For example, a table may start halfway down the first Slide, but that position is usually not desirable for the continuation tables on subsequent Slides. Use this option to avoid wasted space and keep the layout consistent.

#Auto-Paging Usage Notes

• New slides will be created as tables overflow. The table will start at either newSlideStartY (if present) or the Slide's top margin
• Tables will retain their existing x, w, and colW values as they are rendered onto subsequent Slides
• Auto-paging is an approximation. Adjust autoPageCharWeight/autoPageLineWeight and the slide margin until the result is acceptable
• Very small and very large font sizes cause tables to over- or under-flow; adjust the char and line weight properties accordingly
• There are many examples of auto-paging in the examples folder

#Examples

#Table Cell Formatting

// -------
// TABLE 1: Cell-level Formatting
// -------
let rows = [];

// Row One: cells will be formatted according to any options provided to `addTable()`
rows.push(["First", "Second", "Third"]);

// Row Two: set/override formatting for each cell
rows.push([
    { text: "1st", options: { color: "ff0000" } },
    { text: "2nd", options: { color: "00ff00" } },
    { text: "3rd", options: { color: "0000ff" } },
]);

slide.addTable(rows, { x: 0.5, y: 1.0, w: 9.0, color: "363636" });

// -------
// TABLE 2: Using word-level formatting inside cells
// -------
// NOTE: An array of text/options objects provides fine-grained control over formatting
let arrObjText = [
    { text: "Red ", options: { color: "FF0000" } },
    { text: "Green ", options: { color: "00FF00" } },
    { text: "Blue", options: { color: "0000FF" } },
];

// EX A: Pass an array of text objects to `addText()`
slide.addText(arrObjText, {
    x: 0.5,
    y: 2.0,
    w: 9,
    h: 1,
    margin: 0.1,
    fill: "232323",
});

// EX B: Pass the same objects as a cell's `text` value
let arrTabRows = [
    [
        { text: "Cell 1 A", options: { fontFace: "Arial" } },
        { text: "Cell 1 B", options: { fontFace: "Courier" } },
        { text: arrObjText, options: { fill: "232323" } },
    ],
];

slide.addTable(arrTabRows, { x: 0.5, y: 3.5, w: 9, h: 1, colW: [1.5, 1.5, 6] });