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.
This commit is contained in:
5
src/app/shared/ui/table/table.component.html
Normal file
5
src/app/shared/ui/table/table.component.html
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<div class="app-table-wrapper">
|
||||||
|
<table class="app-table">
|
||||||
|
<ng-content />
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
40
src/app/shared/ui/table/table.component.scss
Normal file
40
src/app/shared/ui/table/table.component.scss
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
11
src/app/shared/ui/table/table.component.ts
Normal file
11
src/app/shared/ui/table/table.component.ts
Normal file
@@ -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 {}
|
||||||
Reference in New Issue
Block a user