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