Table with Frozen columns

UI Components for Angular
Post Reply
TheOtherNeil
Posts: 2
Joined: 19 Mar 2018, 14:32

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.

TheOtherNeil
Posts: 2
Joined: 19 Mar 2018, 14:32

19 Mar 2018, 17:18

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

TimMackey
Posts: 5
Joined: 11 Apr 2018, 07:24

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.

yigitfindikli
Posts: 414
Joined: 08 Aug 2018, 14:09

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?

acabhishek
Posts: 2
Joined: 30 Apr 2021, 11:05

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

acabhishek
Posts: 2
Joined: 30 Apr 2021, 11:05

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

PhilHuhn
Posts: 93
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: cmalpicag and 2 guests