# Data attributes

In html you can add [custom attributes](<https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes>) that are prefixed with "data-". EPPlus adds two such attributes to the exported table elements: *data-value* and *data-datatype*. They let you use the exported table not only as a UI element but also as a data carrier, for example for sorting or filtering in JavaScript.

Our [web sample 4](<https://samples.epplussoftware.com/HtmlExport/ExportTable4>) demonstrates how these attributes can be used. Both attributes are included by default and can be turned off with the `RenderDataAttributes` and `RenderDataTypes` [settings](<https://epplussoftware.com/docs/output-formats/html/settings/#exportersettings>).

## data-datatype

This attribute is added either on the *table.thead.tr.th* element or on the *table.tbody.tr.td* element. See the table below for how the .NET datatypes from EPPlus are mapped to the exported html.

| .NET data type | Exported datatype name | Comment |
| :--- | :--- | :--- |
| `bool` | boolean | Exported as 1/0 |
| `Byte`, `Sbyte`, `UInt16`, `UInt32`, `UInt64`, `Int16`, `Int32`, `Int64`, `Decimal`, `Double`, `Single` (float) | number | All types mapped to the single number datatype |
| `DateTime` | datetime | Exported to milliseconds before/after January 1, 1970 (Linux/Unix epoch). |
| `TimeSpan` | timespan | Exported as a numeric value, total milliseconds after midnight |
| `string` (and all other datatypes) | string | Exported as-is |

See below how the data-datatype attribute is included in the html of an exported table.

```html
<thead role="rowgroup">
    <tr role="row">
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">Country</th>
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">FirstName</th>
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">LastName</th>
      <th data-datatype="datetime" class="epp-al" role="columnheader" scope="col">BirthDate</th>
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">City</th>
    </tr>
  </thead>
```

## data-value

This attribute will contain the raw value of the cell, see the datatypes table above. Here is an example:

```html
<tr role="row" scope="row">
  <td role="cell">Scotland</td>
  <td role="cell">Autumn</td>
  <td role="cell">Toy</td>
  <td data-value="-1485302400000" role="cell" class="epp-ar">1922-12-08</td>
  <td role="cell">New Andrewhaven</td>
</tr>
```

Note that this attribute is only present if the raw value differs from the formatted value (the content of the td element).

## See also

- [HTML &amp; CSS](<https://epplussoftware.com/docs/output-formats/html/index.md>)
- [Accessibility](<https://epplussoftware.com/docs/output-formats/html/accessibility/index.md>)