a-table.js
Install
npm
npm install a-table
standalone
<script src="https://unpkg.com/a-table@1.5.9/build/a-table.min.js"></script>
style
<link rel="stylesheet" type="text/css" href="https://unpkg.com/a-table@1.5.9/css/a-table.css">
fonts
<link rel="stylesheet" type="text/css" href="https://unpkg.com/a-table@1.5.9/fonts/a-table-icon.css">
Demo
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Usage
import aTable from 'a-table';
const table = new aTable('.table', {
lang:'ja'
});
table.afterRendered =
table.afterEntered = function(){
document.querySelector('.test').innerText = this.getTable();
document.querySelector('.markdown').innerText = this.getMarkdown();
}
table.afterRendered();
Methods
Methods | Description |
---|---|
getTable() | get html (table) |
getMarkdown() | get markdown (table) |
removeRow(n) | remove nth row |
removeCol(n) | remove nth col |
selectRow(n) | select nth row |
selectCol(n) | select nth col |
mergeCells() | merge selected cells into one |
splitCell() | split selected cell |
changeCellTypeTo(type) | change selected cell type to "td/th" (type should be "td" or "th") |
changeCellClass(className) | change selected cell's className |
align(dir) | align selected cell "right/center/left" |
insertRowAbove(n) | insert new row above nth row |
insertRowBelow(n) | insert new row below nth row |
insertColRight(n) | insert new col after nth col |
insertColLeft(n) | insert new col below nth col |
undo() | back to the previous state |
Options
By options, you can change the language of this table UI and change each element's class name whatever you want. Following is the default options
const defs = {
showBtnList: true,
lang,: 'en',
mark: {
align: {
default: 'left',
left: 'left',
center: 'center',
right: 'right'
},
btn: {
group: 'a-table-btn-list',
item: 'a-table-btn',
itemActive: 'a-table-btn-active'
},
icon: {
alignLeft: 'a-table-icon a-table-icon-left',
alignCenter: 'a-table-icon a-table-icon-center',
alignRight: 'a-table-icon a-table-icon-right',
undo: 'a-table-icon a-table-icon-undo',
merge: 'a-table-icon a-table-icon-merge02',
split: 'a-table-icon a-table-icon-split02',
table: 'a-table-icon a-table-icon-th02',
source: 'a-table-icon a-table-icon-source01',
td: 'a-table-icon a-table-icon-td03',
th: 'a-table-icon a-table-icon-th02'
},
selector: {
self: 'a-table-selector'
}
}
}
Support
- IE 9 ~
- Safari
- Chrome
- Firefox