Prime Community Forum

Posted: **19 Mar 2018, 14:59**

Hi All,

I'm trying to create a table with frozen columns, ideally for horizontal scrolling if I can get it to work. What I'm getting at the moment though is the frozen headers and column, then directly below it (looking like it's in a different table entirely) I get the remaining headers and columns.

Anonymised code is below, but I'm hoping this is just a simple case of me following the documentation at https://www.primefaces.org/primeng/#/table wrong.

Code: Select all

    <p-table [value]="records" [scrollable]="true" scrollHeight="150px" frozenWidth="200px">
        <ng-template pTemplate="frozenheader">
            <tr>
                <th style="width:200px;height:84px">Frozen 1</th>
                <th style="width:200px;height:84px">Frozen 2</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="frozenbody" let-record>
            <tr>
                <td>{{record.frozen1}}</td>
                <td>{{record.frozen2}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="header">
                <th>Normal 1</th>
                <th>Normal 2</th>
                <th>Normal 3</th>
                <th>Normal 4</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-record>
            <tr>
                <td>{{record.normal1}}</td>
                <td>{{record.normal2}}</td>
                <td>{{record.normal3}}</td>
                <td>{{record.normal4}}</td>
            </tr>
        </ng-template>
    </p-table>

Code: Select all

this.records = [
{ frozen1:'1', frozen2:'1', normal1:'1', normal2:'1', normal3:'1', normal4:'1' },
{ frozen1:'2', frozen2:'2', normal1:'2', normal2:'2', normal3:'2', normal4:'2' },
{ frozen1:'3', frozen2:'3', normal1:'3', normal2:'3', normal3:'3', normal4:'3' },
{ frozen1:'4', frozen2:'4', normal1:'4', normal2:'4', normal3:'4', normal4:'4' }
]

Thanks for your help.

Posted: **19 Mar 2018, 17:18**

Yep, looks like I'm being an idiot and hadn't imported the css correctly.

Posted: **18 Jan 2019, 19:43**

@TheOtherNeil - I'm experiencing the same issue. Could you please be more specific as to what the problem was and your solution. Posting some code vs. a description would be appreciated. Thanks.

Posted: **19 Jan 2019, 11:32**

TimMackey wrote: ↑
18 Jan 2019, 19:43
@TheOtherNeil - I'm experiencing the same issue. Could you please be more specific as to what the problem was and your solution. Posting some code vs. a description would be appreciated. Thanks.

Hi,
Did you import css correctly?

Posted: **30 Apr 2021, 11:09**

I am also facing the same issue. I didn't clearly understand the meaning of 'importing css correctly'. I am using primevue and all other things works perfectly is there some specific css to make the frozen columns work ??

Posted: **30 Apr 2021, 12:47**

Hi,

I am experiencing the same issue. I didn't fully understand what you mean by "import css correctly". I am using primevue and have imported the css in my main.js. Is there some specific css for datatable with frozen columns ??

Posted: **30 Apr 2021, 21:10**

Hey:
The preferred Angular 11 way to import CSS is by the angular.json configuration file:

Code: Select all

  "options": {
    "outputPath": "dist/weekly",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap-grid.min.css",
      "node_modules/primeng/resources/themes/nova/theme.css",
      "node_modules/primeng/resources/primeng.min.css",
      "node_modules/primeicons/primeicons.css",
      "src/styles.css"
    ],
    "scripts": []
  },

I am using the nova PrimeNG theme and bootstrap-grid for general layout. Additionally, you need to import the base PrimeNG css and I place my custom styles in src/styles.css.

Phil

Prime Community Forum

Table with Frozen columns

Table with Frozen columns

Re: Table with Frozen columns

Re: Table with Frozen columns

Re: Table with Frozen columns

Re: Table with Frozen columns

Re: Table with Frozen columns

Re: Table with Frozen columns