EzTable 0.1

Smart DataTable, built in JavaScript ES6 & CSS by Izhar Fine.
An easy way to convert simple table to smart DataTable.

Introduction

Demo: https://izharfine.github.io/EzTable/

How to use

First you need to add refernces to the js and css files like this:

<script type="module">
    import { EzTableGenerator } from "yourPath/eztablegenerator.js";
    window["EzTableGenerator"] = EzTableGenerator;
</script>
<link rel="stylesheet" type="text/css" href="yourPath/eztable.css">

then you need to create the EzTableGenerator object:

var ezTable = new EzTableGenerator();

after that you have 2 options:

1. Build your table with JsonObject you made (more information about EzTable JsonObject later in this introduction).

ezTable.buildTable(YourJsonObject, 'HTMLTargetSelector');

2. Configuration the table build by your own.
   For this part you need to use:

ezTable.controlPanel();

after you use this command a window with 3 labels will appear in the left top corner of your page.

Properties(Required):

TableName(string)

Describes your table name.

AddCallBack(string)

If you want to have a row add option to your table you need to write here function name for callback.
The callback will get 2 parameters:

1. New row object.
   
2. Table Name.
   

UpdateCallBack(string)

If you want to have a update column option to your table you need to write here function name for callback.
The callback will get 5 parameters:

1. Changed field object.
   
2. Old field value.
   
3. Field struct.
   
4. Row ID.
   
5. Table name.
   

DeleteCallBack(string)

If you want to have a delete row option to your table you need to write here function name for callback.
The callback will get 2 parameters:

1. Row ID.
   
2. Table Name.
   

RowsInPage(number)

If you want to add paging to your table its describes how many rows you want per page (0 means no paging).

EnableSearch(boolean)

Enable/disable search input to your table.

Sortable(boolean)

Enable/disable sortable by column to your table.

ColumnMode(boolean)

Table view mode.

Template(string)

Template of your table.

Struct:

In this part you can describe each column (its especially helps with the UpdateCallBack and AddCallBack parts).
You should add structs as many as your columns length, each struct describes 1 column by index.
You can add struct object by click on the add object button.

PHName(string)

Physical name of the column.

Type(string)

Type of the column.

Disabled(boolean)

Enable/disable (only relevant if using the UpdateCallBack/AddCallBack).

SelectName(string)

Select name that belong to the column (only relevant if using the UpdateCallBack/AddCallBack and you want to add dropdown (select)).

Selects:

In this part you can add dropdowns (selects) to your table.
You can add select object by click on the add object button and add option object by click the add button.

Name(string)

Name of the select (the identity).

Value(string)

Option value.

Desc(string)

Option description.

Before you build the table you MUST have a DOM table object that describes your data (header and body):

<table>
<thead>
<tr>
<th>TITLE</th>
</tr>
</thead>
<tbody>
<tr data-id="5">
<td>TEXT</td>
</tr>
</tbody>
</table>

Note:

data-id attribute desctibe the identity in the DB and its required only if u need it for UpdateCallBack/DeleteCallBack.

Now when everything is ready you can use:

ezTable.buildTable('DOMTableSelector', 'DOMTargetSelector');

Important notes and information:

After you finish to custom your table you can save the settings:

var properties = JSON.stringify(ezTable.Properties);
var struct = JSON.stringify(ezTable.TableStruct);
var selects = JSON.stringify(ezTable.Selects);

And re-use it in that way:

ezTable.Properties = JSON.parse(properties);
ezTable.TableStruct = JSON.parse(struct);
ezTable.Selects = JSON.parse(selects);

Valid build of EzTable JsonObject:

var JsonObject = {
    Properties:[{
        AddCallBack: 'add',
        UpdateCallBack: 'update',
        DeleteCallBack: 'delete',
        EnableSearch: true,
        Sortable: true,
        ColumnMode: false,
        RowsInPage: 2,
        TableName: 'ez-table',
        Template: ''
    }],
    Selects:[
            { Name: "Genders", Options:
            [{Value: '1', Desc: 'Male'},
            {Value: '2', Desc: 'Female'}]
        },
        { Name: "Test", Options:
            [{Value: '1', Desc: 'Test'},
            {Value: '2', Desc: 'Me'}]
        }
    ],
    TableStruct:[
        {
            PHName:'USR_First_Name',
            Type:'Text',
            Disabled:false,
            SelectName: ''
        },
        {
            PHName:'USR_Last_Name',
            Type:'Text',
            Disabled:true,
            SelectName: ''
        },
        {
            PHName:'USR_Birthday',
            Type:'Date',
            Disabled:false,
            SelectName: ''
        },
        {
            PHName:'USR_Active',
            Type:'Checkbox',
            Disabled:false,
            SelectName: ''
        },
        {
            PHName:'USR_Gender',
            Type:'Select',
            Disabled:false,
            SelectName: 'Genders'
        }
    ],
    Header:[
        {
            Name:'First Name',
        },
        {
            Name:'Last Name',
        },
        {
            Name:'Birthday',
        },
        {
            Name:'Active',
        },
        {
            Name:'Gender',
        }
    ],
    Body: [
            [{ Id: "1", Values:
            [{Value: 'Moshe'},
            {Value: 'Cohen'},
            {Value: null},
            {Value: false},
            {Value: '1'}]
        }],
        [{ Id: "2", Values:
            [
                {Value: 'Izhar'},
                {Value: 'Fine'},
                {Value: '1990-03-11'},
                {Value: true},
                {Value: '1'}]
     }],
     [{ Id: "5", Values:
            [
                {Value: 'Yakir'},
                {Value: 'Karsish'},
                {Value: '1990-06-11'},
                {Value: true},
                {Value: '1'}]
     }],
    ]
};

Because it wrote with ES6 module its work only in server (local server can be good too).

Enjoy! :)