#9721 - Remove tui-table classes from demo

projects/demo/src/modules/directives/dropdown-context/examples/2/index.html

@@ -1,25 +1,26 @@
 <p>Right-click any table row.</p>
 
-<table class="tui-table">
-    <tbody>
-        <tr class="tui-table__tr tui-table__tr_hover_disabled">
+<table tuiTable>
+    <thead tuiTHead>
+        <tr tuiThGroup>
             <th
                 *ngFor="let column of tableColumns"
-                class="tui-table__th"
+                tuiTh
             >
                 {{ column }}
             </th>
         </tr>
+    </thead>
+    <tbody tuiTbody>
         <tr
             *ngFor="let rowInfo of tableData"
             #dropdown="tuiDropdown"
             tuiDropdownContext
-            class="tui-table__tr"
             [tuiDropdown]="contextMenu"
         >
             <td
                 *ngFor="let value of getObjectValues(rowInfo)"
-                class="tui-table__td"
+                tuiTd
             >
                 {{ value }}
             </td>

projects/demo/src/modules/directives/dropdown-context/examples/2/index.less

@@ -1,7 +1,27 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
 .context-menu {
     inline-size: 8rem;
 }
 
 .icon {
     border-width: 0.25rem;
 }
+
+[tuiTable] {
+    inline-size: 100%;
+}
+
+[tuiTh],
+[tuiTd] {
+    border-inline-start: none;
+    border-inline-end: none;
+}
+
+[tuiTh] {
+    border-block-start: none;
+}
+
+[tuiTd] {
+    font: var(--tui-font-text-m) !important;
+}

projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts

@@ -2,12 +2,20 @@ import {NgForOf} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiTable} from '@taiga-ui/addon-table';
 import {TuiDataList, TuiDialogService, TuiDropdown, TuiIcon} from '@taiga-ui/core';
 import {TuiDataListDropdownManager} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [NgForOf, TuiDataList, TuiDataListDropdownManager, TuiDropdown, TuiIcon],
+    imports: [
+        NgForOf,
+        TuiDataList,
+        TuiDataListDropdownManager,
+        TuiDropdown,
+        TuiIcon,
+        TuiTable,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

projects/demo/src/modules/info/browsers/index.html

@@ -1,17 +1,16 @@
 <tui-doc-page header="Browser support">
     <h2 class="tui-text_h4 tui-space_top-0 tui-space_bottom-3">Desktop</h2>
-    <table class="tui-table">
-        <tbody>
-            <tr class="tui-table__tr">
-                <th class="tui-table__th">Browser</th>
-                <th class="tui-table__th">Version</th>
+    <table tuiTable>
+        <thead tuiThead>
+            <tr tuiThGroup>
+                <th tuiTh>Browser</th>
+                <th tuiTh>Version</th>
             </tr>
-            <tr
-                *ngFor="let browser of desktopBrowsers"
-                class="tui-table__tr"
-            >
-                <td class="tui-table__td">{{ browser.name }}</td>
-                <td class="tui-table__td">
+        </thead>
+        <tbody tuiTbody>
+            <tr *ngFor="let browser of desktopBrowsers">
+                <td tuiTd>{{ browser.name }}</td>
+                <td tuiTd>
                     <ng-container *ngIf="browser.version; else notSupported">
                         {{ browser.version }}
                     </ng-container>
@@ -20,18 +19,17 @@ <h2 class="tui-text_h4 tui-space_top-0 tui-space_bottom-3">Desktop</h2>
         </tbody>
     </table>
     <h2 class="tui-text_h4 tui-space_top-6 tui-space_bottom-3">Mobile</h2>
-    <table class="tui-table">
-        <tbody>
-            <tr class="tui-table__tr">
-                <th class="tui-table__th">Browser</th>
-                <th class="tui-table__th">Version</th>
+    <table tuiTable>
+        <thead tuiThead>
+            <tr tuiThGroup>
+                <th tuiTh>Browser</th>
+                <th tuiTh>Version</th>
             </tr>
-            <tr
-                *ngFor="let browser of mobileBrowsers"
-                class="tui-table__tr"
-            >
-                <td class="tui-table__td">{{ browser.name }}</td>
-                <td class="tui-table__td">{{ browser.version }}</td>
+        </thead>
+        <tbody tuiTbody>
+            <tr *ngFor="let browser of mobileBrowsers">
+                <td tuiTd>{{ browser.name }}</td>
+                <td tuiTd>{{ browser.version }}</td>
             </tr>
         </tbody>
     </table>

projects/demo/src/modules/info/browsers/index.less

@@ -0,0 +1,20 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiTable] {
+    inline-size: 100%;
+}
+
+[tuiTh],
+[tuiTd] {
+    border-inline-start: none;
+    border-inline-end: none;
+}
+
+[tuiTh] {
+    border-block-start: none;
+}
+
+[tuiTd] {
+    font: var(--tui-font-text-m) !important;
+    inline-size: 18.75rem;
+}

projects/demo/src/modules/info/browsers/index.ts

@@ -1,11 +1,12 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {TuiDemo} from '@demo/utils';
+import {TuiTable} from '@taiga-ui/addon-table';
 
 @Component({
     standalone: true,
-    imports: [TuiDemo],
+    imports: [TuiDemo, TuiTable],
     templateUrl: './index.html',
-    styles: ['td {width: 18.75rem}'],
+    styleUrls: ['./index.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class Page {

projects/demo/src/modules/pipes/filter/examples/1/index.html

@@ -1,12 +1,17 @@
-<table class="tui-table table">
-    <thead>
-        <tr>
-            <th class="tui-table__th cell_name">Name</th>
-            <th class="tui-table__th cell_sum">Sum, $</th>
+<table
+    tuiTable
+    [style.width.rem]="17"
+>
+    <thead tuiThead>
+        <tr tuiThGroup>
+            <th tuiTh>Name</th>
+            <th tuiTh>Sum, $</th>
         </tr>
+    </thead>
+    <tbody tuiTbody>
         <tr *ngFor="let item of items | tuiFilter: matcher : 300">
-            <td class="tui-table__td cell_name">{{ item.name }}</td>
-            <td class="tui-table__td cell_sum">{{ item.price }}</td>
+            <td tuiTd>{{ item.name }}</td>
+            <td tuiTd>{{ item.price }}</td>
         </tr>
-    </thead>
+    </tbody>
 </table>

projects/demo/src/modules/pipes/filter/examples/1/index.less

@@ -0,0 +1,10 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiTh],
+[tuiTd] {
+    border: none;
+}
+
+[tuiTd] {
+    font: var(--tui-font-text-m) !important;
+}

projects/demo/src/modules/pipes/filter/examples/1/index.ts

@@ -2,6 +2,7 @@ import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiTable} from '@taiga-ui/addon-table';
 import {TuiFilterPipe} from '@taiga-ui/cdk';
 
 export interface Item {
@@ -11,8 +12,9 @@ export interface Item {
 
 @Component({
     standalone: true,
-    imports: [NgForOf, TuiFilterPipe],
+    imports: [NgForOf, TuiFilterPipe, TuiTable],
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })