tty-table browser example

tty-table. A terminal table for the browser and the console. https://github.com/tecfu/tty-table

HTML

<script src="https://cdn.jsdelivr.net/gh/tecfu/tty-table/dist/tty-table.esm.js"></script>
<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/ansi_up@4.0.4/ansi_up.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/tecfu/tty-table@4.1.1/dist/tty-table.cjs.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/tecfu/tty-table@4.1.1/dist/tty-table.umd.js"></script>
  </head>
  <body>
    <h2>
    <a href="https://github.com/tecfu/tty-table">tecfu/tty-table</a></h2>
    tty-table. A terminal table for the browser console and the terminal. 
    <pre>
      <span id="example"></span>
    </pre>
    <br/>
    See your browser console for an example there.
  </body>
</html>

JavaScript

// import Table from 'https://cdn.jsdelivr.net/gh/tecfu/tty-table@4.1.1/dist/tty-table.esm.js' // doesn't work in jsfiddle unless embedded in script tag with type="module"
let Table = require('tty-table') // tty-table.cjs.js
//Table = TTY_Table; // tty-table.umd.js

let header = [{
    value: "item",
    headerColor: "cyan",
    color: "red",
    align: "left",
    width: 20
  },
  {
    value: "price",
    color: "red",
    width: 10,
    formatter: function(value) {
      var str = `$${value.toFixed(2)}`
      if (value > 5) {
        str = this.style(str, "green")
      }
      return str
    }
  },
  {
    alias: "Is organic?",
    value: "organic",
    width: 15,
    formatter: function(value) {
      if (value === "yes") {
        value = this.style(value, "bgGreen", "black")
      } else {
        value = this.style(value, "bgRed", "white")
      }
      return value
    }
  }
]

// Example with arrays as rows
const rows = [
  ["tallarin verde", 5.50, "yes"],
  ["aji de gallina", 4.50, "no"],
]

const footer = [
  "TOTAL",
  function(cellValue, columnIndex, rowIndex, rowData) {
    let total = rowData.reduce((prev, curr) => {
        return prev + curr[1]
      }, 0)
      .toFixed(2)

    return `$${total}`
  },
  function(cellValue, columnIndex, rowIndex, rowData) {
    let total = rowData.reduce((prev, curr) => {
      return prev + ((curr[2] === "yes") ? 1 : 0)
    }, 0)
    return `${ (total / rowData.length * 100).toFixed(2) }%`
  }
]

const options = {
  borderStyle: "solid", // only "dashed" works with iife module
  borderColor: "green",
  paddingBottom: 0,
  headerAlign: "center",
  align: "center",
  color: "white",
  truncate: "..."
}

let ANSI = Table(header, rows, footer, options).render()
console.log(ANSI);

var ansi_up = new AnsiUp;
var html = ansi_up.ansi_to_html(ANSI);

setTimeout(function() {
  document.getElementById('example').innerHTML = html;
}, 200);