Table Builder (simple javascript library)!

Simple javascript library to build table from Json data

npm install:

    npm i tablebuilderjs

add script and css (soon to publish on npm)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/immi5556/[email protected]/Immanuel.a7.npm/Immanuel.a7.tablebuilder/tablebuilder/dist/tablebuilder.css" />
<script src="https://cdn.jsdelivr.net/gh/immi5556/[email protected]/Immanuel.a7.npm/Immanuel.a7.tablebuilder/tablebuilder/dist/tablebuilder.js"></script>

Documentation (Features)

1. event ->

   • onrowclick

2. config ->

   • roweditable = inline editing enabled for entire row

3. columns -> custom column type : with property name 'CustomProperty' and Type = 'Button' we can load custome grid column onevent: base on the type the onevent will be fired & the appropriate column config & row data is sen to this event

	var tb = new TableBuilder({
            data: [
                {
                    TableGroupUID: 'Group Name 1',
                    TableName: "Table Name 1",
                    FullSyncQuery: "Full Sync Query",
                    DeltaSyncQuery: "Delta Sync Query"
                },
                {
                    TableGroupUID: 'Group Name 2',
                    TableName: "Table Name 2",
                    FullSyncQuery: "Full Sync Query",
                    DeltaSyncQuery: "Delta Sync Query"
                },
                {
                    TableGroupUID: 'Group Name 3',
                    TableName: "Table Name 3",
                    FullSyncQuery: "Full Sync Query",
                    DeltaSyncQuery: "Delta Sync Query"
                },
                {
                    TableGroupUID: 'Group Name 4',
                    TableName: "Table Name 4",
                    FullSyncQuery: "Full Sync Query Full Sync Query Full Sync Query Full Sync Query Full Sync Query Full Sync Query Full Sync Query",
                    DeltaSyncQuery: "Delta Sync Query"
                }
            ],
            columns: [
            {
                Property: "TableGroupUID",
                Display: "Table Group"
            },
            {
                Property: "TableName",
                Display: "Table Name"
            },
            {
                Property: "FullSyncQuery",
                Display: "Full Sync",
                Overflow: "ellipsis"
            },
            {
                Property: "DeltaSyncQuery",
                Display: "Delta Sync",
                Overflow: "ellipsis"
            }
        ]
        });

TO DOs: -- Enable few even subscriptions --

Tested & Will work only on modern browsers