# Data

The most common configuration feature when working with third-party components is data-binding.  WireBootstrap components are bound with data using the `data` configuration parameter.  This parameter can be set to any number of standard data structures.

## Data

In the example below, the component is bound to an array of objects.

```javascript
const users = [
    { value: "jkratz", label: "Jamie Kratz" },
    { value: "pdougherty", label: "Pat Dougherty" }
];

const select = new wire.bsSelect().render("#select", {
    data: users
});
```

Components can also be data bound to a WireBootstrap [DataTable](/wirebootstrap/reference/wire.data/wire.data.datatable.md).

```javascript
const userTable = new wire.data.DataTable([
    { value: "jkratz", label: "Jamie Kratz" },
    { value: "pdougherty", label: "Pat Dougherty" }
]);

const select = new wire.bsSelect().render("#select", {
    data: userTable
});
```

## DataMap

Many components require a specific set of fields in order to render data.  A chart for example will need to know which fields to use to render the axis labels as well as which ones contains the metric data to plot on the chart.

The Bootstrap Select component expects the data passed in to contain a field called `value` and another called `label`.  If these field names don't exist in the data, use the `datamap` attribute to specify which fields should be used.

In the example below, the `UserName` field in the data is to be used as the `value` field and the `FullName` field as the `label` field.

```javascript
const users = [
    { UserName: "jkratz", FullName: "Jamie Kratz" },
    { UserName: "pdougherty", FullName: "Pat Dougherty" }
];

const select = new wire.bsSelect().render("#select", {
    data: users,
    datamap: { value: "UserName", label: "FullName" }
});
```

## DataRow

Some components require a single record.  Use `datarow` to specify the row in the data if it contains more than one row.  This is a zero index reference.

In the following example, the component will be bound to the second row`Fred Flintstone`.

```javascript
const users = [
    { value: "Barney Rubble" },
    { value: "Fred Flintstone" }
]

const input = new wire.bsInput().render("#input", {
    data: users,
    datarow: 1
});
```

## DataSet

Binding a component to a WireBootstrap [DataSet](/wirebootstrap/datasets.md) allows the component to be updated with new data whenever a field in its query is changed. 

```javascript
const accountService = new wire.data.DataSource("table", {
    Provider: {
        Server: "query-server"
    }
});

const query = wire.data.select("UserName", "FullName").from("Users");
    
const dataset = new wire.data.DataSet({
    Source: accountService,
    Query: query
});

const select = new wire.bsSelect().render({
    data: dataset,
    datamap: { value: "UserName", label: "FullName" }
});
```

## DataConfig

When using a dataset as data for a component, custom data can be passed to the [Transform](/wirebootstrap/transforms.md) method using the `dataconfig` property.  This can be helpful in custom shaping the resulting datatable sent to the UI after a data service call.

```javascript
const dataset = new wire.data.DataSet({
    ...
    Transform: (data, callback) => {

     let table = data.table;

      if (data.config.removeFred) {
          table.delete().eq("value", "Fred Flintstone").table();
      }        
      
      callback(table);
      
    }
});

...

const input = new wire.bsInput().render("#input", {
    data: dataset,
    dataconfig: { removeFred: true }, 
});
```

## Data Method

Especially helpful when using a data set, the `data` method can be used to pull the actual data being displayed in the component.  In the case of a dataset, this will usually be a [data table](/wirebootstrap/reference/wire.data/wire.data.datatable.md) returned from a data service.

```javascript
...

const select = new wire.bsSelect().render({
    data: dataset,
    datamap: { value: "UserName", label: "FullName" }
});

...

const datatable = select.data();
```


---

# 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/configuration/data.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.