Table

Documentation

Input Parameters

Name Type Description
className string The class name to apply to the main element.
el HTMLElement The element to render the table to.
columns Array<string> The column labels.
isFixed boolean True for fixed tables.
isSelectable boolean True for selectable tables.
renderHeaderRow boolean True to render a header row.
rows Array<{ [key: string]: string }> The table rows.

Interface

Name Type/Description
get() Returns the fabric component.
getSelectedRows() Returns the selected rows.

Fabric Interface

Name Type/Description
_container HTMLTableElement

JavaScript

var $REST = require("gd-sprest-js");

// Create the table
var el = document.querySelector("#table");
$REST.JS.Fabric.Table({
    el: el,
    columns: ["Col1", "Col2", "Col3"],
    rows: [
        {
            Col1: "Value 1",
            Col2: "Value 2",
            Col3: "Value 3"
        },
        {
            Col1: "Value 4",
            Col2: "Value 5",
            Col3: "Value 6"
        },
        {
            Col1: "Value 7",
            Col2: "Value 8",
            Col3: "Value 9"
        }
    ]
});

TypeScript

import { Fabric } from "gd-sprest-js";

// Create the table
var el = document.querySelector("#table");
Fabric.Table({
    el,
    columns: ["Col1", "Col2", "Col3"],
    rows: [
        {
            Col1: "Value 1",
            Col2: "Value 2",
            Col3: "Value 3"
        },
        {
            Col1: "Value 4",
            Col2: "Value 5",
            Col3: "Value 6"
        },
        {
            Col1: "Value 7",
            Col2: "Value 8",
            Col3: "Value 9"
        }
    ]
});