The Table Class

© 2012, Martin Rinehart

The examples on this page are based on the three-table "database" of products, customers and sales you see here. These tables were created by starting with a list of column names and initial table data:

var product_cols = ['product_id', 'name'];
var product_data = [
    [ 1, 'widget'],
    [ 2, 'thingie']

These are used to create a Table, this way:

var product_table = new MRlib323.Table(
    'Products', product_cols, product_data );

The Table is turned into a DOM table, attached to a parent div, this way:

product_table.to_table( products_div );

The to_table() method is analogous to the toString() method you rely on for other objects. (A debug div is handy during development to look at to_table()s.)

The Table class creates relational table-like objects. You can apply SQL-like operations to these tables (sort, order by, select, join, etc.).

A basic table has a name (used for basic reporting and some joining), a list of col_names providing names and suggesting domains for each column, and a 2D array of data.

We recommend, and the join() method assumes, that the first column in each table be named id and that it be a unique, positive integer. Subsequent foreign key columns should be named xxx_id where xxx is the name of the table to which it links.

The Table Constructor

You build a table with:

table = new Table( name, col_names, data );

Alternatively, if you have a list of objects, all the same structure, this builds a table:

table = new Table( name, object_list );

In the latter case, the object's property names are used for column names and the values become the 2D data array. For example, this code:

function Person( first, last ) {
    this.first_name = first;
    this.last_name = last;
var people = [
    new Person( 'Betsy', 'Ross' ),
    new Person( 'James', 'Madison' )
new Table( 'People', people ).
    to_table( example_1 );

Creates this result:

The constructor will also make a shallow copy of another table:

table = new Table( table_to_copy );

The Table Instance Methods

The get_object() Method

obj = table.get_object( row_number );

The get_object() method extracts a copy of a row of the table. It converts the table row into a JavaScript object. The column names from the table are used for the object's property names. The row data becomes property values.

The insert_col() Method

/* insert in place */ table.inser_col( index, name, value );

Adds a new column after index. The column name is name and the value in every row is value.

The following inserts a second column to be used for a row total, initialized to zero:

sales_table.insert_col( 1, 'Row Total', 0 );

The join() Method

joined_table = table.join( table_to_join, column_name );

The table_to_join is a reference to a Table object. The column_name is the name of the column in the main table that holds the keys into the table_to_join. The keys in the main table must match the ids (first column) in the detail table.

Example: Using the sample database (above) to produce a view of sales needed to generate invoices:

sales_table.join( customer_table, 'customer_id' ).
    to_table( example_2 );

Note that this is not a true view. It is a table that duplicates the data in the other tables at the time of the join. You would use it (to create an invoice, for example) and then discard it. We assume that tables which exist in JavaScript are not available for updates by other users.

The order_by() Method

This sorts a table by the values in a specified column:

sorted_table = table.order_by( col_name );

This code sorts products by name:

product_table.order_by( 'name' ).
    to_table( example_3 );

An optional second argument is either a boolean (defaults to true for an ascending sort) or a comparison function. The default comparison is compare_numbers_and_strings() (see the Functions, Compare page).

sorted_table = table.order_by( col_name, func_or_updown );

The select() Method

As in SQL, columns may be selected by providing a list of column names: col_names );

For example, this is a join, select, present combination:

sales_table.join( product_table, 'product_id' ).
    select( ['date', 'quantity', ''] ).
    to_table( example_4  );

For SQL-like selects, the array of column names may also be a string, "*": '*" );

(select( '*' ) returns a copy of the table.)

The to_objects() Method

This is product_table.to_table():

This is product_table.to_objects() (formatted as a JSON string):


The table becomes an object. The name of each property in this object is the id (first column) of each record. The value of each property is an object. The property names in the record object are the table's column names (following the id column). The property values in the record object are the table's values (again, following the id column).

The following code reverses the operation, using the above object to create a Table.

new MRlib323.Table( 'Product Table',
	product_table.to_objects() ).
	to_table( example_6  );

The to_code() Method

text_area.value = product_table.to_code();

The to_code() method produces a text string that can be shown in a <textarea> element.

The content of the <textarea> can be copied/pasted into source code.

The to_table() Method

This documentation has used the to_table() method throughout to show example tables. (These examples are not hard-coded in the markup; they are generated from the tables by the to_table() method when the page is loaded.)

The where() Method

some_rows = table.where( comparison_string );

Like the SQL "where" clause, the where() method returns a new table made up of the rows that meet a comparison test. This is an example:

customer_table.where( 'id = 1' ).
    to_table( example_8 );

Internally, the where() method "compiles" the comparison string into a function that, when passed a table row returns an appropriate boolean result. The format of the comparison string is:

column_name operator value

The column_name is the name of one of the columns in the table. The operator is one of these SQL operators: <= < = > >= !=. The value is a value appropriate for the values in the column.

Feedback: MartinRinehart at gmail dot com

# # #