# 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.

```javascript
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.

```javascript
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`.

```javascript
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");
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wirebootstrap.com/wirebootstrap/working-with-datatables/joins.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.