# Data table header

**URL:** <https://community.dynatrace.com/t/data-table-header/44839>\
**Category:** Developer Q&A Forum\
**Tags:** strato\
**Created:** [March 25, 2024, 12:42pm UTC](https://community.dynatrace.com/t/data-table-header/44839 "2024-03-25T12:42:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![veranika\_k](https://avatars.discourse-cdn.com/v4/letter/v/22d042/32.png) [@veranika\_k](https://community.dynatrace.com/u/veranika_k)\
**Post date:** [March 25, 2024, 12:42pm UTC](https://community.dynatrace.com/t/data-table-header/44839/1 "2024-03-25T12:42:51Z")

</div>

Hi!&nbsp;  
Is it possible in case the heading in the table row is too long and not visible to add some kind of tooltip functionality, so the whole heading will be visible by hovering over it?

---

<div class="post-metadata">

**Author:** ![educampver](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/educampver/32/29917_2.png) [@educampver](https://community.dynatrace.com/u/educampver)\
**Post date:** [March 27, 2024, 9:45am UTC](https://community.dynatrace.com/t/data-table-header/44839/2 "2024-03-27T09:45:58Z")

</div>

Hi&nbsp;[@veranika\_k](https://community.dynatrace.com/user/67240), there’s no such functionality out of the box. The solution might be to have a custom header, which you can define in a custom column definition, something like this:

```javascript
const App = () => {
  const columns: TableColumn[] = [{
    header: <MyLongHeaderComponent />,
    ...
  }];

  return <DataTable data={data} columns={columns}></DataTable>;
};

```

The drawback of this solution is that you’d lose all the functionalities and styles of the default header, you’d have to handle that yourself. I’ll communicate your needs to the team.