Permalink
Fetching contributors…
Cannot retrieve contributors at this time
248 lines (193 sloc) 7.62 KB
use colSpan to span columns - (colSpan above normal cell)
┌───────────────┐
│ greetings     │
├───────────────┤
│ greetings     │
├───────┬───────┤
│ hello │ howdy │
└───────┴───────┘
      var table = new Table({style:{head:[],border:[]}});

      table.push(
        [{colSpan:2,content:'greetings'}],
        [{colSpan:2,content:'greetings'}],
        ['hello','howdy']
      );
use colSpan to span columns - (colSpan below normal cell)
┌───────┬───────┐
│ hello │ howdy │
├───────┴───────┤
│ greetings     │
├───────────────┤
│ greetings     │
└───────────────┘
      var table = new Table({style:{head:[],border:[]}});

      table.push(
        ['hello','howdy'],
        [{colSpan:2,content:'greetings'}],
        [{colSpan:2,content:'greetings'}]
      );
use rowSpan to span rows - (rowSpan on the left side)
┌───────────┬───────────┬───────┐
│ greetings │           │ hello │
│           │ greetings ├───────┤
│           │           │ howdy │
└───────────┴───────────┴───────┘
      var table = new Table({style:{head:[],border:[]}});

      table.push(
        [{rowSpan:2,content:'greetings'},{rowSpan:2,content:'greetings',vAlign:'center'},'hello'],
        ['howdy']
      );
use rowSpan to span rows - (rowSpan on the right side)
┌───────┬───────────┬───────────┐
│ hello │ greetings │           │
├───────┤           │           │
│ howdy │           │ greetings │
└───────┴───────────┴───────────┘
      var table = new Table({style:{head:[],border:[]}});

      table.push(
        ['hello',{rowSpan:2,content:'greetings'},{rowSpan:2,content:'greetings',vAlign:'bottom'}],
        ['howdy']
      );
mix rowSpan and colSpan together for complex table layouts
┌───────┬─────┬────┐
│ hello │ sup │ hi │
├───────┤     │    │
│ howdy │     │    │
├───┬───┼──┬──┤    │
│ o │ k │  │  │    │
└───┴───┴──┴──┴────┘
      var table = new Table({style:{head:[],border:[]}});

      table.push(
        [{content:'hello',colSpan:2},{rowSpan:2, colSpan:2,content:'sup'},{rowSpan:3,content:'hi'}],
        [{content:'howdy',colSpan:2}],
        ['o','k','','']
      );
multi-line content will flow across rows in rowSpan cells
┌───────┬───────────┬───────────┐
│ hello │ greetings │ greetings │
├───────┤ friends   │ friends   │
│ howdy │           │           │
└───────┴───────────┴───────────┘
      var table = new Table({style:{head:[],border:[]}});

      table.push(
        ['hello',{rowSpan:2,content:'greetings\nfriends'},{rowSpan:2,content:'greetings\nfriends'}],
        ['howdy']
      );
multi-line content will flow across rows in rowSpan cells - (complex layout)
┌───────┬─────┬────┐
│ hello │ sup │ hi │
├───────┤ man │ yo │
│ howdy │ hey │    │
├───┬───┼──┬──┤    │
│ o │ k │  │  │    │
└───┴───┴──┴──┴────┘
      var table = new Table({style:{head:[],border:[]}});

      table.push(
        [{content:'hello',colSpan:2},{rowSpan:2, colSpan:2,content:'sup\nman\nhey'},{rowSpan:3,content:'hi\nyo'}],
        [{content:'howdy',colSpan:2}],
        ['o','k','','']
      );
rowSpan cells can have a staggered layout
┌───┬───┐
│ a │ b │
│   ├───┤
│   │ c │
├───┤   │
│ d │   │
└───┴───┘
      var table = new Table({style:{head:[],border:[]}});

      table.push(
        [{content:'a',rowSpan:2},'b'],
        [{content:'c',rowSpan:2}],
        ['d']
      );
the layout manager automatically create empty cells to fill in the table
┌───┬───┬──┐
│ a │ b │  │
│   ├───┤  │
│   │   │  │
│   ├───┴──┤
│   │ c    │
├───┤      │
│   │      │
└───┴──────┘
      var table = new Table({style:{head:[],border:[]}});

      //notice we only create 3 cells here, but the table ends up having 6.
      table.push(
        [{content:'a',rowSpan:3,colSpan:2},'b'],
        [],
        [{content:'c',rowSpan:2,colSpan:2}],
        []
      );
use table rowHeights option to fix row height. The truncation symbol will be shown on the last line.
┌───────┐
│ hello │
│ hi…   │
└───────┘
      var table = new Table({rowHeights:[2],style:{head:[],border:[]}});

      table.push(['hello\nhi\nsup']);
if colWidths is not specified, the layout manager will automatically widen rows to fit the content
┌─────────────┐
│ hello there │
├──────┬──────┤
│ hi   │ hi   │
└──────┴──────┘
      var table = new Table({style:{head:[],border:[]}});

      table.push(
        [{colSpan:2,content:'hello there'}],
        ['hi', 'hi']
      );
you can specify a column width for only the first row, other rows will be automatically widened to fit content
┌─────────────┐
│ hello there │
├────┬────────┤
│ hi │   hi   │
└────┴────────┘
      var table = new Table({colWidths:[4],style:{head:[],border:[]}});

      table.push(
        [{colSpan:2,content:'hello there'}],
        ['hi',{hAlign:'center',content:'hi'}]
      );
a column with a null column width will be automatically widened to fit content
┌─────────────┐
│ hello there │
├────────┬────┤
│     hi │ hi │
└────────┴────┘
      var table = new Table({colWidths:[null, 4],style:{head:[],border:[]}});

      table.push(
        [{colSpan:2,content:'hello there'}],
        [{hAlign:'right',content:'hi'}, 'hi']
      );
feel free to use colors in your content strings, column widths will be calculated correctly

table image

      var table = new Table({colWidths:[5],style:{head:[],border:[]}});

      table.push([colors.red('hello')]);