etable v0.1.9

etable

This is a beta version, sorry guys

etable is a plugin which can help you work with a table on a HTML page

Getting started

npm install etable --save

new Etable(tag_id, options)

tag_id - reference to your tag

options - an object of settings

import 'etable';
var e = new Etable('myDiv', {
                      head: [
                        "Number",
                        'Name',
                        'Type'
                      ],
                      colWidth: [70, 100, 70],
                      "data": [
                        [1, 'TV', 'new'],
                        [2, 'PC', 'used'],
                        [3, 'Mac', 'new'],
                        [4, 'Mac', 'used'],
                        [5, 'Mac', 'new'],
                        [6, 'Mac', 'used'],
                        [7, 'Mac', 'used'],
                        [8, 'Mac', 'new'],
                      ]
                    })
                    

Search

e.find('Mac')

Sorting

new Etable("tb", {
     isSort: true,
     head: [
       "Number",
       'Name',
       'Type'
     ],
     colWidth: [70, 100, 70],
     "data": [
       [1, 'TV', 'new'],
       [2, 'PC', 'used'],
       [3, 'Mac', 'new'],
       [4, 'Mac', 'used'],
       [5, 'Mac', 'new'],
       [6, 'Mac', 'used'],
       [7, 'Mac', 'used'],
       [8, 'Mac', 'new'],
     ]
   })
   

Custom style of a cell

options has a property cellRender. It's a function which provides rendering of a cell

cellRender: function (td, value) {
            var color = "black";
            if (value === "new") {
              color = "#00bd33"
            } else if (value === "used") {
              color = "blue"
            } else if (value === "old") {
              color = "gray"
            }
            td.css({color: color, "fontWeight": "bold"})

            if (value === "PC") {
              td.css({background: "#00b8ff top right no-repeat"})
            }
        }
        

Editable cell

Property editable for a cell

{
    value: "new",
    editable: true
}

Example

new Etable("tb", {
      isSort: true,
      head: [
        "Number",
        'Name',
        'Type'
      ],
      onChange: function (event, etable, td, oldValue, newValue) {
        console.log("old value was %s , new value is %s", oldValue, newValue)
      },
      colWidth: [70, 100, 70],
      "data": [
        [1, 'TV', {
          value: "new",
          editable: true
        }],
        [2, 'PC', 'used'],
        [3, 'Mac', 'new'],
        [4, 'Mac', 'used'],
        [5, 'Mac', 'new'],
        [6, 'Mac', 'used'],
        [7, 'Mac', 'used'],
        [8, 'Mac', 'new'],
      ]
    })
    

Special property onChange is a function which will be invoked when data has been changed

onChange: function (event, etable, td, oldValue, newValue)