Primeng: Support table style class for TurboTable (like 'tableStyleClass' in DataTable)

[thojo]

I'm submitting a ...

[ ] bug report
[x] feature request/primeng/wiki/Roadmap
[ ] support request

Current behavior
_DataTable_ has an (undocumented?) property tableStyleClass for setting css classes on the table elements:
https://github.com/primefaces/primeng/blob/4e7aceb68f821599fa19d66297a8d73193409fea/src/app/components/datatable/datatable.ts#L565

Expected behavior
_TurboTable_ is missung such a property and I coudn't find any other (reasonable) possibility to achieve it.

What is the motivation / use case for changing the behavior?
Setting the css classes for the table element is very handy for custom styling, e.g. using the Bootstrap classes to cutomize the table style or applying diffenrent themes. With _DataTable_ this was relally straight forward. But because _DataTable_ is deprecated and I want to benefit from _TurboTables_ optimizations, it would be great to have this possibility, too.

• PrimeNG version: 5.2.0

[jmmygoggle]

As a workaround until this is available, it is possible to add classes using Angular's ElementRef and Renderer2 instances (available via constructor dependency injection) along with a ViewChildren decorator assignment that focuses on providing a QueryList of ElementRef values from the p-table's template reference variable (#myTable).

My boilerplate is below and uses a template reference variable on the p-table element but also needed to subscribe for changes because the p-table element was dependent on an *ngIf and was not immediately available. This can be simplified if p-table is always displayed.

// Template excerpt
<p-table #myTable
//...

// Component excerpt...
import { AfterViewInit, Component, ElementRef, OnInit, QueryList, Renderer2, ViewChildren } from '@angular/core';
//...
export class MyComponent implements OnInit, AfterViewInit {

    @ViewChildren('myTable', {read: ElementRef}) myTable: QueryList<ElementRef>;

    protected myList: MyListModel; // Contains list of things populating the table in its 'result' member

    constructor(
        private renderer: Renderer2
        // ... (other things like API service to get list etc.)
    ) {
        this.createColDefs(); // Sets up dynamic columns/fields to be rendered in table and related properties
    }

    ngOnInit() {
        this.initMyList(); // Sets up the subscription for retrieving the list and eventually adds to the 'result' member of myList
    }

    ngAfterViewInit() {
        this.insertBootstrapStylesIntoPrimengTurboTable();
    }

    private insertBootstrapStylesIntoPrimengTurboTable() {
        this.myTable.changes.subscribe(
            (res) => {
                if (this.myList.result && this.myList.result.length) { // conditional logic is same as logic in template *ngIf that determines if p-table element is displayed

                    const bootstrapClasses = 'table table-bordered table-condensed table-striped';
                    // Adding the classes
                    let primengTurboTable = res.first.nativeElement;
                    let innerTableElement = primengTurboTable.querySelector('table');
                    this.renderer.setAttribute(innerTableElement, 'class', bootstrapClasses);
                }
            }
        )
    }

My main aim was simply to get back some basic Bootstrap styles onto the TurboTable and defer the work and testing needed to implement PrimeNG's paid, Bootstrap-equivalent Avalon theme. My app's other features rely on Bootstrap 3.x styles and the older free bootstrap theme.css for the DataTable widgets but I wanted to take advantage of new TurboTable features.

Applying TurboTable styles that are only available in more up-to-date free themes like omega conflicted with the free PrimeNG bootstrap theme and PrimeNG styles/themes don't seem to be designed to live within Component style encapsulation to prevent that PrimeNG bootstrap vs. free omega theme conflict.

(No guarantees on how maintainable, robust or sensible this approach is.)

[cagataycivici]

Why not add

.ui-table table {
   //your styles
}

[jmmygoggle]

This would certainly work for some folks applying their own styles.

In my case, I did not want to recreate either Bootstrap or PrimeNG bootstrap theme.css styles by writing new styles. At first, I considered creating my own version (or a patch) of the existing free PrimeNG bootstrap/theme.css with added .ui-table styles equivalent to .ui-data-table styles.

I quickly realized this was error-prone and would introduce quite a bit of extra work, testing and styles to maintain, which ( @cagataycivici ) your fantastic UI library already helps me avoid. Because all the styles I require already exist in Bootrap CSS, I avoid the complexity and maintenance by simply adding a few Bootstrap classes to the table element inside TurboTable.

[dragontheory]

Is there no simple API way to turn off table-striping?

[psini]

Can i make i pull request for that , i have the same issue. Created pull request https://github.com/primefaces/primeng/pull/5679

[psini]

Are there some problem with my pull request? if you give me some feedback can i adjust the pull.
Thank you