examples/browser-example.html

<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/ansi_up@4.0.4/ansi_up.min.js"></script>
    <script src="./../dist/tty-table.cjs.js"></script>
    <script src="./../dist/tty-table.umd.js"></script>
    <script type="module">
      
      import Table from './../dist/tty-table.esm.js'
      // let Table = require('tty-table') // tty-table.cjs.js
      // let Table = TTY_Table; // tty-table.umd.js
      
      let header = [
        {
          value: "item",
          headerColor: "cyan",
          color: "white",
          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);
    </script>
  </head>
  <body>
    <h2>Source: examples/browser-example.html</h2>
    Only known to be supported in Chrome > 79.
    <pre>
      <span id="example"></span>
    </pre>
  </body>
</html>