title: PrimeNG frozen column not working with headerColumnGroup
body: <p>I am trying to use header column grouping with frozen column using PrimeNG. I am able to get first two columns frozen but unfrozen columns also have frozen column names in header.</p>
  <p>I have referred code from here :-</p>
  <p><a href="http://www.primefaces.org/primeng/#/datatable/colgroup" rel="nofollow noreferrer">http://www.primefaces.org/primeng/#/datatable/colgroup</a>
  <a href="http://www.primefaces.org/primeng/#/datatable/scroll" rel="nofollow noreferrer">http://www.primefaces.org/primeng/#/datatable/scroll</a></p>
  <p>PrimeNG version :- &quot;primeng&quot;: &quot;^2.0.0&quot;,</p>
  <p><a href="https://i.stack.imgur.com/mLzOI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mLzOI.png" alt="enter image description here" /></a>
  My component html page contains:</p>
  <pre><code>&lt;p-dataTable [value]=&quot;sales&quot;  scrollable=&quot;true&quot; scrollHeight=&quot;200px&quot;  frozenWidth=&quot;450px&quot; unfrozenWidth=&quot;600px&quot; &gt;
     &lt;p-headerColumnGroup&gt;
        &lt;p-row&gt;
           &lt;p-column header=&quot;Brand&quot; [style]=&quot;{'width':'250px'}&quot;  &gt;&lt;/p-column&gt;
           &lt;p-column header=&quot;Last Year Sale&quot; [style]=&quot;{'width':'250px'}&quot;&gt;&lt;/p-column&gt;
           &lt;p-column header=&quot;This Year Sale&quot; [style]=&quot;{'width':'250px'}&quot;&gt;&lt;/p-column&gt;
           &lt;p-column header=&quot;Last Year Profit&quot; [style]=&quot;{'width':'250px'}&quot;&gt;&lt;/p-column&gt;
           &lt;p-column header=&quot;This Year Profit&quot; [style]=&quot;{'width':'250px'}&quot;&gt;&lt;/p-column&gt;
        &lt;/p-row&gt;
        &lt;p-row&gt;
           &lt;p-column header=&quot;Sale Rate&quot; colspan=&quot;5&quot;&gt;&lt;/p-column&gt;
        &lt;/p-row&gt;
     &lt;/p-headerColumnGroup&gt;
     &lt;p-column field=&quot;brand&quot; [style]=&quot;{'width':'250px'}&quot; frozen=&quot;true&quot;&gt;&lt;/p-column&gt;
     &lt;p-column field=&quot;lastYearSale&quot; [style]=&quot;{'width':'250px'}&quot; frozen=&quot;true&quot; &gt;&lt;/p-column&gt;
     &lt;p-column field=&quot;thisYearSale&quot; [style]=&quot;{'width':'250px'}&quot;&gt;&lt;/p-column&gt;
     &lt;p-column field=&quot;lastYearProfit&quot; [style]=&quot;{'width':'250px'}&quot;&gt;&lt;/p-column&gt;
     &lt;p-column field=&quot;thisYearProfit&quot; [style]=&quot;{'width':'250px'}&quot;&gt;&lt;/p-column&gt;
  &lt;/p-dataTable&gt;
  </code></pre>
  <p>My Component file has:</p>
  <pre><code>ngOnInit() {
      this.sales = [{
              brand: 'Philips',
              lastYearSale: '49%',
              thisYearSale: '22%',
              lastYearProfit: '$745,232',
              thisYearProfit: '$650,323,'
          },
          {
              brand: 'Song',
              lastYearSale: '17%',
              thisYearSale: '79%',
              lastYearProfit: '$643,242',
              thisYearProfit: '500,332'
          },
          {
              brand: 'LG',
              lastYearSale: '52%',
              thisYearSale: ' 65%',
              lastYearProfit: '$421,132',
              thisYearProfit: '$150,005'
          },
          {
              brand: 'Sharp',
              lastYearSale: '82%',
              thisYearSale: '12%',
              lastYearProfit: '$131,211',
              thisYearProfit: '$100,214'
          },
          {
              brand: 'Panasonic',
              lastYearSale: '44%',
              thisYearSale: '45%',
              lastYearProfit: '$66,442',
              thisYearProfit: '$53,322'
          },
          {
              brand: 'HTC',
              lastYearSale: '90%',
              thisYearSale: '56%',
              lastYearProfit: '$765,442',
              thisYearProfit: '$296,232'
          },
          {
              brand: 'Toshiba',
              lastYearSale: '75%',
              thisYearSale: '54%',
              lastYearProfit: '$21,212',
              thisYearProfit: '$12,533'
          }
      ];
  }
  </code></pre>