# 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](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/data) as WireBootstrap [data tables](https://docs.wirebootstrap.com/wirebootstrap/working-with-datatables/datatables).  The [wire.data.DataEvent](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.data/untitled) 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;
      
   ...
      
})
```