node/deps/npm/node_modules/cli-table2/advanced-usage.md
Myles Borins ace4fe566f
deps: update npm to 5.5.1
Closes: https://github.com/nodejs/node/pull/16280

PR-URL: https://github.com/nodejs/node/pull/16509
Fixes: https://github.com/nodejs/node/issues/14161
Reviewed-By: Daijiro Wachi <daijiro.wachi@gmail.com>
Reviewed-By: Anna Henningsen <anna@addaleax.net>
Reviewed-By: Michaël Zasso <targos@protonmail.com>
2017-10-29 21:32:15 -04:00

247 lines
7.6 KiB
Markdown

##### use colSpan to span columns - (colSpan above normal cell)
┌───────────────┐
│ greetings │
├───────────────┤
│ greetings │
├───────┬───────┤
│ hello │ howdy │
└───────┴───────┘
```javascript
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 │
└───────────────┘
```javascript
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 │
└───────────┴───────────┴───────┘
```javascript
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 │
└───────┴───────────┴───────────┘
```javascript
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 │ │ │ │
└───┴───┴──┴──┴────┘
```javascript
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 │ │ │
└───────┴───────────┴───────────┘
```javascript
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 │ │ │ │
└───┴───┴──┴──┴────┘
```javascript
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 │ │
└───┴───┘
```javascript
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 │
├───┤ │
│ │ │
└───┴──────┘
```javascript
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… │
└───────┘
```javascript
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 │
└──────┴──────┘
```javascript
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 │
└────┴────────┘
```javascript
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 │
└────────┴────┘
```javascript
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](https://cdn.rawgit.com/jamestalmage/cli-table2/c806c2636df97f73c732b41aa913cf78d4ac0d39/examples/screenshots/truncation-with-colors.png)
```javascript
var table = new Table({colWidths:[5],style:{head:[],border:[]}});
table.push([colors.red('hello')]);
```