Git Product home page Git Product logo

wetable's Introduction

weTable

A table builder which is able to graft row from row

Usage

Install

yarn add we-table or npm install we-table

Usage

import {
    Table,
    Row,
    Cell
} from 'we-table'

const table = new Table()

const priceName = new Row().addCell([new Cell("票价名称", 2, 3), new Cell("三楼200元"), new Cell("内场280元")])
const price = new Row().addCell([new Cell("1440元"), new Cell("720元")])
const priceAmount = new Row().addCell([new Cell("票价", 1, 3), new Cell(144000), new Cell(72000)])
const priceNumber = new Row().addCell([new Cell("可售张数", 1, 3), new Cell(9), new Cell(9)])
const priceRate = new Row().addCell([new Cell("已售比例", 1, 3), new Cell(0.5), new Cell(0.5)])

const firstRow = new Row()
            .addCell(new Cell("销售渠道", 5, 3))
            .appendRow(priceName)
            .addCell(new Cell("总计", 5))
// or:
// const firstRow = priceName.unshiftCell(new Cell("销售渠道", 5, 3)).addCell(new Cell("总计", 5))

table.addRow([firstRow, price, priceAmount, priceNumber, priceRate])

console.log(table.render())

Output

<table><tr><td rowspan="5" colspan="3" class="row-5 col-3">销售渠道</td><td rowspan="2" colspan="3" class="row-2 col-3">票价名称</td><td >三楼200元</td><td >内场280元</td><td rowspan="5" class="row-5">总计</td></tr><tr><td >1440元</td><td >720元</td></tr><tr><td colspan="3" class="col-3">票价</td><td >144000</td><td >72000</td></tr><tr><td colspan="3" class="col-3">可售张数</td><td >9</td><td >9</td></tr><tr><td colspan="3" class="col-3">已售比例</td><td >0.5</td><td >0.5</td></tr></table>

API reference

Modules

weTable

weTable: A table builder which is able to graft row from row

Classes

Cell

Cell: Table Cell (td)

Row

Row: Table Row (tr)

Table

Table: HTML Table (table)

weTable

weTable: A table builder which is able to graft row from row

Cell

Cell: Table Cell (td)

Kind: global class

new Cell(content, row, col)

create a Cell instance

Param Type Default Description
content String content to display
row Number 1 rowspan value
col Number 1 colspan value

cell.setSpan(row, col)

set rowspan and colspan

Kind: instance method of Cell

Param Type Default Description
row Number 1 rowspan value
col Number 1 colspan value

cell.setClass(className)

set class name

Kind: instance method of Cell

Param Type Description
className String class name

cell.render() ⇒ String

render td element str

Kind: instance method of Cell

Row

Row: Table Row (tr)

Kind: global class

new Row(cells)

create a Row instance

Param Type Description
cells Array | Object cell instance

row.addCell(cells)

append cell(s) in the back of cells stack (push)

Kind: instance method of Row

Param Type Description
cells Array | Object cell instance

row.unshiftCell(cells)

insert cell(s) in the front of cells stack (unshift)

Kind: instance method of Row

Param Type Description
cells Array | Object cell instance

row.appendRow(row)

graft row cells in the back of cells stack

Kind: instance method of Row

Param Type Description
row Row row instance

row.setClass(className)

set class name

Kind: instance method of Row

Param Type Description
className String class name

row.render() ⇒ String

render tr element str

Kind: instance method of Row

Table

Table: HTML Table (table)

Kind: global class

new Table(rows)

create a Table instance

Param Type Description
rows Array | Object row instance

table.addRow(rows)

append row(s) in the back of rows stack (push)

Kind: instance method of Table

Param Type Description
rows Array | Object row instance

table.unshiftRow(rows)

insert row(s) in the front of rows stack (unshift)

Kind: instance method of Table

Param Type Description
rows Array | Object row instance

table.setClass(className)

set class name

Kind: instance method of Table

Param Type Description
className String class name

table.render() ⇒ String

render table element str

Kind: instance method of Table

docs autogenerated via jsdoc2md

wetable's People

Contributors

henryluki avatar zhengjunxin avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.