Table

1 minute read

References

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

React

import * as React from "react";
import { Table } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <Table
                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" }
                ]}
            />
        );
    }
}

VueJS

<template>
    <Table className="table-sm is-striped" v-bind:columns="columns" v-bind:rows="rows" />
</template>

<script>
import { Table } from "gd-sprest-bs-vue";
export default {
    components: { Table },
    data() {
        return {
            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>

Code Playground