<commit_before><table-submenu></table-submenu>

<div class="content-section introduction">
    <div>
        <span class="feature-title">Table - <span class="subitem">Basic</span></span>
        <span>Table requires a header and a body template to display data.</span>
    </div>
</div>

<div [ngClass]="{'content-section implementation': true}">
    <h3 class="first">Basic</h3>
    <p-table [value]="cars">
        <ng-template pTemplate="header">
            <tr>
                <th>Vin</th>
                <th>Year</th>
                <th>Brand</th>
                <th>Color</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-car>
            <tr>
                <td>{{car.vin}}</td>
                <td>{{car.year}}</td>
                <td>{{car.brand}}</td>
                <td>{{car.color}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="footer" let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{col.header}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="tablebasicdemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablebasicdemo.ts" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class TableBasicDemo implements OnInit &#123;

    cars: Car[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    &#125;
&#125;
</code>
</pre>   
        </p-tabPanel>

        <p-tabPanel header="tablebasicdemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablebasicdemo.html" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;p-table [value]="cars"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Vin&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;Brand&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
        &lt;/tr&gt;<commit_msg>Revert "Update tablebasicdemo.html"<commit_after><table-submenu></table-submenu>

<div class="content-section introduction">
    <div>
        <span class="feature-title">Table - <span class="subitem">Basic</span></span>
        <span>Table requires a header and a body template to display data.</span>
    </div>
</div>

<div [ngClass]="{'content-section implementation': true}">
    <h3 class="first">Basic</h3>
    <p-table [value]="cars">
        <ng-template pTemplate="header">
            <tr>
                <th>Vin</th>
                <th>Year</th>
                <th>Brand</th>
                <th>Color</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-car>
            <tr>
                <td>{{car.vin}}</td>
                <td>{{car.year}}</td>
                <td>{{car.brand}}</td>
                <td>{{car.color}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="footer" let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{col.header}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="tableeditdemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tableeditdemo.ts" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class TableBasicDemo implements OnInit &#123;

    cars: Car[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    &#125;
&#125;
</code>
</pre>   
        </p-tabPanel>

        <p-tabPanel header="tableeditdemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tableeditdemo.html" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;p-table [value]="cars"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Vin&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;Brand&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
        &lt;/tr&gt;
{'fraction_non_alphanumeric': 0.17870036101083034, 'fraction_numerical': 0.008824709185720016, 'mean_word_length': 2.1643401015228427, 'pattern_counts': {'":': 0, '<': 137, '<?xml version=': 0, '>': 139, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7054879', 'n_tokens_mistral': 1705, 'n_tokens_neox': 1613, 'n_words': 269}