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"
}
]
});