From f9693bbc0fb79b973f3e39ac00dc992cc25767b1 Mon Sep 17 00:00:00 2001
From: shiv9604 <shivkounsalye@gmail.com>
Date: Thu, 19 Dec 2024 00:42:21 +0530
Subject: [PATCH 1/4] fix(demo): migrate tui-table classes in dropdown context

---
 .../dropdown-context/examples/2/index.html    | 13 +++++-----
 .../dropdown-context/examples/2/index.less    | 10 ++++++++
 .../dropdown-context/examples/2/index.ts      | 24 ++++++++++++++++++-
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.html b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.html
index 88e1cb336f1d..4035be85b505 100644
--- a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.html
+++ b/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>
diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
index fac266c52119..bd7772c79247 100644
--- a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
+++ b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
@@ -5,3 +5,13 @@
 .icon {
     border-width: 0.25rem;
 }
+
+[tuiTable] {
+    inline-size: 100%;
+}
+
+[tuiTh],
+[tuiTd] {
+    border-inline-start: none;
+    border-inline-end: none;
+}
diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
index 19a5220b6816..25a14b0e765f 100644
--- a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
@@ -2,12 +2,34 @@ 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,
+    TuiTableHead,
+    TuiTableTbody,
+    TuiTableTd,
+    TuiTableTh,
+    TuiTableThGroup,
+    TuiTableTr,
+} 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,
+        TuiTableHead,
+        TuiTableTbody,
+        TuiTableTd,
+        TuiTableTh,
+        TuiTableThGroup,
+        TuiTableTr,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

From ab14e5236fd759207d5b68cc839773b8f523fbe4 Mon Sep 17 00:00:00 2001
From: shiv9604 <shivkounsalye@gmail.com>
Date: Thu, 19 Dec 2024 00:45:10 +0530
Subject: [PATCH 2/4] fix(demo): migrate tui-table classes from browser-support

---
 .../dropdown-context/examples/2/index.less    |  6 +++
 .../demo/src/modules/info/browsers/index.html | 42 +++++++++----------
 .../demo/src/modules/info/browsers/index.less | 19 +++++++++
 .../demo/src/modules/info/browsers/index.ts   | 22 +++++++++-
 4 files changed, 65 insertions(+), 24 deletions(-)
 create mode 100644 projects/demo/src/modules/info/browsers/index.less

diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
index bd7772c79247..e2586a4225be 100644
--- a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
+++ b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
@@ -1,3 +1,5 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
 .context-menu {
     inline-size: 8rem;
 }
@@ -15,3 +17,7 @@
     border-inline-start: none;
     border-inline-end: none;
 }
+
+[tuiTd] {
+    font: var(--tui-font-text-m) !important;
+}
diff --git a/projects/demo/src/modules/info/browsers/index.html b/projects/demo/src/modules/info/browsers/index.html
index 4e0f51203525..0c1ca11ceda4 100644
--- a/projects/demo/src/modules/info/browsers/index.html
+++ b/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>
diff --git a/projects/demo/src/modules/info/browsers/index.less b/projects/demo/src/modules/info/browsers/index.less
new file mode 100644
index 000000000000..bad4574ca87d
--- /dev/null
+++ b/projects/demo/src/modules/info/browsers/index.less
@@ -0,0 +1,19 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiTable] {
+    inline-size: 100%;
+}
+
+[tuiTh],
+[tuiTd] {
+    border-inline-start: none;
+    border-inline-end: none;
+}
+
+[tuiTd] {
+    font: var(--tui-font-text-m) !important;
+}
+
+td {
+    inline-size: 18.75rem;
+}
diff --git a/projects/demo/src/modules/info/browsers/index.ts b/projects/demo/src/modules/info/browsers/index.ts
index 0bd97c8ba63f..20b3d2a6ecf9 100644
--- a/projects/demo/src/modules/info/browsers/index.ts
+++ b/projects/demo/src/modules/info/browsers/index.ts
@@ -1,11 +1,29 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {TuiDemo} from '@demo/utils';
+import {
+    TuiTable,
+    TuiTableHead,
+    TuiTableTbody,
+    TuiTableTd,
+    TuiTableTh,
+    TuiTableThGroup,
+    TuiTableTr,
+} from '@taiga-ui/addon-table';
 
 @Component({
     standalone: true,
-    imports: [TuiDemo],
+    imports: [
+        TuiDemo,
+        TuiTable,
+        TuiTableHead,
+        TuiTableTbody,
+        TuiTableTd,
+        TuiTableTh,
+        TuiTableThGroup,
+        TuiTableTr,
+    ],
     templateUrl: './index.html',
-    styles: ['td {width: 18.75rem}'],
+    styleUrls: ['./index.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class Page {

From 143e7828cc2bf3ab3551b0e1f39ac87bea602e3f Mon Sep 17 00:00:00 2001
From: shiv9604 <shivkounsalye@gmail.com>
Date: Thu, 19 Dec 2024 00:46:24 +0530
Subject: [PATCH 3/4] fix(demo): migrate tui-table classes from filter pipe

---
 .../pipes/filter/examples/1/index.html        | 21 ++++++++++++-------
 .../pipes/filter/examples/1/index.less        | 10 +++++++++
 .../modules/pipes/filter/examples/1/index.ts  | 20 +++++++++++++++++-
 3 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 projects/demo/src/modules/pipes/filter/examples/1/index.less

diff --git a/projects/demo/src/modules/pipes/filter/examples/1/index.html b/projects/demo/src/modules/pipes/filter/examples/1/index.html
index 3209a154fb81..3b499fc07cf9 100644
--- a/projects/demo/src/modules/pipes/filter/examples/1/index.html
+++ b/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>
diff --git a/projects/demo/src/modules/pipes/filter/examples/1/index.less b/projects/demo/src/modules/pipes/filter/examples/1/index.less
new file mode 100644
index 000000000000..47ef92e0b10c
--- /dev/null
+++ b/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;
+}
diff --git a/projects/demo/src/modules/pipes/filter/examples/1/index.ts b/projects/demo/src/modules/pipes/filter/examples/1/index.ts
index 32adb9852178..6f576255c627 100644
--- a/projects/demo/src/modules/pipes/filter/examples/1/index.ts
+++ b/projects/demo/src/modules/pipes/filter/examples/1/index.ts
@@ -2,6 +2,14 @@ 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,
+    TuiTableHead,
+    TuiTableTbody,
+    TuiTableTd,
+    TuiTableTh,
+    TuiTableThGroup,
+} from '@taiga-ui/addon-table';
 import {TuiFilterPipe} from '@taiga-ui/cdk';
 
 export interface Item {
@@ -11,8 +19,18 @@ export interface Item {
 
 @Component({
     standalone: true,
-    imports: [NgForOf, TuiFilterPipe],
+    imports: [
+        NgForOf,
+        TuiFilterPipe,
+        TuiTable,
+        TuiTableHead,
+        TuiTableThGroup,
+        TuiTableTh,
+        TuiTableTbody,
+        TuiTableTd,
+    ],
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

From 72e9f45c6e8382ab28d8e20d8b93ef2423f202c3 Mon Sep 17 00:00:00 2001
From: shiv9604 <shivkounsalye@gmail.com>
Date: Thu, 19 Dec 2024 12:41:47 +0530
Subject: [PATCH 4/4] fix(demo): resolve pr comments

---
 .../dropdown-context/examples/2/index.less    |  4 ++++
 .../dropdown-context/examples/2/index.ts      | 16 +-------------
 .../demo/src/modules/info/browsers/index.less |  7 ++++---
 .../demo/src/modules/info/browsers/index.ts   | 21 ++-----------------
 .../modules/pipes/filter/examples/1/index.ts  | 20 ++----------------
 5 files changed, 13 insertions(+), 55 deletions(-)

diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
index e2586a4225be..75e6b0db266b 100644
--- a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
+++ b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
@@ -18,6 +18,10 @@
     border-inline-end: none;
 }
 
+[tuiTh] {
+    border-block-start: none;
+}
+
 [tuiTd] {
     font: var(--tui-font-text-m) !important;
 }
diff --git a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
index 25a14b0e765f..d4352a96416a 100644
--- a/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
+++ b/projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
@@ -2,15 +2,7 @@ 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,
-    TuiTableHead,
-    TuiTableTbody,
-    TuiTableTd,
-    TuiTableTh,
-    TuiTableThGroup,
-    TuiTableTr,
-} from '@taiga-ui/addon-table';
+import {TuiTable} from '@taiga-ui/addon-table';
 import {TuiDataList, TuiDialogService, TuiDropdown, TuiIcon} from '@taiga-ui/core';
 import {TuiDataListDropdownManager} from '@taiga-ui/kit';
 
@@ -23,12 +15,6 @@ import {TuiDataListDropdownManager} from '@taiga-ui/kit';
         TuiDropdown,
         TuiIcon,
         TuiTable,
-        TuiTableHead,
-        TuiTableTbody,
-        TuiTableTd,
-        TuiTableTh,
-        TuiTableThGroup,
-        TuiTableTr,
     ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
diff --git a/projects/demo/src/modules/info/browsers/index.less b/projects/demo/src/modules/info/browsers/index.less
index bad4574ca87d..e6d1dfd32698 100644
--- a/projects/demo/src/modules/info/browsers/index.less
+++ b/projects/demo/src/modules/info/browsers/index.less
@@ -10,10 +10,11 @@
     border-inline-end: none;
 }
 
-[tuiTd] {
-    font: var(--tui-font-text-m) !important;
+[tuiTh] {
+    border-block-start: none;
 }
 
-td {
+[tuiTd] {
+    font: var(--tui-font-text-m) !important;
     inline-size: 18.75rem;
 }
diff --git a/projects/demo/src/modules/info/browsers/index.ts b/projects/demo/src/modules/info/browsers/index.ts
index 20b3d2a6ecf9..b7974a63c70a 100644
--- a/projects/demo/src/modules/info/browsers/index.ts
+++ b/projects/demo/src/modules/info/browsers/index.ts
@@ -1,27 +1,10 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {TuiDemo} from '@demo/utils';
-import {
-    TuiTable,
-    TuiTableHead,
-    TuiTableTbody,
-    TuiTableTd,
-    TuiTableTh,
-    TuiTableThGroup,
-    TuiTableTr,
-} from '@taiga-ui/addon-table';
+import {TuiTable} from '@taiga-ui/addon-table';
 
 @Component({
     standalone: true,
-    imports: [
-        TuiDemo,
-        TuiTable,
-        TuiTableHead,
-        TuiTableTbody,
-        TuiTableTd,
-        TuiTableTh,
-        TuiTableThGroup,
-        TuiTableTr,
-    ],
+    imports: [TuiDemo, TuiTable],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/projects/demo/src/modules/pipes/filter/examples/1/index.ts b/projects/demo/src/modules/pipes/filter/examples/1/index.ts
index 6f576255c627..631897265307 100644
--- a/projects/demo/src/modules/pipes/filter/examples/1/index.ts
+++ b/projects/demo/src/modules/pipes/filter/examples/1/index.ts
@@ -2,14 +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,
-    TuiTableHead,
-    TuiTableTbody,
-    TuiTableTd,
-    TuiTableTh,
-    TuiTableThGroup,
-} from '@taiga-ui/addon-table';
+import {TuiTable} from '@taiga-ui/addon-table';
 import {TuiFilterPipe} from '@taiga-ui/cdk';
 
 export interface Item {
@@ -19,16 +12,7 @@ export interface Item {
 
 @Component({
     standalone: true,
-    imports: [
-        NgForOf,
-        TuiFilterPipe,
-        TuiTable,
-        TuiTableHead,
-        TuiTableThGroup,
-        TuiTableTh,
-        TuiTableTbody,
-        TuiTableTd,
-    ],
+    imports: [NgForOf, TuiFilterPipe, TuiTable],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,