ng-tablekit 1.0.0

package/src/app/core/config/table.config.ts

@@ -0,0 +1,18 @@
+import { TableAction, TableColumn, TableRecord } from '../models/table.models';
+
+export const STANDARD_COLUMNS: TableColumn<TableRecord>[] = [
+  { key: 'name', title: 'Name', type: 'text', sortable: true, width: '220px', align: 'left' },
+  { key: 'code', title: 'Code', type: 'text', sortable: true, width: '130px', align: 'center' },
+  { key: 'category', title: 'Category', type: 'text', sortable: true, filterable: true, width: '150px', align: 'left' },
+  // { key: 'amount', title: 'Amount', type: 'currency', sortable: true, width: '120px', align: 'right' },
+  { key: 'createdDate', title: 'Created Date', type: 'date', sortable: true, width: '150px', align: 'center' },
+  { key: 'status', title: 'Status', type: 'status', filterable: true, align: 'center', width: '120px' }
+];
+
+export const PAGE_SIZE_OPTIONS = [10, 20, 30, 40, 50];
+
+export const STANDARD_ACTIONS: TableAction[] = [
+  { key: 'view', label: 'View', icon: 'eye' },
+  { key: 'edit', label: 'Edit', icon: 'edit' },
+  { key: 'delete', label: 'Delete', icon: 'delete', danger: true }
+];

package/src/app/core/data/record.data.ts

@@ -0,0 +1,26 @@
+import { TableRecord } from '../models/table.models';
+
+const categories = ['Category A', 'Category B', 'Category C', 'Category D'];
+const types = ['Standard', 'Priority', 'Internal', 'External'];
+const people = ['Alex Morgan', 'Jordan Lee', 'Taylor Smith', 'Casey Brown', 'Morgan Davis'];
+const statuses: TableRecord['status'][] = ['Active', 'Inactive', 'Pending', 'Approved', 'Rejected'];
+
+export const TABLE_RECORDS: TableRecord[] = Array.from({ length: 125 }, (_, index) => {
+  const number = index + 1;
+  const created = new Date(2026, index % 8, (index % 26) + 1);
+  return {
+    id: number,
+    name: `${['Alpha','Beta','Gamma','Delta','Omega'][index % 5]} Record ${String(number).padStart(3, '0')}`,
+    code: `REC-${String(number).padStart(3, '0')}`,
+    category: categories[index % categories.length],
+    type: types[index % types.length],
+    referenceNumber: `REF-${2026000 + number}`,
+    sequence: number,
+    createdDate: created.toISOString(),
+    assignedTo: people[index % people.length],
+    amount: 1250 + number * 87.5,
+    status: statuses[index % statuses.length],
+    active: index % 3 !== 0,
+    description: `Generic record ${number} used to demonstrate reusable Angular table behavior.`
+  };
+});

package/src/app/core/models/table.models.ts

@@ -0,0 +1,61 @@
+export type RecordStatus = 'Active' | 'Inactive' | 'Pending' | 'Approved' | 'Rejected';
+export type TableColumnType = 'text' | 'number' | 'date' | 'currency' | 'status' | 'boolean' | 'action';
+export type TableAlign = 'left' | 'center' | 'right';
+export type TableSortOrder = 'ascend' | 'descend' | null;
+
+export interface TableRecord {
+  id: number;
+  name: string;
+  code: string;
+  category: string;
+  type: string;
+  referenceNumber: string;
+  sequence: number;
+  createdDate: string;
+  assignedTo: string;
+  amount: number;
+  status: RecordStatus;
+  active: boolean;
+  description: string;
+}
+
+export interface TableFilterOption {
+  text: string;
+  value: string | number | boolean;
+}
+
+export interface TableColumn<T extends object = TableRecord> {
+  key: keyof T & string;
+  title: string;
+  type?: TableColumnType;
+  sortable?: boolean;
+  filterable?: boolean;
+  filters?: TableFilterOption[];
+  width?: string;
+  align?: TableAlign;
+  dateFormat?: string;
+  currencyCode?: string;
+  visible?: boolean;
+}
+
+export interface TableAction {
+  key: 'view' | 'edit' | 'delete' | string;
+  label: string;
+  icon?: string;
+  danger?: boolean;
+}
+
+export interface TableQuery {
+  pageIndex: number;
+  pageSize: number;
+  searchText: string;
+  sortField: string | null;
+  sortOrder: TableSortOrder;
+  filters: Record<string, Array<string | number | boolean>>;
+  createdDateRange?: [Date, Date] | null;
+}
+
+export interface TableResponse<T> {
+  data: T[];
+  total: number;
+}

package/src/app/core/utils/table.utils.ts

@@ -0,0 +1,49 @@
+import { TableRecord, TableSortOrder } from '../models/table.models';
+
+export function getStatusColor(status: TableRecord['status']): string {
+  const colors: Record<TableRecord['status'], string> = {
+    Active: 'green',
+    Inactive: 'default',
+    Pending: 'orange',
+    Approved: 'blue',
+    Rejected: 'red'
+  };
+  return colors[status];
+}
+
+export function sortRecords<T extends Record<string, unknown>>(records: T[], field: string | null, order: TableSortOrder): T[] {
+  if (!field || !order) return [...records];
+  return [...records].sort((left, right) => {
+    const a = left[field];
+    const b = right[field];
+    const result = String(a ?? '').localeCompare(String(b ?? ''), undefined, { numeric: true, sensitivity: 'base' });
+    return order === 'ascend' ? result : -result;
+  });
+}
+
+const sortFnCache = new Map<string, any>();
+
+export function createColumnSortFn<T extends object>(key: keyof T): (left: T, right: T) => number {
+  const cacheKey = String(key);
+  if (!sortFnCache.has(cacheKey)) {
+    sortFnCache.set(cacheKey, (left: T, right: T) => String(left[key] ?? '').localeCompare(String(right[key] ?? ''), undefined, {
+      numeric: true,
+      sensitivity: 'base'
+    }));
+  }
+  return sortFnCache.get(cacheKey);
+}
+
+export function globalRecordSearch(record: TableRecord, searchText: string): boolean {
+  if (!searchText) return true;
+  const haystack = [record.name, record.code, record.category, record.type, record.referenceNumber, record.assignedTo, record.status]
+    .join(' ')
+    .toLowerCase();
+  return haystack.includes(searchText.trim().toLowerCase());
+}
+
+export function formatDateValue(value: unknown): string {
+  const date = new Date(String(value ?? ''));
+  if (Number.isNaN(date.getTime())) return '';
+  return new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(date);
+}

package/src/app/templates/master-page/master-map-drawer.component.css

@@ -0,0 +1,118 @@
+:host {
+  display: block;
+}
+
+/* Toolbar */
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  background: transparent;
+  padding: 0;
+}
+
+.table-toolbar__right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+/* Compact Buttons (Filter, Excel, Actions) */
+.compact-btn {
+  height: 32px !important;
+  min-width: 32px !important;
+  border-radius: 6px !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 12px !important;
+  font-size: 12px !important;
+}
+
+.compact-btn.icon-only {
+  padding: 0 !important;
+}
+
+/* Search Field */
+.search-field {
+  width: 260px;
+  margin-bottom: 0;
+}
+
+.new-role-field {
+  width: 190px;
+  height: 32px;
+}
+
+.text-danger {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #cf1322;
+  cursor: pointer;
+}
+
+.drawer-wrapper ::ng-deep .search-field .ant-input {
+  height: 32px !important;
+  border-radius: 8px 0 0 8px !important;
+  font-size: 12px;
+}
+
+.drawer-wrapper ::ng-deep .search-field .ant-input-group-addon .ant-btn {
+  height: 32px !important;
+  width: 40px !important;
+  border-radius: 0 8px 8px 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Table Overrides */
+.drawer-wrapper ::ng-deep .ant-table {
+  background: #ffffff !important;
+  font-family: Poppins, Arial, sans-serif;
+}
+
+.drawer-wrapper ::ng-deep .ant-table-bordered .ant-table-container {
+  border: 0 !important;
+  border-left: 1px solid #e5e7eb !important;
+}
+
+.drawer-wrapper ::ng-deep .ant-table-thead>tr>th {
+  background: #fafafa !important;
+  color: #262626 !important;
+  font-family: Poppins, Arial, sans-serif;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  white-space: nowrap;
+  padding: 8px 12px !important;
+  border-bottom: 1px solid #e5e7eb !important;
+  vertical-align: middle !important;
+  text-align: center !important;
+}
+
+.drawer-wrapper ::ng-deep .ant-table-tbody>tr>td {
+  color: #333 !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  padding: 6px 12px !important;
+  vertical-align: middle !important;
+  border-bottom: 1px solid #e5e7eb !important;
+}
+
+.drawer-wrapper ::ng-deep .ant-pagination {
+  margin-top: 12px !important;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Form Overrides */
+.status-switch {
+  min-width: 70px;
+}

package/src/app/templates/master-page/master-map-drawer.component.html

@@ -0,0 +1,49 @@
+<nz-drawer
+  class="drawer-wrapper"
+  [nzVisible]="visible"
+  [nzTitle]="title"
+  [nzWidth]="800"
+  (nzOnClose)="onClose()"
+>
+  <ng-container *nzDrawerContent>
+    <div class="table-toolbar" style="margin-bottom: 16px; padding: 0;">
+      <div class="table-toolbar__right" style="width: 100%; margin: 0;">
+        <div class="search-field">
+          <nz-input-group nzSearch [nzAddOnAfter]="mapSearchBtn">
+            <input type="text" nz-input placeholder="Search roles" [(ngModel)]="searchText" (keydown.enter)="applySearch()" />
+          </nz-input-group>
+          <ng-template #mapSearchBtn>
+            <button nz-button class="compact-btn icon-only" nzType="primary" type="button" (click)="applySearch()" aria-label="Search roles"><span nz-icon nzType="search"></span></button>
+          </ng-template>
+        </div>
+        <input class="new-role-field" type="text" nz-input placeholder="New role name" [(ngModel)]="newRoleName" (keydown.enter)="addRole()" />
+        <button nz-button nzType="primary" class="compact-btn" type="button" [disabled]="!newRoleName.trim()" (click)="addRole()">
+          <span nz-icon nzType="plus"></span> Add New Role
+        </button>
+      </div>
+    </div>
+    
+    <nz-table #mapTable nzBordered nzSize="small" [nzData]="filteredRoles" [nzShowPagination]="true" [nzPageSize]="10">
+      <thead>
+        <tr>
+          <th nzWidth="100px" nzAlign="center">Action</th>
+          <th nzAlign="center">Role Name</th>
+          <th nzWidth="120px" nzAlign="center">Is Active</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for(role of mapTable.data; track role.id) {
+          <tr>
+            <td nzAlign="center">
+              <button class="text-danger" type="button" nz-popconfirm nzPopconfirmTitle="Delete this role?" (nzOnConfirm)="deleteRole(role.id)">Delete</button>
+            </td>
+            <td nzAlign="center">{{ role.name }}</td>
+            <td nzAlign="center">
+              <nz-switch [(ngModel)]="role.active" (ngModelChange)="persistRoles()" nzCheckedChildren="Active" nzUnCheckedChildren="Inactive" class="status-switch"></nz-switch>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </nz-table>
+  </ng-container>
+</nz-drawer>

package/src/app/templates/master-page/master-map-drawer.component.ts

@@ -0,0 +1,94 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { PlusOutline, SearchOutline } from '@ant-design/icons-angular/icons';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzIconModule, provideNzIconsPatch } from 'ng-zorro-antd/icon';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { TableRecord } from '@core/models/table.models';
+
+interface MappedRole {
+  id: number;
+  name: string;
+  active: boolean;
+}
+
+@Component({
+  selector: 'app-master-map-drawer',
+  standalone: true,
+  imports: [
+    FormsModule, NzButtonModule, NzDrawerModule, NzIconModule,
+    NzInputModule, NzPopconfirmModule, NzSwitchModule, NzTableModule
+  ],
+  providers: [...provideNzIconsPatch([PlusOutline, SearchOutline])],
+  templateUrl: './master-map-drawer.component.html',
+  styleUrl: './master-map-drawer.component.css'
+})
+export class MasterMapDrawerComponent {
+  @Input() visible = false;
+  
+  @Input() 
+  set record(value: TableRecord | null) {
+    if (value) {
+      this.title = `${value.name} Role Map`;
+      this.selectedRecordId = value.id;
+      const savedRoles = this.roleMappings.get(value.id) ?? this.createDefaultRoles();
+      this.mapRoles = savedRoles.map(role => ({ ...role }));
+      this.searchText = '';
+      this.appliedSearchText = '';
+    }
+  }
+
+  @Output() close = new EventEmitter<void>();
+
+  protected title = '';
+  protected searchText = '';
+  protected newRoleName = '';
+  protected mapRoles: MappedRole[] = [];
+  private appliedSearchText = '';
+  private selectedRecordId: number | null = null;
+  private readonly roleMappings = new Map<number, MappedRole[]>();
+
+  protected get filteredRoles(): MappedRole[] {
+    const search = this.appliedSearchText.toLowerCase();
+    return search ? this.mapRoles.filter(role => role.name.toLowerCase().includes(search)) : this.mapRoles;
+  }
+
+  protected applySearch(): void {
+    this.appliedSearchText = this.searchText.trim();
+  }
+
+  protected addRole(): void {
+    const name = this.newRoleName.trim();
+    if (!name) return;
+    const nextId = Math.max(0, ...this.mapRoles.map(role => role.id)) + 1;
+    this.mapRoles = [...this.mapRoles, { id: nextId, name, active: true }];
+    this.newRoleName = '';
+    this.persistRoles();
+  }
+
+  protected deleteRole(roleId: number): void {
+    this.mapRoles = this.mapRoles.filter(role => role.id !== roleId);
+    this.persistRoles();
+  }
+
+  protected persistRoles(): void {
+    if (this.selectedRecordId !== null) {
+      this.roleMappings.set(this.selectedRecordId, this.mapRoles.map(role => ({ ...role })));
+    }
+  }
+
+  protected onClose(): void {
+    this.close.emit();
+  }
+
+  private createDefaultRoles(): MappedRole[] {
+    return [
+      { id: 1, name: 'Asset Manager', active: true },
+      { id: 2, name: 'Employee', active: false }
+    ];
+  }
+}