From bc46a755b124c288241939be284077767bf57704 Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Wed, 15 Jul 2026 03:44:01 +0400
Subject: [PATCH] feat(design-system): add reusable Table shell primitive

Standalone, OnPush, ViewEncapsulation.None scoped under .app-table/.app-table-wrapper
so projected thead/tbody markup receives consistent styling. Scroll container for
responsive overflow. Colors/radius/spacing via existing tenant CSS vars with fallbacks.
---
 src/app/shared/ui/table/table.component.html |  5 +++
 src/app/shared/ui/table/table.component.scss | 40 ++++++++++++++++++++
 src/app/shared/ui/table/table.component.ts   | 11 ++++++
 3 files changed, 56 insertions(+)
 create mode 100644 src/app/shared/ui/table/table.component.html
 create mode 100644 src/app/shared/ui/table/table.component.scss
 create mode 100644 src/app/shared/ui/table/table.component.ts

diff --git a/src/app/shared/ui/table/table.component.html b/src/app/shared/ui/table/table.component.html
new file mode 100644
index 0000000..d53be46
--- /dev/null
+++ b/src/app/shared/ui/table/table.component.html
@@ -0,0 +1,5 @@
+<div class="app-table-wrapper">
+  <table class="app-table">
+    <ng-content />
+  </table>
+</div>
diff --git a/src/app/shared/ui/table/table.component.scss b/src/app/shared/ui/table/table.component.scss
new file mode 100644
index 0000000..35651fe
--- /dev/null
+++ b/src/app/shared/ui/table/table.component.scss
@@ -0,0 +1,40 @@
+.app-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--border-color, #e4e4e7);
+  border-radius: var(--radius-lg, 10px);
+}
+
+.app-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  color: var(--text-primary, #1f322d);
+
+  thead {
+    background: var(--bg-secondary, #f4f4f5);
+  }
+
+  th {
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-secondary, #6b7280);
+    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+    border-bottom: 1px solid var(--border-color, #e4e4e7);
+    white-space: nowrap;
+  }
+
+  td {
+    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+    border-bottom: 1px solid var(--border-color, #e4e4e7);
+    vertical-align: middle;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  tbody tr:hover {
+    background: var(--bg-secondary, #f4f4f5);
+  }
+}
diff --git a/src/app/shared/ui/table/table.component.ts b/src/app/shared/ui/table/table.component.ts
new file mode 100644
index 0000000..fe47a65
--- /dev/null
+++ b/src/app/shared/ui/table/table.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-table',
+  standalone: true,
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class TableComponent {}