console-grid

Console log a grid

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
console-grid
1302.2.23 months ago5 years agoMinified + gzip package size for console-grid in KB

Readme

console-grid

Features

  • Console log a grid
  • Support tree style rows
  • Custom cell formatter
  • Column align/sorting
  • Multiple lines header
  • Support colorful cells

Install

``` npm i console-grid ```

Usage

```js const CG = require("console-grid"); CG({
"columns": ["", "Name", "Value"],
"rows": [
    [1, "Tom", "Value 1"],
    [2, "Jerry", "Value 2"]
]
}); ┌───┬───────┬─────────┐ │ │ Name │ Value │ ├───┼───────┼─────────┤ │ 1 │ Tom │ Value 1 │ │ 2 │ Jerry │ Value 2 │ └───┴───────┴─────────┘ ```

Without header:

```js const CG = require("console-grid"); CG({
"options": {
    "headerVisible": false
},
"columns": ["", "Name", "Value"],
"rows": [
    [1, "Tom", "Value 1"],
    [2, "Jerry", "Value 2"]
]
}); ┌───┬───────┬─────────┐ │ 1 │ Tom │ Value 1 │ │ 2 │ Jerry │ Value 2 │ └───┴───────┴─────────┘ ```

With column minWidth and maxWidth (Multiple Line Header):

```js const CG = require("console-grid"); CG({
"columns": ["", {
    "name": "Name",
    "minWidth": 15
}, {
    "name": "Value",
    "maxWidth": 20
}, {
    "name": "Multiple Line Header",
    "maxWidth": 15
}],
"rows": [
    [1, "Hello", "Long Text Value", "Long Text Value"],
    [2, "Hello There", "Long Text Value Long Text Value", "Long Text Value Long Text Value"]
]
}); ┌───┬─────────────────┬──────────────────────┬─────────────────┐ │ │ │ │ Multiple Line │ │ │ Name │ Value │ Header │ ├───┼─────────────────┼──────────────────────┼─────────────────┤ │ 1 │ Hello │ Long Text Value │ Long Text Value │ │ 2 │ Hello There │ Long Text Value L... │ Long Text Va... │ └───┴─────────────────┴──────────────────────┴─────────────────┘ ```

With column align and padding:

```js const CG = require("console-grid"); CG({
"options": {
    "padding": 2
},
"columns": [{
    "id": "default",
    "name": "Default"
}, {
    "id": "left",
    "name": "Left",
    "align": "left"
}, {
    "id": "center",
    "name": "Center",
    "align": "center"
}, {
    "id": "right",
    "name": "Right",
    "align": "right"
}, {
    "id": "right",
    "name": "Multiple Line Right",
    "maxWidth": 12,
    "align": "right"
}],
"rows": [{
    "default": "Cell",
    "left": "Markdown",
    "center": "Start",
    "right": "123.0"
}, {
    "default": "Content",
    "left": "Grid",
    "center": "Complete",
    "right": "8.1"
}]
}); ┌───────────┬────────────┬────────────┬─────────┬────────────────┐ │ │ │ │ │ Multiple │ │ Default │ Left │ Center │ Right │ Line Right │ ├───────────┼────────────┼────────────┼─────────┼────────────────┤ │ Cell │ Markdown │ Start │ 123.0 │ 123.0 │ │ Content │ Grid │ Complete │ 8.1 │ 8.1 │ └───────────┴────────────┴────────────┴─────────┴────────────────┘ ```

With tree rows (nullPlaceholder/number align and formatter):

```js const CG = require("console-grid"); CG({
"columns": [{
    "id": "name",
    "name": "Name",
    "type": "string",
    "maxWidth": 30
}, {
    "id": "value",
    "name": "Value",
    "type": "string",
    "maxWidth": 7
}, {
    "id": "null",
    "name": "Null"
}, {
    "id": "number",
    "type": "number",
    "name": "Number",
    "maxWidth": 12
}],
"rows": [{
    "name": "Row 1",
    "value": "1",
    "number": 1
}, {
    "name": "Row Name",
    "value": "2",
    "number": 2
}, {
    "name": "Row Long Name Long Name Long Name",
    "value": "3",
    "number": 3
}, {
    "name": "Group",
    "value": "4",
    "number": 4,
    "subs": [{
        "name": "Sub Group 1",
        "value": "5",
        "number": 5,
        "subs": [{
            "name": "Sub Group 1 Sub Row 1",
            "value": "6",
            "number": 6
        }, {
            "name": "Sub Group 1 Sub Row 2",
            "value": "7",
            "number": 7
        }]
    }, {
        "name": "Sub Row 1",
        "value": "8",
        "number": 8
    }, {
        "name": "Sub Row 2",
        "value": "9",
        "number": 9
    }]
}]
}); ┌────────────────────────────────┬───────┬──────┬────────┐ │ Name │ Value │ Null │ Number │ ├────────────────────────────────┼───────┼──────┼────────┤ │ Row 1 │ 1 │ - │ 1.00 │ │ Row Name │ 2 │ - │ 2.00 │ │ Row Long Name Long Name Lon... │ 3 │ - │ 3.00 │ │ Group │ 4 │ - │ 4.00 │ │ ├ Sub Group 1 │ 5 │ - │ 5.00 │ │ │ ├ Sub Group 1 Sub Row 1 │ 6 │ - │ 6.00 │ │ │ └ Sub Group 1 Sub Row 2 │ 7 │ - │ 7.00 │ │ ├ Sub Row 1 │ 8 │ - │ 8.00 │ │ └ Sub Row 2 │ 9 │ - │ 9.00 │ └────────────────────────────────┴───────┴──────┴────────┘ ```

With inner border:

```js const CG = require("console-grid"); CG({
"columns": [{
    "id": "name",
    "name": "Name"
}, {
    "id": "value",
    "name": "Value"
}],
"rows": [{
    "name": "Total",
    "value": 80
}, {
    "innerBorder": true
}, {
    "name": "Item 1",
    "value": 30
}, {
    "name": "Item 2",
    "value": 50,
    "subs": [{
        "name": "Sub 21"
    }, {
        "name": ""
    }, {
        "name": "Sub 22"
    }]
}]
}); ┌──────────┬───────┐ │ Name │ Value │ ├──────────┼───────┤ │ Total │ 80 │ ├──────────┼───────┤ │ Item 1 │ 30 │ │ Item 2 │ 50 │ │ ├ Sub 21 │ - │ │ │ │ - │ │ └ Sub 22 │ - │ └──────────┴───────┘ ```

With column sorting:

```js const CG = require("console-grid"); CG({
"options": {
    "sortField": "value",
    "sortAsc": false
},
"columns": [{
    "id": "name",
    "name": "Name"
}, {
    "id": "value",
    "name": "Value",
    "type": "number"
}],
"rows": [{
    "name": "Item 1",
    "value": 80
}, {
    "name": "Item 2",
    "value": 30
}, {
    "name": "Item 3",
    "value": 50
}]
}); ┌────────┬────────┐ │ Name │ Value │ ├────────┼────────┤ │ Item 1 │ 80 │ │ Item 3 │ 50 │ │ Item 2 │ 30 │ └────────┴────────┘ ```

With color (using eight-colors):

```js const CG = require("console-grid"); const EC = require("eight-colors"); const data = {
columns: ['Name', EC.cyan('Color Text'), EC.bg.cyan('Color Background')],
rows: [
    ['Red', EC.red('red text'), EC.bg.red('red bg')],
    ['Green', EC.green('green text'), EC.bg.green('green text')]
]
}; CG(data); ``` ```js // silent output and remove color data.options = {
silent: true
}; const lines = CG(data); const withoutColor = EC.remove(lines.join(os.EOL)); console.log(withoutColor); ┌───────┬────────────┬──────────────────┐ │ Name │ Color Text │ Color Background │ ├───────┼────────────┼──────────────────┤ │ Red │ red text │ red bg │ │ Green │ green text │ green text │ └───────┴────────────┴──────────────────┘ ```

With CSV (using papaparse):

```js const CG = require("console-grid"); const Papa = require("papaparse"); const csvString = `Column 1,Column 2,Column 3,Column 4 1-1,1-2,1-3,1-4 2-1,2-2,2-3,2-4 3-1,3-2,3-3,3-4 4,5,6,7`; const json = Papa.parse(csvString); const data = {
columns: json.data.shift(),
rows: json.data
}; CG(data); ┌──────────┬──────────┬──────────┬──────────┐ │ Column 1 │ Column 2 │ Column 3 │ Column 4 │ ├──────────┼──────────┼──────────┼──────────┤ │ 1-1 │ 1-2 │ 1-3 │ 1-4 │ │ 2-1 │ 2-2 │ 2-3 │ 2-4 │ │ 3-1 │ 3-2 │ 3-3 │ 3-4 │ │ 4 │ 5 │ 6 │ 7 │ └──────────┴──────────┴──────────┴──────────┘ ```

With special character:

  • Unresolved: some special characters has unexpected width, especially on different output terminals (depends on fonts)
```js const CG = require("console-grid"); CG({
"columns": ["Special", "Character"],
"rows": [
    ["Chinese,中文", "12【标,点。】"],
    ["あいアイサてつろ", "☆√✔×✘❤♬"],
    ["㈀ㅏ㉡ㅎㅉㅃㅈㅂ", "①⑵⒊Ⅳ❺ʊəts"],
    ["汉字繁體", "АБВДшщыф"],
    ["Emoji👋👩⌚✅", "↑↓▲▼○●♡♥"]
]
}); ┌───────────────────┬──────────────────┐ │ Special │ Character │ ├───────────────────┼──────────────────┤ │ Chinese,中文 │ 12【标,点。】 │ │ あいアイサてつろ │ ☆√✔×✘❤♬ │ │ ㈀ㅏ㉡ㅎㅉㅃㅈㅂ │ ①⑵⒊Ⅳ❺ʊəts │ │ 汉字繁體 │ АБВДшщыф │ │ Emoji👋👩⌚✅ │ ↑↓▲▼○●♡♥ │ └───────────────────┴──────────────────┘ ```

With custom getCharLength (using eastasianwidth):

  • Unresolved: still not perfect in special character width
```js const CG = require("console-grid"); const eaw = require("eastasianwidth"); CG({
options: {
    getCharLength: (char) => {
        return eaw.length(char);
    }
},
columns: ["Special", "Character"],
rows: [
    ["Chinese,中文", "12【标,点。】"],
    ["あいアイサてつろ", "☆√✔×✘❤♬"],
    ["㈀ㅏ㉡ㅎㅉㅃㅈㅂ", "①⑵⒊Ⅳ❺ʊəts"],
    ["汉字繁體", "АБВДшщыф"],
    ["Emoji👋👩⌚✅", "↑↓▲▼○●♡♥"]
]
}); ┌──────────────────┬──────────────────┐ │ Special │ Character │ ├──────────────────┼──────────────────┤ │ Chinese,中文 │ 12【标,点。】 │ │ あいアイサてつろ │ ☆√✔×✘❤♬ │ │ ㈀ㅏ㉡ㅎㅉㅃㅈㅂ │ ①⑵⒊Ⅳ❺ʊəts │ │ 汉字繁體 │ АБВДшщыф │ │ Emoji👋👩⌚✅ │ ↑↓▲▼○●♡♥ │ └──────────────────┴──────────────────┘ ```

Data Format Definition: CGDF

```js {
options: Object, //define grid level options
columns: Array, //define column list and header
rows: Array //define row list
} ```

Default Options

```js {
silent: false,
headerVisible: false,
padding: 1,
defaultMinWidth: 1,
defaultMaxWidth: 50,
sortField: '',
sortAsc: false,
sortIcon: '*',
treeId: 'name',
treeIcon: '├ ',
treeLink: '│ ',
treeLast: '└ ',
treeIndent: '  ',
nullPlaceholder: '-',
//border definition:
//H: horizontal, V: vertical
//T: top, B: bottom, L: left, R: right, C: center
borderH: '─',
borderV: '│',
borderTL: '┌',
borderTC: '┬',
borderTR: '┐',
borderCL: '├',
borderCC: '┼',
borderCR: '┤',
borderBL: '└',
borderBC: '┴',
borderBR: '┘',
getCharLength: defaultGetCharLength
} ```

Column Properties

```js {
id: String,
name: String,
type: String, //string, number
align : String, //left(default), center, right
minWidth: Number,
maxWidth: Number,
formatter: Function //custom cell formatter
} ```

Row Properties

```js {
//column id key: cell value
innerBorder: Boolean,
subs: Array //sub rows
} ```

CHANGELOG

CHANGELOG.md

Markdown Grid

markdown-grid - Markdown Grid Generator