---
title: "Data table fixed header & horizontal scroll – Angular"
description: "I’m working on a table that should have a fixed thead during page scrolling, and the table also needs to have a horizontal scroll. To achieve this, I'm cloning the thead of the table upon scrolling..."
url: https://extraproxies.com/data-table-fixed-header-horizontal-scroll-angular
date: 2023-10-18
modified: 2023-10-18
author: "ExtraProxies"
categories: ["Proxy News"]
tags: ["Angular", "Data", "fixed", "header", "horizontal", "scroll", "table"]
type: post
lang: en
---

# Data table fixed header & horizontal scroll – Angular

I’m working on a table that should have a fixed thead during page scrolling, and the table also needs to have a horizontal scroll. To achieve this, I’m cloning the thead of the table upon scrolling and adding the CSS property overflow: auto to it.

I then synchronize the horizontal scroll bar of the thead with that of the table. This way, when I scroll horizontally on the table, the thead scrolls as well. Everything is working as expected, but I discovered a bug. Please see the attached gif for reference. I can’t seem to find a way to fix it. Do you have any ideas? I’ve tried using libraries, but they are either developed in AngularJS or jQuery, and neither of those options suits my needs.

I created an angular directive called fixed.directive.ts

![enter image description here](https://i.stack.imgur.com/SwIFZ.gif)

CODE