Table

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the table
var el = document.querySelector("#table");
var table = Components.Table({
    el: el,
    className: "table-sm is-striped",
    columns: [
        { name: "a0", title: "Actions", isHidden: true },
        { name: "a1", title: "Col 1" },
        { name: "a2", title: "Col 2" },
        { name: "a3", title: "Col 3" }
    ],
    rows: [
        { a0: "1", a1: "1.1", a2: "1.2", a3: "1.3" },
        { a0: "2", a1: "2.1", a2: "2.2", a3: "2.3" },
        { a0: "3", a1: "3.1", a2: "3.2", a3: "3.3" },
        { a0: "4", a1: "4.1", a2: "4.2", a3: "4.3" },
        { a0: "5", a1: "5.1", a2: "5.2", a3: "5.3" },
        { a0: "6", a1: "6.1", a2: "6.2", a3: "6.3" },
        { a0: "7", a1: "7.1", a2: "7.2", a3: "7.3" },
        { a0: "8", a1: "8.1", a2: "8.2", a3: "8.3" },
        { a0: "9", a1: "9.1", a2: "9.2", a3: "9.3" }
    ]
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the table
let el = document.querySelector("#table");
let table = Components.Table({
    el: el,
    className: "table-sm is-striped",
    columns: [
        { name: "a0", title: "Actions", isHidden: true },
        { name: "a1", title: "Col 1" },
        { name: "a2", title: "Col 2" },
        { name: "a3", title: "Col 3" }
    ],
    rows: [
        { a0: "1", a1: "1.1", a2: "1.2", a3: "1.3" },
        { a0: "2", a1: "2.1", a2: "2.2", a3: "2.3" },
        { a0: "3", a1: "3.1", a2: "3.2", a3: "3.3" },
        { a0: "4", a1: "4.1", a2: "4.2", a3: "4.3" },
        { a0: "5", a1: "5.1", a2: "5.2", a3: "5.3" },
        { a0: "6", a1: "6.1", a2: "6.2", a3: "6.3" },
        { a0: "7", a1: "7.1", a2: "7.2", a3: "7.3" },
        { a0: "8", a1: "8.1", a2: "8.2", a3: "8.3" },
        { a0: "9", a1: "9.1", a2: "9.2", a3: "9.3" }
    ]
});

Web Component

// Return the table properties return { className: "table-sm is-striped", columns: [ { name: "a0", title: "Actions", isHidden: true }, { name: "a1", title: "Col 1" }, { name: "a2", title: "Col 2" }, { name: "a3", title: "Col 3" } ], rows: [ { a0: "1", a1: "1.1", a2: "1.2", a3: "1.3" }, { a0: "2", a1: "2.1", a2: "2.2", a3: "2.3" }, { a0: "3", a1: "3.1", a2: "3.2", a3: "3.3" }, { a0: "4", a1: "4.1", a2: "4.2", a3: "4.3" }, { a0: "5", a1: "5.1", a2: "5.2", a3: "5.3" }, { a0: "6", a1: "6.1", a2: "6.2", a3: "6.3" }, { a0: "7", a1: "7.1", a2: "7.2", a3: "7.3" }, { a0: "8", a1: "8.1", a2: "8.2", a3: "8.3" }, { a0: "9", a1: "9.1", a2: "9.2", a3: "9.3" } ] }
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-table>
    // Return the table properties
    return {
        className: "table-sm is-striped",
        columns: [
            { name: "a0", title: "Actions", isHidden: true },
            { name: "a1", title: "Col 1" },
            { name: "a2", title: "Col 2" },
            { name: "a3", title: "Col 3" }
        ],
        rows: [
            { a0: "1", a1: "1.1", a2: "1.2", a3: "1.3" },
            { a0: "2", a1: "2.1", a2: "2.2", a3: "2.3" },
            { a0: "3", a1: "3.1", a2: "3.2", a3: "3.3" },
            { a0: "4", a1: "4.1", a2: "4.2", a3: "4.3" },
            { a0: "5", a1: "5.1", a2: "5.2", a3: "5.3" },
            { a0: "6", a1: "6.1", a2: "6.2", a3: "6.3" },
            { a0: "7", a1: "7.1", a2: "7.2", a3: "7.3" },
            { a0: "8", a1: "8.1", a2: "8.2", a3: "8.3" },
            { a0: "9", a1: "9.1", a2: "9.2", a3: "9.3" }
        ]
    }
</bs-table>

References

Table(props:ITableProps):ITable

ITable

Name Returns Description
addRows(rows:_Array_) void Renders the rows to the existing table.
el Element The jquery element.

ITableProps

Name Type Description
className string The class name to apply to button group.
columns Array<ITableColumn> The table columns.
el HTMLElement The element to render the button group to.
onClickCell (el: HTMLTableDataCellElement, column?: ITableColumn, data?: any) => void The table row cell click event.
onClickHeader (el: HTMLTableHeaderCellElement, column?: ITableColumn) => void The table header cell click event.
onRenderCell (el?: HTMLTableDataCellElement, column?: ITableColumn, data?: any) => void The table row cell render event.
onRenderHeaderCell (el?: HTMLTableDataCellElement, column?: ITableColumn) => void The header row cell render event.
onRenderHeaderRow (el?: HTMLTableRowElement) => void The table header row render event.
onRenderRow (el?: HTMLTableRowElement, data?: any) => void The table data row render event.
rows Array<any> The table data. The value is based on the key matching a column’s name property.

ITableColumn

Name Type Description
className string The class name to apply to td data element.
data any The data associated with the column.
enableSort boolean True to sort the row elements, when clicking on the header cell.
isHidden boolean True to hide the header row value for this column. The data will still be displayed.
name string The column key value. The row’s key value will map to this property.
onClickCell (el: HTMLTableDataCellElement, column?: ITableColumn, data?: any) => void The table row cell click event.
onClickHeader (el: HTMLTableHeaderCellElement, column?: ITableColumn) => void The table header cell click event.
onRenderCell (el?: HTMLTableDataCellElement, column?: ITableColumn, data?: any) => void The table row cell render event.
onRenderHeaderCell (el?: HTMLTableDataCellElement, column?: ITableColumn) => void The header row cell render event.
scope string The scope attribute property for each td element.
title string The html displayed in the th element.