> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/wirebootstrap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component.md).

# wire.ui.Component

Although it is not required that a component extend the `wire.ui.Component` class in order to work inside a WireBootstrap application, the `wire.ui.Component` class contains all the core functionality needed by a component to take advantage of the data binding, messaging, configuration, events, and other functionality provided the WireBootstrap framework.

## Uses

Individuals working with WireBootstrap components to build applications are referred to as *component consumers*.  For this audience, a subset of the methods in `wire.ui.Component` will be applicable.  For an overview, read [Working with Components](/wirebootstrap/working-with-components/untitled.md).

*Component authors* are those who are building new components for WireBootstrap that will eventually be used by component consumers.  For component authors, many more of the features of this base class will be applicable.  For details, read [Building a WireBootstrap Component](/wirebootstrap/working-with-components/building-a-component.md).

## Methods

| Name               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| config             | Returns the configuration object for the component after initialization.  This will be the combination of the configuration passed into the [`render`](/wirebootstrap/working-with-components/configuration.md) method merged with the defaults defined for the component.  Any component defaults will be overridden with user-defined configured passed into [`render`](/wirebootstrap/working-with-components/configuration.md).                                                   |
| data               | Returns the internal data to which the component is bound.                                                                                                                                                                                                                                                                                                                                                                                                                            |
| dataBind(callback) | Defines the component's data-bind `callback` function.  For component authors, this is called anytime a component should update its UI based on a change in the data to which it is bound.  For component consumers, this will in-turn call the [`databind` life cycle event](/wirebootstrap/working-with-components/configuration/events.md#life-cycle-events) event if one is configured.  Visit  [Working with Data Event](/wirebootstrap/data-events/data-events.md) for details. |
| element            | Returns the native DOM element for the component.  Use `$element` to return the jQuery version of the element if the component uses jQuery.                                                                                                                                                                                                                                                                                                                                           |
| fail(exception)    | Callback function for a failure during a lifecycle event.  See [life cycle events](/wirebootstrap/working-with-components/configuration/events.md#life-cycle-events) for additional information.                                                                                                                                                                                                                                                                                      |
| initialize(config) | Binds the configuration data in `config` to the component.  This includes merging configuration settings with the component defaults, making any calls to data services for data, binding the UI to data, setting up the [life cycle events](/wirebootstrap/working-with-components/configuration/events.md#life-cycle-events), and listening for data changes.  This method is normally called by component authors in the render                                                    |
| plugin(plugin)     | For components that use or many times just wrap internal jQuery components.  This method will set or return the instance of the internal jQuery component.                                                                                                                                                                                                                                                                                                                            |
| ready              | Callback function for when the component has finished initializing.  See [life cycle events](/wirebootstrap/working-with-components/configuration/events.md#life-cycle-events) for additional information.                                                                                                                                                                                                                                                                            |
| select             | Component consumers are able to specify a list of fields to be displayed in a table component in a [`select`](/wirebootstrap/working-with-components/configuration/display.md#select) configuration option in a number of ways.  This method can be used by component authors to read that list of fields.                                                                                                                                                                            |
| spinner            | A `boolean` that tells the component to automatically use a spinner when refreshing its UI.  This includes getting or changing data.  This value defaults to `true`.  See [Spinners](/wirebootstrap/utilities/spinners.md) for details.                                                                                                                                                                                                                                               |