docs(table): update examples

c4spar · Dec 28, 2020 · 2383f5b · 2383f5b
1 parent c7bfce6
commit 2383f5b
Show file tree

Hide file tree

Showing 20 changed files with 87 additions and 63 deletions.
diff --git a/examples/table/basic_usage.ts b/examples/table/basic_usage.ts
@@ -3,10 +3,10 @@
 import { Table } from "../../table/table.ts";
 
 const table: Table = new Table(
-  ["Row 1 Column 1", "Row 1 Column 2", "Row 1 Column 3"],
-  ["Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3"],
-  ["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"],
+  ["Baxter Herman", "Oct 1, 2020", "Harderwijk", "Slovenia"],
+  ["Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan"],
+  ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
+  ["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"],
 );
 
 console.log(table.toString());
-// You can also use table.render() as shorthand which uses Deno.stdout.writeSync() under the hood.
diff --git a/examples/table/header_and_body.ts b/examples/table/header_and_body.ts
@@ -3,10 +3,11 @@
 import { Table } from "../../table/table.ts";
 
 new Table()
-  .header(["Heading 1", "Heading 2", "Heading 3"])
+  .header(["Name", "Date", "City", "Country"])
   .body([
-    ["Row 1 Column 1", "Row 1 Column 2", "Row 1 Column 3"],
-    ["Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3"],
-    ["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"],
+    ["Baxter Herman", "Oct 1, 2020", "Harderwijk", "Slovenia"],
+    ["Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan"],
+    ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
+    ["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"],
   ])
   .render();
diff --git a/examples/table/random_table_demo.ts b/examples/table/random_table_demo.ts
@@ -1,4 +1,4 @@
-#!/usr/bin/env -S deno run
+#!/usr/bin/env -S deno run --unstable
 
 import {
   blue,
@@ -16,16 +16,24 @@ import { AnsiEscape } from "../../ansi_escape/ansi_escape.ts";
 import { Cell, ICell } from "../../table/cell.ts";
 import { Table } from "../../table/table.ts";
 
-const screen: AnsiEscape = AnsiEscape.from(Deno.stdout);
-screen.cursorShow();
+const tty: AnsiEscape = AnsiEscape.from(Deno.stdout);
+tty.cursorHide();
+
+const sig = Deno.signals.interrupt();
+(async () => {
+  for await (const _ of sig) {
+    tty.cursorShow();
+    Deno.exit(0);
+  }
+})();
 
 loop();
 
 function loop() {
   const table: Table = createTable();
-  // screen.eraseScreen().cursorTo( 0, 0 ).cursorHide();
+  tty.eraseScreen().cursorTo(0, 0);
   table.render();
-  // setTimeout( loop, 1000 );
+  setTimeout(loop, 1000);
 }
 
 function createTable(): Table {

diff --git a/examples/table/rows_and_cells.ts b/examples/table/rows_and_cells.ts
@@ -5,15 +5,20 @@ import { Row } from "../../table/row.ts";
 import { Table } from "../../table/table.ts";
 
 new Table()
-  .header(Row.from(["Heading 1", "Heading 2", "Heading 3"]).border(true))
+  .header(Row.from(["Name", "Date", "City", "Country"]).border(true))
   .body([
     [
-      "Row 1 Column 1",
-      Cell.from("Row 1 Column 2").border(true),
+      "Baxter Herman",
+      Cell.from("Oct 1, 2020").border(true),
       "Row 1 Column 3",
+      "Harderwijk",
+      "Slovenia",
     ],
-    new Row("Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3").border(true),
-    ["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"],
+    new Row("Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan").border(
+      true,
+    ),
+    ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
+    ["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"],
   ])
   .render();
 console.log();
diff --git a/examples/table/table_options.ts b/examples/table/table_options.ts
@@ -3,11 +3,12 @@
 import { Table } from "../../table/table.ts";
 
 new Table()
-  .header(["Heading 1", "Heading 2", "Heading 3"])
+  .header(["Name", "Date", "City", "Country"])
   .body([
-    ["Row 1 Column 1", "Row 1 Column 2", "Row 1 Column 3"],
-    ["Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3"],
-    ["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"],
+    ["Baxter Herman", "Oct 1, 2020", "Harderwijk", "Slovenia"],
+    ["Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan"],
+    ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
+    ["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"],
   ])
   .maxColWidth(10)
   .padding(1)

diff --git a/examples/table/using_as_array.ts b/examples/table/using_as_array.ts
@@ -3,10 +3,11 @@
 import { Table } from "../../table/table.ts";
 
 const table: Table = Table.from([
-  ["Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3"],
-  ["Row 1 Column 1", "Row 1 Column 2", "Row 1 Column 3"],
+  ["Baxter Herman", "Oct 1, 2020", "Harderwijk", "Slovenia"],
+  ["Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan"],
+  ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
 ]);
 
-table.push(["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"]);
+table.push(["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"]);
 table.sort();
 table.render();
diff --git a/table/README.md b/table/README.md
@@ -77,32 +77,33 @@ The example below will output a simple table with three rows and without any sty
 
 ```typescript
 const table: Table = new Table(
-  ["Row 1 Column 1", "Row 1 Column 2", "Row 1 Column 3"],
-  ["Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3"],
-  ["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"],
+  ["Baxter Herman", "Oct 1, 2020", "Harderwijk", "Slovenia"],
+  ["Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan"],
+  ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
+  ["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"],
 );
 
 console.log(table.toString());
-// You can also use table.render() as shorthand which uses Deno.stdout.writeSync() under the hood.
 ```
 
 ```
 $ deno run https://deno.land/x/cliffy/examples/table/basic_usage.ts
 ```
 
-![](assets/img/basic_usage.png)
+![](assets/img/basic_usage.gif)
 
 ### Using as Array
 
 Since the `Table` class is an `Array`, you can call all the methods of the array class like `.from()`, `.sort()`, `.push()`, `.unshift()` and friends.
 
 ```typescript
 const table: Table = Table.from([
-  ["Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3"],
-  ["Row 1 Column 1", "Row 1 Column 2", "Row 1 Column 3"],
+  ["Baxter Herman", "Oct 1, 2020", "Harderwijk", "Slovenia"],
+  ["Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan"],
+  ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
 ]);
 
-table.push(["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"]);
+table.push(["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"]);
 table.sort();
 table.render();
 ```
@@ -111,7 +112,7 @@ table.render();
 $ deno run https://deno.land/x/cliffy/examples/table/using_as_array.ts
 ```
 
-![](assets/img/using_as_array.png)
+![](assets/img/using_as_array.gif)
 
 ### Header and Body
 
@@ -120,11 +121,12 @@ The `.body()` method adds an array of rows to the table and removes all existing
 
 ```typescript
 new Table()
-  .header(["Heading 1", "Heading 2", "Heading 3"])
+  .header(["Name", "Date", "City", "Country"])
   .body([
-    ["Row 1 Column 1", "Row 1 Column 2", "Row 1 Column 3"],
-    ["Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3"],
-    ["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"],
+    ["Baxter Herman", "Oct 1, 2020", "Harderwijk", "Slovenia"],
+    ["Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan"],
+    ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
+    ["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"],
   ])
   .render();
 ```
@@ -133,19 +135,20 @@ new Table()
 $ deno run https://deno.land/x/cliffy/examples/table/header_and_body.ts
 ```
 
-![](assets/img/header_and_body.png)
+![](assets/img/header_and_body.gif)
 
 ### Table Options
 
 To customize the table, the table class provides a few chainable option methods. To see a list of all available options go to the [Talbe](#table) API section.
 
 ```typescript
 new Table()
-  .header(["Heading 1", "Heading 2", "Heading 3"])
+  .header(["Name", "Date", "City", "Country"])
   .body([
-    ["Row 1 Column 1", "Row 1 Column 2", "Row 1 Column 3"],
-    ["Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3"],
-    ["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"],
+    ["Baxter Herman", "Oct 1, 2020", "Harderwijk", "Slovenia"],
+    ["Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan"],
+    ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
+    ["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"],
   ])
   .maxColWidth(10)
   .padding(1)
@@ -158,7 +161,7 @@ new Table()
 $ deno run https://deno.land/x/cliffy/examples/table/table_options.ts
 ```
 
-![](assets/img/table_options.png)
+![](assets/img/table_options.gif)
 
 ### Row's and Cell's
 
@@ -168,15 +171,20 @@ It is also possible to customize single rows and cell. To do this you can use th
 import { Table, Row, Cell } from "https://deno.land/x/cliffy@<version>/table/mod.ts";
 
 new Table()
-  .header(Row.from(["Heading 1", "Heading 2", "Heading 3"]).border(true))
+  .header(Row.from(["Name", "Date", "City", "Country"]).border(true))
   .body([
     [
-      "Row 1 Column 1",
-      Cell.from("Row 1 Column 2").border(true),
+      "Baxter Herman",
+      Cell.from("Oct 1, 2020").border(true),
       "Row 1 Column 3",
+      "Harderwijk",
+      "Slovenia",
     ],
-    new Row("Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3").border(true),
-    ["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"],
+    new Row("Jescie Wolfe", "Dec 4, 2020", "Alto Hospicio", "Japan").border(
+      true,
+    ),
+    ["Allegra Cleveland", "Apr 16, 2020", "Avernas-le-Bauduin", "Samoa"],
+    ["Aretha Gamble", "Feb 22, 2021", "Honolulu", "Georgia"],
   ])
   .render();
 ```
@@ -185,7 +193,7 @@ new Table()
 $ deno run https://deno.land/x/cliffy/examples/table/rows_and_cells.ts
 ```
 
-![](assets/img/rows_and_cells.png)
+![](assets/img/rows_and_cells.gif)
 
 ### Colspan and Rowspan
 
@@ -216,7 +224,7 @@ Table.from([
 $ deno run https://deno.land/x/cliffy/examples/table/colspan_and_rowspan.ts
 ```
 
-![](assets/img/colspan_and_rowspan.png)
+![](assets/img/colspan_and_rowspan.gif)
 
 ## ❯ API
 
@@ -259,7 +267,7 @@ $ deno run https://deno.land/x/cliffy/examples/table/colspan_and_rowspan.ts
 Sets the table header row.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | row | `IRow ` | Yes | Can be an `Array` of `string`'s and `Cell`'s |
 
 *Return type*: `this`
@@ -269,7 +277,7 @@ Sets the table header row.
 Adds an array of rows to the table and removes all existing rows.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | rows | `Array<IRow>` | Yes | `Array` of row's. A row can be an `Array` of `string`'s and `Cell`'s |
 
 *Return type*: `this`
@@ -297,7 +305,7 @@ Outputs the result of the `.toString()` method with `Deno.stdout.writeSnyc()`.
 Set min column with.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | width | `number | Array<number>` | Yes | Min column with. To give all columns the same min width pass a number to `.minColWidth()`, to give each column an indiviuel min width you can pass an `Array<number>` to `.minColWidth()`. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 
@@ -308,7 +316,7 @@ Set min column with.
 Set max column with.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | width | `number | Array<number>` | Yes | Max column with. To give all columns the same max width pass a number to `. maxColWidth()`, to give each column an indiviuel max width you can pass an `Array<number>` to `. maxColWidth()`. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 
@@ -319,7 +327,7 @@ Set max column with.
 Indent the table output.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | width | `number` | Yes | Indent width. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 
@@ -330,7 +338,7 @@ Indent the table output.
 Set column padding. If border is enabled the padding will be applyed on the left and the right side of each cell.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | padding | `number | number[]` | Yes | Padding with. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 
@@ -341,7 +349,7 @@ Set column padding. If border is enabled the padding will be applyed on the left
 Enable table border. Doesn't override row and cell settings.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | enable | `boolean` | Yes | Enable or disable table border. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 
@@ -353,7 +361,7 @@ Override default border characters. Doesn't override row and cell settings.
 To change the default border characters globally you can use the static `Table.chars(chars)` method.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | chars | `IBorderOptions` | Yes | An object with border characters. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 
@@ -438,7 +446,7 @@ Clones the row.
 Enable row border. Override table settings but not cell settings.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | enable | `boolean` | Yes | Enable or disable table border. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 
@@ -465,7 +473,7 @@ Clones the cell.
 Enable cell border. Overrides table and row settings.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | enable | `boolean` | Yes | Enable or disable table border. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 
@@ -476,7 +484,7 @@ Enable cell border. Overrides table and row settings.
 Allows a single table cell to span the width of more than one cell or column. Can be combined with `.rowSpan()`.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | span | `number` | Yes | Number of columns to span the cell. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 
@@ -487,7 +495,7 @@ Allows a single table cell to span the width of more than one cell or column. Ca
 Allows a single table cell to span the height of more than one cell or row. Can be combined with `.colSpan()`.
 
 | Argument | Type | Required | Description |
-| ----- | :--: | :--: | ----------- |
+| ----- | :---: | :---: | ----------- |
 | span | `number` | Yes | Number of rows to span the cell. |
 | override | `boolean` | No | Set override to `false` to prevent overriding existing values. |
 

diff --git a/table/assets/img/basic_usage.gif b/table/assets/img/basic_usage.gif
diff --git a/table/assets/img/basic_usage.png b/table/assets/img/basic_usage.png
diff --git a/table/assets/img/colspan_and_rowspan.gif b/table/assets/img/colspan_and_rowspan.gif
diff --git a/table/assets/img/colspan_and_rowspan.png b/table/assets/img/colspan_and_rowspan.png
diff --git a/table/assets/img/header_and_body.gif b/table/assets/img/header_and_body.gif
diff --git a/table/assets/img/header_and_body.png b/table/assets/img/header_and_body.png
diff --git a/table/assets/img/random_table.gif b/table/assets/img/random_table.gif
diff --git a/table/assets/img/rows_and_cells.gif b/table/assets/img/rows_and_cells.gif
diff --git a/table/assets/img/rows_and_cells.png b/table/assets/img/rows_and_cells.png
diff --git a/table/assets/img/table_options.gif b/table/assets/img/table_options.gif
diff --git a/table/assets/img/table_options.png b/table/assets/img/table_options.png
diff --git a/table/assets/img/using_as_array.gif b/table/assets/img/using_as_array.gif
diff --git a/table/assets/img/using_as_array.png b/table/assets/img/using_as_array.png