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 @@ +
+ + +
+
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 {}