npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ascii-data-table

v2.1.1

Published

Render data in a width adjustable ascii table.

Downloads

2,492

Readme

Ascii Data Table

This module provides functionality to render tables with text borders / outlines so it can be pasted into the medium of choice.

The configuration is very limited by design, all that's configurable in the current version is the maximun width of the columns.

The API exposes only two methods to render a table: table(rows, [maxColWidth]) where rows is expected to be an array with an index for every row, and each row is also expected to be an array with one index for every column. The data in the columns can be of any Javascript type since it will be serialized before printed.

The second method to generate a table is: tableFromSerializedData(serializedRows, [maxColWidth]) where serializedRows is expected to be in the same format as the previously described method, but all data must already be serialized. This method should be used when the data stays the same but are generated with multiple maxColWidths.

To serialize the data, the method serializeData(rows) is exposed. For the moment, all it does is to table JSON.stringify on the data.

To get the width of the widest column (can be used to set the max value on a slider), maxColumnWidth(rows) is exposed. The rows should not already be serialized when calling this method.

All rows should have the same number of columns, and the first row is expected to be the header column with titles for each column.

[
  ['first column', 'second column'], // title row
  ['my data row 1 col 1', 'my data row 1 col 2'], // first data row
  ['my data row 2 col 1', 'my data row 2 col 2'] // second data row
]

With default max width, the above would produce:

╒═════════════════════╤═════════════════════╕
│"first column"       │"second column"      │
╞═════════════════════╪═════════════════════╡
│"my data row 1 col 1"│"my data row 1 col 2"│
├─────────────────────┼─────────────────────┤
│"my data row 2 col 1"│"my data row 2 col 2"│
└─────────────────────┴─────────────────────┘

Installation

Install with npm in your working directory:

npm install ascii-data-table --save

Install with bower in your working directory:

bower install ascii-data-table --save

Usage

Two packages are produced, one for Node.js environment and one for web browsers.

In Node.js

Usage in Node.js varies depending if the will be used within a ES2015 application or not.

In ES2015

// If install with npm
import AsciiTable from 'ascii-data-table'

// or if installed by cloning git repo, use the correct path
//import AsciiTable from 'lib/ascii-data-table'

// The data to render
const items = [['x', 'y'], ['a', 'b'], ['c', 'd']]

// Not required, default is 30
const maxColumnWidth = 15

// Render and save in 'res'
const res = AsciiTable.table(items, maxColumnWidth)

In ES 5.5

// If install with npm
var AsciiTable = require('ascii-data-table').default

// or if installed by cloning git repo, use the correct path
//var AsciiTable = require('lib/ascii-data-table').default

var items = [['x', 'y'], ['a', 'b'], ['c', 'd']]
var res = AsciiTable.table(items)

In web browsers

A bundle for web browsers is created and can be found in lib.

<html>
  <head>
    <script type="text/javascript" src="/components/lib/bundle.js"></script>
    <script type="text/javascript">
      function load() {
        var items = [['x', 'y'], ['a', 'b'], ['c', 'd']]
        var output = AsciiTable.table(items)
        document.getElementById('my-table').innerHTML = output
        console.log(output)
      }
    </script>
  </head>
  <body onload="load()">
    <pre id="my-table">loading...</pre>
  </body>
</html>

For React >= 0.14

A functional / stateless React Component is created and lies in lib/bundle-react.js. It assumes there's a global varaible React available.

<html>
  <head>
    <script src="//fb.me/react-0.14.3.js"></script>
    <script src="//fb.me/react-dom-0.14.3.js"></script>
    <script src="/components/ascii-data-table/lib/bundle-react.js"></script>
    <script type="text/javascript">
      var items = [['x', 'y'], ['a', 'b'], ['c', 'd']]
      function load() {
        ReactDOM.render(
          React.createElement(AsciiTableComponent, {rows: items}), 
          document.getElementById('myApp')
        )
      }
    </script>
  </head>
  <body onload="load()">
    <div id="myApp">loading...</div>
  </body>
</html>

For Angular 1.X

A bundle for Angular 1.X is created and can be found in lib/bundle-angular.js and assumes there's a global variable named angular available.

<html>
  <head>
    <script type="text/javascript" src="/components/angular/angular.js"></script>
    <script type="text/javascript" src="/components/ascii-data-table/lib/bundle-angular.js"></script>
    <script type="text/javascript">
      var app = angular
        .module('myApp', ['AsciiTableModule'])
        .controller('TableController', ['$scope', 'AsciiTable', function($scope, AsciiTable){
          var items = [['x', 'y'], ['a', 'b'], ['c', 'd']]
          $scope.data = AsciiTable.table(items)
        }])
    </script>
  </head>
  <body ng-app="myApp">
    <pre id="table" ng-controller="TableController" ng-bind="data"></pre>
  </body>
</html>

Examples / Demo

You can try online here: Online demo
In the examples folder there are examples for node and web browser environments.
One cool thing in the browser demo is that you can hook up a range slider to the maximun width of the columns, giving this effect:
slider-gif-demo

Testing

table npm test to execute test in both Node.js and browser environments.
table npm table test:watch to have tests table on file changes.

Contributing

All bug reports, feature requests and pull requests are welcome. This project uses the Javascript Standard Style and a lint check will table before all tests and builds.