# 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. | --- # 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/reference/wire.ui/wire.ui.component.md?ask= ``` 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.