Joins

WireBootstrap allows two data tables to be joined together based on field values.

Inner Join

A WireBootstrap data table can be joined on on a single column to create a new data table with the combined columns and rows from each matching the records on the fields specified in the join method. Note, the join's on method returns a data table because there is no other transform option. There is no need to call a separate table method to create the table.

In the example below, a new data table is created by joining the sales and product data tables using the join method.

let dtSales = new eb.data.DataTable([ 
    {productId: "001", sales: 100},
    {productId: "002", sales: 200},
    {productId: "003", sales: 300}
]);
 
let dtProduct = new eb.data.DataTable([ 
    {productId: "001", Name: "apples"},
    {productId: "002", Name: "oranges"},
    {productId: "003", Name: "bananas"}
]);
 
 
let table = dtSales.join(dtProduct).on("productId");

Notice in the above example, there was no need to specify two column names in the on method. That is because the two columns being joined have the same name in both tables.

In the example below, the columns being joined have different names. The second parameter is then used to specify the name of the column Id in data table being joined.

let dtSales = new eb.data.DataTable([ 
    {productId: "001", sales: 100},
    {productId: "002", sales: 200},
    {productId: "003", sales: 300}
]);
 
let dtProduct = new eb.data.DataTable([ 
    {Id: "001", Name: "apples"},
    {Id: "002", Name: "oranges"},
    {Id: "003", Name: "bananas"}
]);
 
 
let table = dtSales.join(dtProduct).on("productId", "Id");

Left Join

The example above use the join method to combine the records in two data tables. In SQL terms, this operation uses an inner join. This means the column values for the joined columns need to exist in both data tables for a record to be included in the resulting table.

The leftJoin method returns all rows from the left table with the matching rows in the right table. The result is null on the right side for all columns when there is no match on the joined field.

In the example below, there is no movie comment for movie id 3 so the resulting table will have a null value in the comment column for that row. If the left join was reversed and movies was joined with movieComments, movie id 3 would not be included in the resulting table because it does not exist in movieComments.

let movies = new eb.data.DataTable([ 
    {id: "01", title: "Office Space"},
    {id: "02", title: "Caddyshack"},
    {id: "03", title: "Animal House"}
]);
 
let movieComments = new eb.data.DataTable([ 
    {id: "01", comment: "I have a case of the Monday's"},
    {id: "02", comment: "Kill all the golfers?"}
]);
 
let table = movies.leftJoin(movieComments).on("id");