A RWD-based html table extend tool which made by pure JavaScript and CSS, you don't need to add any other dependency libaraies.
When you want to use RWD html table extension, you need to include both CSS file and JavaScript file.
<link href="http:https://sean1093.github.io/lib/css/rwd-table-extend/1.0.4/rwd-table-extend.min.css" rel="stylesheet">
<script src="http:https://sean1093.github.io/lib/js/rwd-table-extend/1.0.4/rwd-table-extend.min.js"></script>First, you need to create a div with id.
<div id="myTable"></div>Then, create rwdTableExtend object and initial table.
var myTable = new rwdTableExtend("myTable");
myTable.initTable(setAutoView);You can give a boolean value "setAutoView" to decide set auto change view when small device or not.
You need to insert an array for your header.
myTable.addTableHead(['ID','Name', 'Number', 'Class', 'Address']);or
var header = ['ID','Name', 'Number', 'Class', 'Address'];
myTable.addTableHead(header);/**
* addDatas
* @param {object/object[]} source: data source
* @param {boolean} editable: cell editable or not
* @param {number} locate: row index
* @return {null}
*/
rwdTableExtend.addDatas(source, editable, locate)We use the concept of data binding, the data source will auto mapping your header. Therefore, when you want to add table data, you need to define a schema JSON mapping your header like this:
var dataSource =
{
"ID": "test1",
"Name": "Tom",
"Number":234,
"Class": "A",
"Address": "Taiwan, Taipei"
};
myTable.addDatas(dataSource); You also can use an array of JSON data source:
var dataSource = [
{
"ID": "test4",
"Name": "BBB",
"Number":2222,
"Class": "A",
"Address": "Taiwan, New Taipei"
},
{
"ID": "test5",
"Name": "AAA",
"Number":55555,
"Class": "A",
"Address": "USA"
}
];
myTable.addDatas(dataSource); If you want to insert with specific row index, you can give row index in third parameter. For example, insert data into row 5.
myTable.addDatas(dataSource, false, 5); If you want to set cell style, you can give the object value when you add data:
- foreColor: color text or color code
- background : color text or color code
- fontSize: px / em / rem
- fontFamily: generic-family
- textAlign:
rwdTableExtend.ALIGNCenter/rwdTableExtend.ALIGNLeft/rwdTableExtend.ALIGNRight
var dataSource = {
"ID": "test3",
"Name": {
"value":"AAA",
"background":"green",
},
"Number": {
"value": -1,
"foreColor": "red",
"fontSize": "11px",
"fontFamily": "Arial",
"textAlign": rwdTableExtend.ALIGNCenter
},
"Class": rwdTableExtend.GREENCircle,
"Address": "Taiwan, New Taipei"
};Sometimes, you will use light singal for some requirment, you can give these const in your value: (rwdTableExtend.REDCircle / rwdTableExtend.GREENCircle)
var dataSource = {
"ID": "test3",
"Name": "AAA",
"Number": { "value": -1, "foreColor": "red" },
"Class": rwdTableExtend.GREENCircle,
"Address": "Taiwan, New Taipei"
};After setting your header, you also can update header by using this function.
myTable.updateHead(['ID','Name', 'Number', 'Class', 'Address']);or
var header = ['ID','Name', 'Number', 'Class', 'Address'];
myTable.updateHead(header);You can set header's text color and background color by using setHeaderBackColor(color) and setHeaderTextColor(color)
myTable.setHeaderBackColor("white");
myTable.setHeaderTextColor("black");If you want to let something unimportant columns hide when screen is small, use hideContent(header-name)
myTable.hideContent("Address");Delete row by using deleteRow(row-index, delete-count)
/**
* deleteRow
* @param {number} idx: delete row start location
* @param {number} count: number of rows you want to delete
* @return {null}
*/
myTable.deleteRow(idx, count);Insert row by using insertRow(row-index, insert-count, editable)
/**
* insertRow
* @param {number} idx: insert row start location
* @param {number} count: number of rows you want to insert
* @param {boolean} editable: cell editable or not
* @return {null}
*/
rwdTableExtend.insertRow(idx, count, editable);It will return table row count.
/**
* getRowCount
* @return {number} return table row count
*/
rwdTableExtend.getRowCount();/**
* setRowBorder
* @param {number} idx: column index
* @param {const} locate: rwdTableExtend.BORDERTop /rwdTableExtend.BORDERBottom
* @param {string} color: border's color (ex: "red")
* @return {null}
*/
rwdTableExtend.setRowBorder(idx, locate, color);/**
* setColBorder
* @param {number} idx: column index
* @param {const} locate: rwdTableExtend.BORDERLeft /rwdTableExtend.BORDERRight
* @param {string} color: border's color (ex: "red")
* @param {boolean} withTitle: column border with title row or not
* @return {null}
*/
rwdTableExtend.setColBorder(idx, locate, color, withTitle);- Bug fix: addRowDatas()
- Add new feature:
- setSize
- fixHeader
- getColumnCount
- getRowCount
- setHeaderBackColor
- setHeaderTextColor
- setRowBorder
- setHeaderBorder
- setColBorder
- Add new feature:
- addRowDatas (by array of data)
- data cell fontSize, fontFamily and textAlign
- setRowBackColor
- tableConfig
- Add new feature:
- addDatas (multiple data)
- data cell foreColor & background
- setAutoView
- getRowCount
- setRowBorder
- setColBorder
- Add new feature