# Event Data

Sending event data to consumers is an important feature of the WireBootstrap data event system.

## Basic Data Events

To pass a custom object as part of an event, use the `data` method on the data event.

```javascript
const product = { sku: "SKU0001" }

const dataevent = new wire.data.DataEvent("myevent")
    .data(product);

dataevent.raise();
```

The data can then be retrieved from the object passed into the data event listener callback using the `data` attribute.

```javascript
wire.data.listen().event("myevent").when((config) => {
   
   const data = config.data;
   
   console.log(data.sku);
      
});
```

## Structured Data Events

The data event system is used extensively by WireBootstrap components to communicate with one another about the changes a user is making on a page as they interact with the components.  Components can receive notifications of changes in other components and react accordingly if they are displaying data that may be affected by a user interaction.

Components [receive their data](/wirebootstrap/working-with-components/configuration/data.md) as WireBootstrap [data tables](/wirebootstrap/working-with-datatables/datatables.md).  The [wire.data.DataEvent](/wirebootstrap/reference/wire.data/untitled.md) class contains methods that allow provider components to send out events with the components of their data that was changed or otherwise affected by a user interaction.

In the example below, a new `dataselect.wire` event is raised and the `cell` method on the data event is used to store an individual data point contained inside a data table.

```javascript
const table = new wire.data.DataTable([
    {"product", "SKU001", month: "May", sales: "200"}
]);            

...
 
new wire.data.DataEvent()
    .dataselect()
    .cell("product", "SKU001")
    .raise();
```

Other methods allow the event to contain more data about the `dataselect.wire` event supplying the table column, the table row, and the table itself as additional context about the user's selection using methods with the same name.  

```javascript
...

ev.table(table);
 
ev.column(table.getColumn("product"));
 
ev.row(table.Rows[0]);

...
```

## Listening for Structured Data

Consumers can qualify the events in which they are interested by specifying a number of data elements when setting up the listener.

In the example below,  the consumer is listening for `dataselect.wire` events but only on ones that concern the `product` column on a structured data event.  Also seen below, the callback method `when` parameter now contains the data elements sent by the provider that raised the data event.

```javascript
wire.data.listen().dataselect().column("product").when((config) => {
   
   const data = config.data;     
    
   const cell = data.cell;
   const col = data.column;
   const row = data.row;
   const table = data.table;
      
   ...
      
})
```


---

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