JavaScript Tables and Two Dimensional Arrays

Ever want an easy way of converting a two dimensional array into an HTML table in JavaScript? Would you like to access items in a two dimensional JavaScript array by aliasing rows and columns? Now you can!

We all know it's simple to manipulate a two dimensional array in JavaScript. Just bang out an array of arrays and access them like arr[0][3] = 'bananas' or whatever. What happens when you'd rather insert data by aliasing columns and rows and doing something like arr.writeData('product', 3, 'bananas') and have it insert the data to the proper row and column? Well, you can't do that natively in JavaScript, you'll need to download my Table class to do it. What happens after you build a two dimensional array in JavaScript and you want to generate an HTML table from it? Well, you can write up a bunch of loops and counters and concat strings together or generate HTMLElements by hand or, you can use my Table class like: document.body.appendChild( arr.toHTML() ) and be done! My Table class allows you to optionally specify headings, row labels, and a table caption. You don't have to build the two dimensional array using the Table class either. If you get a 2-d array from some external source you can simply instantiate a new Table and assign the 2-d array to the Table's data property. Bam! Done! Data imported successfully.

Interested? The code lives on github at https://github.com/matthewkastor/Table. If you have npm and git set up you can install it with npm install git+https://github.com/matthewkastor/Table.git#master

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.