# Overview

Below is a summary of the key components that make up the core of the WireBootstrap framework.

## Namespaces

The WireBootstrap library contains the objects and classes that make up the WireBootstrap framework.  These are grouped into the following namespaces.  Visit the [reference](/wirebootstrap/reference/wire.md) sections for details.

| Name             | Description                                                                                                                                                                                                                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `wire`           | This is the root namespace for everything that makes up WireBootstrap.  It also contains many utilities and helper functions that make developing applications easier.                                                                                                                                       |
| `wire.data`      | This namespace contains all the objects related to accessing and processing data.                                                                                                                                                                                                                            |
| `wire.ui`        | This namespace contains all the objects related to user interface concerns including components and data events.                                                                                                                                                                                             |
| `wire.[vendor]*` | Components and services published by WireBootstrap that support third party integration are created off the  `wire` root and begin with a unique spelling.  For example, `wire.bsTable` is the native Bootstrap Table component.  This naming convention is recommended but not required for new components. |

## DataSource

A [DataSource](/wirebootstrap/connecting-to-data/data-sources.md) object is the connection object for any communications to data services from inside the WireBootstrap framework.  This object is located at `wire.data.DataSource`.

The following example creates a new DataSource against a custom `account` web service.

```javascript
// account-service.js
export const accountService = new wire.data.DataSource("custom", {
    ServiceRoot: "./account"
});
```

Visit the [Connecting to Data](/wirebootstrap/connecting-to-data/data-connectors.md) section for more on data sources.

## TableQuery

A [TableQuery](/wirebootstrap/creating-queries/select-queries.md) is a query for two-dimensional data from a data service.  Often times this is run against data that resides in a relational database, but its up to the data service to source the data specified in the query.

There is a `select` helper on the `wire.data` namespace that will return a new *TableQuery* and allows one to be built up using chained methods on the object.  The syntax of the methods are similar to SQL *select* statements.

The following example, creates a query to pull down two fields for a specific account number from the `AccountInfo` entity or method on a web service.

```javascript
// account-query.js
export const accountQuery = wire.data.select("accountNumber", "accountName")
    .from("AccountInfo")
    .where()
        .eq("accountNumber", "BN-39734");
```

Visit the [Working with Queries](/wirebootstrap/creating-queries/select-queries.md) section for more on creating and executing queries.

## DataTable

Data from any data service will be transformed into a [DataTable](/wirebootstrap/working-with-datatables/datatables.md) object located at `wire.data.DataTable` when it returns from the data service.  

The following example executes the query against the `accounts` web service

```javascript
import {accountService} from "./account-service";
import {accountQuery} from "./account-query";

const tableAccounts = await accountService.execAsync(accountQuery);
```

The *DataTable* is a powerful object with dozens of methods that allow an array of objects to be manipulated and transformed locally in JavaScript.

Visit the [Working with DataTables](/wirebootstrap/working-with-datatables/datatables.md) section for more on data tables.

## Components

The components and widgets used in Bootstrap themes are extended by WireBootstrap to have a standard set of interfaces for binding to data and handling events.  These events include both the native component events as well as the data events that allow them to broadcast data changes to each other.

All WireBootstrap components can be bound to a WireBootstrap data table the same way.   Most components are all located off of the `wire`root namespace.

The following example binds the result of the `account` service query to an instance of the [Bootstrap HTML table](https://docs.wirebootstrap.com/bootstrap/table).

```javascript
...
const table = new wire.bsTable().render("#accountsTable", {
    data: tableAccounts
});
```

{% hint style="info" %}
Note, the `wire.bs*` contains many of the [native Bootstrap components](https://docs.wirebootstrap.com/bootstrap).  
{% endhint %}

Visit the [Working with Components](/wirebootstrap/working-with-components/components.md) section for more on components.

## DataSet

The example above executes a query against a data service and binds a static data table to a component.  This is a one-way, one-time binding.  

A [DataSet](broken://pages/-MHOVfhJ6yOMzQM_mubm) however allows the binding to be dynamic.  Data sets can listen for data events emitted by components as users interact with them.  Data sets are located at `wire.data.DataSet.`

When a data set finds an event that affects a field or other aspect of their query, they can make the appropriate changes to the query, execute it against the data service, pull down the updated data, and then update any consumers including UI components that are bound to that data set to reflect the changes.  

The following example creates a data set using the same data source and query seen the examples above.  It the binds the HTML table to the data set instead of a data table.

```javascript
import {accountService} from "./account-service";
import {accountQuery} from "./account-query";

const datasetAccounts = new wire.data.DataSet({
    Source: accountService,
    Query: accountQuery
});

const table = new wire.bs.table().render("#accountsTable", {
    data: datasetAccounts
});
```

Visit the [Working with DataSets](/wirebootstrap/datasets.md) section for more on data sets.

## Web Frameworks

The same bindings can be done inside many popular web frameworks such as Angular, React, Vue, and Web Components.

The following example illustrates the same binding as in previous examples using [WireBootstrap for Web Components](https://docs.wirebootstrap.com/webcomponents).  With web components, the dataset can be imported directly using an attribute reference to the module export with the name of the data set as a pipe-delimited parameter.

In the following example, the same `datasetAccounts` data set is dynamically imported into the component and set on the `data` property of the component class.  The HTML table component is then able to render the data set.

```javascript
// dataset-accounts.js
import {accountService} from "./account-service";
import {accountQuery} from "./account-query";

export const datasetAccounts = new wire.data.DataSet({
    Source: accountService,
    Query: accountQuery
});
```

```html
<wire-bs-table wr-import-data="./dataset-accounts.js | datasetAccounts">
</wire-bs-table>
```

Visit [Web Frameworks](/wirebootstrap/working-with-components/web-frameworks.md) for more information on WireBootstrap and web frameworks.


---

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