Primeng: TurboTable no styles

[codehunter13]

Hi,

Im trying to use the new TurboTable but no style is applied on the table.

I imported it like this:
import { TableModule } from 'primeng/components/table/table';

<p-table [value]="gezinnen" scrollHeight="90%" [responsive]="true"
                 [scrollable]="true" [rows]="100" virtualScroll="virtualScroll"
                 [lazy]="true" (onLazyLoad)="loadGezinnenLazy($event)" [loading]="loading" [totalRecords]="totalRecords"
                 sortMode="multiple" sortField="pleegouders"
                 selectionMode="single"
                 resizableColumns="true" reorderableColumns="true"
                 (onRowDblclick)="onRowDblClickHandler($event)">
        <ng-template pTemplate="header">
            <tr>
                <th>Pleegouders</th>
                <th>AanspreekTitelId</th>
                <th>Codenummer</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-gezin>
            <tr>
                <td>{{gezin.pleegouders}}</td>
                <td>{{gezin.year}}</td>
                <td>{{gezin.aanspreekTitelId}}</td>
                <td>{{gezin.codenummer}}</td>
            </tr>
        </ng-template>
    </p-table>

Is there something else i have to do to use the new table?

If i import is as documented on the website:
import { TableModule } from 'primeng/table';
i get the following error:
[at-loader] ./ClientApp/framework/fw.module.ts:28:29
TS7016: Could not find a declaration file for module 'primeng/table'. 'C:/Projects/Pleegzorg/Pleegzorg.Web/node_modules/primeng/table.js' implicitly has an 'any' type.
Try npm install @types/primeng/table if it exists or add a new declaration (.d.ts) file containing declare module 'primeng/table';

[cagataycivici]

Which theme are you using?

[rafa-as]

The same issue here and I do not use any theme

[codehunter13]

the omega theme.

[tigrenok00]

Same here, with bootstrap theme and omega theme. Also when enabling row selection no styles are applied (hover / selection).

[cagataycivici]

RC2 should fix the import issue.

[lr12003]

When will you release that version? I am using Verona's theme

[rafa-as]

@cagataycivici this issue still happening with no theme on RC2. This is the correct behaviour or is an error?

[lr12003]

Yes, this issue still happening on RC2 version. Any solutions? really I want to use the TurboTable

[lr12003]

@cagataycivici should add these changes to premium themes too

[cagataycivici]

@lr12003 Premiums have their own sass based styling, already done and will be released with 5.2. final m next week. Verona will be updated as well.

[cagataycivici]

Border widths are not defined by table.css, it is responsibility of themes, the free themes have;

    .ui-table-thead > tr > th,
    .ui-table-tfoot > tr > td {
        background: $headerBgColor;
        border: 1px solid $headerBorderColor;
        color: $headerTextColor;
    }

And I can see the borders at showcase, seems like a custom theme issue on your side.

[pamuller]

using RC2
Had the same issue . I was pointing to the primeui stylesheet and not to the primeng stylesheet for the theme i was using.
../node_modules/primeng/resources/themes/omega/theme.css

[rafa-as]

datatable.css line 36

.ui-datatable .ui-datatable-thead > tr > th,
.ui-datatable .ui-datatable-tfoot > tr > td,
.ui-datatable .ui-datatable-data > tr > td {
    border-color: inherit;
    box-sizing: border-box;
    padding: .25em .5em;
    border-width: 1px;
    border-style: solid;
}

[lr12003]

@cagataycivici Have you updated the Verona theme? :(

[keremozen]

@cagataycivici same issue for ultima theme

[claudiuconstantin]

I have the same issue with the bootstrap theme, the styles are not applied to the Turbo Table. I tried other themes and those are working

[claudiuconstantin]

Hm, I think I got it, some older themes are not supported anymore in latest version (bootstrap for example). It seems that only Nova-suite themes are up to date - is that right?

[bobbydowling]

Same issue here with BS theme