# Component

Most WireBootstrap components inherit from `wire.ui.Component`.  This class gives components the base functionality needed to take advantage of the capabilities of the WireBootstrap framework.  It internalizes much of the details for development teams building new components for WireBootstrap.  It also provides a standard interface for teams working with components as they develop applications using WireBootstrap.

## Classes

Components that inherit from `wire.ui.Component` are JavaScript classes or functions which allow new instances of them to be created.  By convention, each is defined on the root global object `wire` although this is not a requirement.

In the example below, a new instance of the [DataTables for WireBootstrap](https://docs.wirebootstrap.com/components/datatables) component is created.

```javascript
const datatable = new wire.datatables();
```

Larger collections of components from the same vendor may also create a root namespace on the `wire` global and then create components inside that root.

In the example below, an instance of the [Gentelella Compare KPI](https://docs.wirebootstrap.com/themes/themes/gentelella/components/kpi-compare) component is created.

```javascript
const kpi = new wire.gentelella.kpiCompare();
```

## Render

The `render` method is called to initialize a component which includes binding to data, applying any configuration, attaching to a DOM element, and then sending out event notifications that its finished initializing.  

The `render` method takes two parameters.  The first is the element `id` into which the component will be rendered.  The second parameter is the configuration for initialing the component.

The example below creates a new instance of the  [DataTables for WireBootstrap](https://docs.wirebootstrap.com/components/datatables) component and renders it inside an element with the id `table`.

```javascript
const datatable = new wire.datatables();

datatable.render("#table", {
    ...
});
```

The `render` method returns the instance of the component so it can be chained with the component constructor for convenience.

```javascript
const datatable = new wire.datatables().render("#table", {
    ...
});
```

## Config

Most components have default configuration settings that can be overridden by passing a [configuration](/wirebootstrap/working-with-components/configuration.md) into the `render` method.  One of the operations performed in the render method is the merging of the configuration passed in with the components defaults. The `config` method on a component will return this merged configuration. 

In the example below, the configuration for an instance of the DataTables for WireBootstrap component is pulled and its `selectAll` value is written to the browser's developer tools console.

```javascript
let config = datatable.config();

console.log(config.selectAll);
```

## Data

The [data configuration](/wirebootstrap/working-with-components/configuration/data.md) for a component determines where the component will get its data.  Often times, this requires that a query be run in a data service.  Once this is resolved, the data is transformed into a [WireBootstrap DataTable](/wirebootstrap/working-with-datatables/datatables.md) and made available to the component for presentation.  The `data` method on the component can be used to access this data table.

```javascript
...

let table = datatable.data();
```

## Element

Use the `element` method of a component to get a reference to the DOM object to which the component is bound.  If the component uses jQuery for the element, you can get the jQuery version using the`$element` method.  

```javascript
...

let el = datatable.element();

el = datatable.$element();
```

## Plugin

The WireBootstrap components that wrap the plugins used in themes expose references to the plugin used internally by the component so the methods and properties of the native plugin can be used directly.  

Use the `plugin` property of a component to get a reference to the internal plugin instance used by the component.

The following example sets the internal DataTables plugin instance used by the DataTables for WireBootstrap component into a variable called `plugin`.  It then gets an array of the currently selected rows using the native DataTables API.

```javascript
const datatables = new wire.datatables({
    ...
});

const plugin = datatables.plugin;

const rows = plugin.rows({ selected: true }).data().toArray();
```

Many of the plugin functions like the one above are simplified in the WireBootstrap components that extend them.  

In the example above, the same data can be accessed via the `getSelectedRows` method on the DataTables for WireBootstrap component directly.

```javascript
...

const rows = datatables.getSelectedRows();
```

## Data Events

For components that send out [data events](/wirebootstrap/dataevents.md), this behavior can be turned off by setting the `dataevent` property.

```javascript
const select = new wire.select2();

select2.render("#select", {
    dataevent: false
});
```

 For more information on WireBootstrap components, visit the [wire.ui.Component](/wirebootstrap/reference/wire.ui/wire.ui.component.md) reference page.


---

# 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-components/component.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.