a-table.js

CircleCI Star

Install

npm

npm install a-table

standalone

<script src="https://unpkg.com/a-table@1.4.10/build/a-table.min.js"></script>

style

<link rel="stylesheet" type="text/css" href="https://unpkg.com/a-table@1.4.10/css/a-table.css">

fonts

<link rel="stylesheet" type="text/css" href="https://unpkg.com/a-table@1.4.10/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

Licence

MIT