Skip to content

Data attributes

In html you can add custom 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 demonstrates how these attributes can be used. Both attributes are included by default and can be turned off with the RenderDataAttributes and RenderDataTypes settings.

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.

<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:

<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