spiderly 0.0.8 → 19.0.1

package/src/lib/components/layout/topbar/topbar.component.html

@@ -0,0 +1,64 @@
+<div class="layout-topbar">
+  <a class="layout-topbar-logo" routerLink="/">
+    <span>{{companyName?.toLocaleUpperCase()}}</span>
+  </a>
+
+  <button
+    #menubutton
+    class="p-link layout-menu-button layout-topbar-button"
+    (click)="layoutService.onMenuToggle()"
+  >
+    <i class="pi pi-bars"></i>
+  </button>
+
+  <div
+    #topbarmenu
+    class="profile-button"
+    >
+    <div
+      #topbarprofiledropdownmenubutton
+      (click)="layoutService.showProfileDropdownSidebar()"
+    >
+    <p-avatar
+        *ngIf="showProfileIcon"
+        [label]="avatarLabel"
+        [style]="{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }"
+        pBadge 
+        [badgeStyleClass]="'p-badge-danger'"
+        [badgeDisabled]="unreadNotificationsCount == 0 || unreadNotificationsCount == null"
+        [value]="unreadNotificationsCount"
+        />
+    </div>
+    <div
+      #topbarprofiledropdownmenu
+      (document:click)="onDocumentClick($event)"
+    >
+    <div *ngIf="layoutService.state.profileDropdownSidebarVisible" style="width: 280px; position: absolute; right: 26px; top: 60px; padding: 15px;" class="card">
+      <div style="display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;">
+        <p-avatar
+          [label]="avatarLabel"
+          size="xlarge"
+          [style]="{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'margin': 'auto' }"
+          (click)="routeToUserPage()"
+          />
+        <div>{{currentUser?.email}}</div>
+      </div>
+      <div style="margin-top: 15px;">
+        <div *ngFor="let item of menuItems" [style]="item.showSeparator ? 'margin-top: 5px;' : ''">
+          <div *ngIf="item.showSeparator" class="gray-separator"></div>
+          <div (click)="item.onClick()" class="hover-card" style="display: flex; align-items: center; gap: 5px; margin-top: 5px;">
+            <i 
+              class="pi pi-fw {{item.icon}} primary-color" 
+              style="font-size: 16px; position: relative;"
+              >
+              <span *ngIf="item.showNotificationBadge && unreadNotificationsCount != 0" class="badge"></span>
+            </i>
+            <div> {{item.label}} </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+  </div>
+</div>
+  

package/src/lib/components/layout/topbar/topbar.component.ts

@@ -0,0 +1,137 @@
+import { TranslocoService } from '@jsverse/transloco';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { filter, Subscription } from 'rxjs';
+import { AuthBaseService } from '../../../services/auth-base.service';
+import { LayoutBaseService } from '../../../services/app-layout-base.service';
+import { ApiSecurityService } from '../../../services/api.service.security';
+import { ConfigBaseService } from '../../../services/config-base.service';
+import { User } from '../../../entities/security-entities';
+import { CommonModule } from '@angular/common';
+import { PrimengModule } from '../../../modules/primeng.module';
+
+interface SpiderlyMenuItem {
+  label?: string;
+  icon?: string;
+  showSeparator?: boolean;
+  onClick?: () => void;
+  showNotificationBadge?: boolean;
+}
+
+@Component({
+    selector: 'topbar',
+    templateUrl: './topbar.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        PrimengModule,
+        RouterModule
+    ]
+})
+export class AppTopBarComponent implements OnDestroy {
+  private initTopBarSubscription: Subscription | null = null;
+
+  currentUser: User;
+  userProfilePath: string;
+  unreadNotificationsCount: number;
+  menuItems: SpiderlyMenuItem[] = [];
+  avatarLabel: string;
+  companyName: string;
+  showProfileIcon: boolean = false;
+
+  notificationMenuItem: SpiderlyMenuItem =       
+  {
+    label: this.translocoService.translate('Notifications'),
+    icon: 'pi-bell',
+    showNotificationBadge: true,
+    onClick: () => {
+      this.router.navigateByUrl(`/notifications`);
+    },
+  };
+
+  @ViewChild('menubutton') menuButton!: ElementRef;
+
+  @ViewChild('topbarmenu') menu!: ElementRef;
+
+  @ViewChild('topbarprofiledropdownmenubutton') topbarProfileDropdownMenuButton!: ElementRef;
+
+  constructor(
+    public layoutService: LayoutBaseService, 
+    private authService: AuthBaseService, 
+    private apiService: ApiSecurityService,
+    protected router: Router,
+    private translocoService: TranslocoService,
+    private config: ConfigBaseService
+  ) { 
+  }
+
+  async ngOnInit(){
+    this.menuItems = [
+      {
+        label: this.translocoService.translate('YourProfile'),
+        icon: 'pi-user',
+        showSeparator: true,
+        onClick: () => {
+          this.routeToUserPage();
+        }
+      },
+      this.notificationMenuItem,
+      // {
+      //   label: this.translocoService.translate('Settings'),
+      //   icon: 'pi-cog',
+      //   onClick: () => {
+      //     this.router.navigateByUrl(`/administration/users`);
+      //   }
+      // },
+      {
+        label: this.translocoService.translate('Logout'),
+        icon: 'pi-sign-out',
+        showSeparator: true,
+        onClick: () => {
+          this.authService.logout();
+        }
+      }
+    ];
+
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe((event: NavigationEnd) => {
+        this.layoutService.state.profileDropdownSidebarVisible = false;
+      });
+
+    this.onAfterNgOnInit();
+  }
+
+  onAfterNgOnInit = () => {
+    this.initTopBarSubscription = this.layoutService.initTopBarData().subscribe(initTopBarData => {
+      this.userProfilePath = initTopBarData.userProfilePath;
+      this.companyName = initTopBarData.companyName;
+      this.unreadNotificationsCount = initTopBarData.unreadNotificationsCount;
+      this.notificationMenuItem.showNotificationBadge = initTopBarData.unreadNotificationsCount > 0;
+      this.showProfileIcon = initTopBarData.showProfileIcon;
+      this.currentUser = initTopBarData.currentUser;
+      this.avatarLabel = initTopBarData.currentUser?.email.charAt(0).toLocaleUpperCase();
+    });
+  }
+
+  onDocumentClick(event: any) {
+    if (
+      !this.menu.nativeElement.contains(event.target) 
+    ) {
+      if (this.layoutService.state.profileDropdownSidebarVisible == true) {
+        this.layoutService.state.profileDropdownSidebarVisible = false;
+      }
+    }
+  }
+
+  routeToUserPage(){
+    this.router.navigateByUrl(this.userProfilePath);
+  }
+
+  ngOnDestroy(): void {
+    if (this.initTopBarSubscription) {
+      this.initTopBarSubscription.unsubscribe();
+    }
+  }
+
+}

package/src/lib/components/not-found/not-found.component.html

@@ -0,0 +1,27 @@
+<div class="flex min-h-screen overflow-hidden" style="padding: 20px;">
+    <div class="flex flex-column w-full">
+        <div class="w-full sm:w-30rem" style="margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
+            <div class="surface-card py-6 px-5 sm:px-6" style="border-radius:45px;">
+                <div class="text-center">
+                    <img 
+                    src="assets/images/logo/logo.svg" 
+                    alt="{{companyName}} Logo" 
+                    title="{{companyName}} Logo" 
+                    height="60"
+                    class="mb-2 w-6rem flex-shrink-0"
+                    >
+                </div>
+                <h1 class="mb-4">
+                    <div class="font-bold text-5xl lg:text-6xl gradient-title">404</div>
+                    <div class="font-bold text-5xl lg:text-6xl">Page Not Found</div>
+                </h1>
+                <div class="text-600 text-lg mb-5">
+                    The page you're looking for doesn't exist or has been moved. Let's get you back on track.
+                </div>
+                <div>
+                    <p-button [routerLink]="['/']" label="Go to Homepage"></p-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/not-found/not-found.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { ConfigBaseService } from '../../services/config-base.service';
+import { RouterModule } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+    selector: 'not-found',
+    templateUrl: './not-found.component.html',
+    imports: [
+        RouterModule,
+        ButtonModule,
+    ]
+})
+export class NotFoundComponent { 
+    companyName = this.config.companyName;
+
+    constructor(
+        private config: ConfigBaseService
+    ) { 
+
+    }
+}

package/src/lib/components/required/required.component.html

@@ -0,0 +1 @@
+<span style="color: red; margin-left: 4px;">*</span>

package/src/lib/components/required/required.component.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: 'required',
+  templateUrl: './required.component.html',
+  styles: [],
+  standalone: true,
+})
+export class RequiredComponent {
+
+  constructor() {}
+
+}

package/src/lib/components/spiderly-buttons/google-button/google-button.component.html

@@ -0,0 +1,5 @@
+<ng-container *transloco="let t">
+    <spiderly-button (onClick)="handleGoogleLogin()" [label]="t('ContinueWithGoogle')" [outlined]="true" [style]="{width: '100%'}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="0.98em" height="1em" viewBox="0 0 256 262"><path fill="#4285f4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"/><path fill="#34a853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"/><path fill="#fbbc05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"/><path fill="#eb4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"/></svg>
+    </spiderly-button>
+</ng-container>

package/src/lib/components/spiderly-buttons/google-button/google-button.component.ts

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+import { TranslocoDirective } from "@jsverse/transloco";
+import { ButtonModule } from "primeng/button";
+import { SpiderlyButtonComponent } from "../spiderly-button/spiderly-button.component";
+
+@Component({
+    selector: 'google-button',
+    templateUrl: './google-button.component.html',
+    styles: [],
+    imports: [
+        ButtonModule,
+        TranslocoDirective,
+        SpiderlyButtonComponent
+    ]
+})
+export class GoogleButtonComponent { // Custom styling of the google button - https://medium.com/simform-engineering/implement-custom-google-sign-in-using-angular-16-9c93aeff6252
+  // @Output() onClick: EventEmitter<any> = new EventEmitter();
+  @Output() loginWithGoogle: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor() {}
+
+  createFakeGoogleWrapper = () => {
+    const googleLoginWrapper = document.createElement('div');
+    googleLoginWrapper.style.display = 'none';
+    googleLoginWrapper.classList.add('custom-google-button');
+    document.body.appendChild(googleLoginWrapper);
+    window.google.accounts.id.renderButton(googleLoginWrapper, {
+      type: 'icon',
+      width: '200',
+    });
+  
+    const googleLoginWrapperButton = googleLoginWrapper.querySelector(
+      'div[role=button]'
+    ) as HTMLElement;
+  
+    return {
+      click: () => {
+        googleLoginWrapperButton?.click();
+      },
+    };
+  };
+
+  handleGoogleLogin() {
+    this.loginWithGoogle.emit(this.createFakeGoogleWrapper());
+  }
+
+}
+
+declare global {
+  interface Window {
+    google: any;
+  }
+}

package/src/lib/components/spiderly-buttons/return-button/return-button.component.html

@@ -0,0 +1,3 @@
+<ng-container *transloco="let t">
+    <spiderly-button (onClick)="onReturn()" [label]="t('Return')" icon="pi pi-undo" [outlined]="true"></spiderly-button>
+</ng-container>

package/src/lib/components/spiderly-buttons/return-button/return-button.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from "@angular/core";
+import { Router } from '@angular/router';
+import { CommonModule } from "@angular/common";
+import { getParentUrl } from "../../../services/helper-functions";
+import { TranslocoDirective } from "@jsverse/transloco";
+import { ButtonModule } from "primeng/button";
+import { SpiderlyButtonComponent } from "../spiderly-button/spiderly-button.component";
+
+@Component({
+    selector: 'return-button',
+    templateUrl: './return-button.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        ButtonModule,
+        SpiderlyButtonComponent,
+        TranslocoDirective,
+    ]
+})
+export class SpiderlyReturnButtonComponent {
+  @Input() navigateUrl: string;
+
+  constructor(private router: Router) {}
+
+  onReturn(){
+    if(this.navigateUrl == undefined){
+        const currentUrl = this.router.url;
+        const parentUrl: string = getParentUrl(currentUrl);
+        this.router.navigateByUrl(parentUrl);
+    }
+    else{
+        this.router.navigate([this.navigateUrl]);
+    }
+  }
+}

package/src/lib/components/spiderly-buttons/spiderly-button/spiderly-button.component.html

@@ -0,0 +1,14 @@
+<p-button 
+(onClick)="handleClick($event)" 
+[label]="label" 
+[icon]="icon" 
+[outlined]="outlined" 
+[styleClass]="styleClass" 
+[severity]="severity" 
+[rounded]="rounded"
+[style]="style"
+[class]="class"
+[disabled]="disabled"
+>
+    <ng-content></ng-content>
+</p-button>

package/src/lib/components/spiderly-buttons/spiderly-button/spiderly-button.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ButtonModule } from "primeng/button";
+import { SplitButtonModule } from "primeng/splitbutton";
+import { Subject, Subscription, throttleTime } from "rxjs";
+import { Router } from "@angular/router";
+import { MenuItem } from "primeng/api";
+import { SpiderlyButtonBaseComponent } from "../spiderly-button-base/spiderly-button-base";
+
+@Component({
+    selector: 'spiderly-button',
+    templateUrl: './spiderly-button.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        ButtonModule,
+        SplitButtonModule
+    ]
+})
+export class SpiderlyButtonComponent extends SpiderlyButtonBaseComponent {
+
+  // constructor() {
+  //   super();
+    
+  // }
+
+}

package/src/lib/components/spiderly-buttons/spiderly-button-base/spiderly-button-base.ts

@@ -0,0 +1,61 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ButtonModule } from "primeng/button";
+import { SplitButtonModule } from "primeng/splitbutton";
+import { Subject, Subscription, throttleTime } from "rxjs";
+import { Router } from "@angular/router";
+import { MenuItem } from "primeng/api";
+
+@Component({
+    selector: 'spiderly-button-base',
+    template: ``,
+    styles: [],
+    imports: [
+        CommonModule,
+        ButtonModule,
+        SplitButtonModule
+    ]
+})
+export class SpiderlyButtonBaseComponent {
+  @Input() icon: string;
+  @Input() label: string;
+  @Input() outlined: boolean = false;
+  @Input() rounded: boolean = false;
+  @Input() styleClass: string;
+  @Input() routerLink: string;
+  @Input() style: { [klass: string]: any; };
+  @Input() class: string;
+  @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;
+  @Input() disabled: boolean = false;
+
+  @Output() onClick = new EventEmitter<Event>();
+  private clickSubject = new Subject<Event>(); // Internal subject to handle click events.
+  private subscription: Subscription;
+
+  constructor(
+    private router: Router
+  ) {
+      
+  }
+
+  ngOnInit(){
+    this.subscription = this.clickSubject
+        .pipe(throttleTime(500))
+        .subscribe((event: Event) => this.onClick.emit(event));
+  }
+
+  handleClick = (event: Event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.routerLink !== undefined) {
+      this.router.navigate([this.routerLink]);
+    }
+    else{
+      this.clickSubject.next(event);
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+}

package/src/lib/components/spiderly-buttons/spiderly-split-button/spiderly-split-button.component.html

@@ -0,0 +1,15 @@
+<p-splitButton
+(onClick)="handleClick($event)" 
+[label]="label" 
+[icon]="icon" 
+[outlined]="outlined" 
+[styleClass]="styleClass" 
+[severity]="severity" 
+[rounded]="rounded"
+[style]="style"
+[class]="class"
+[disabled]="disabled"
+[model]="dropdownItems"
+>
+    <ng-content></ng-content>
+</p-splitButton>

package/src/lib/components/spiderly-buttons/spiderly-split-button/spiderly-split-button.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ButtonModule } from "primeng/button";
+import { SplitButtonModule } from "primeng/splitbutton";
+
+import { MenuItem } from "primeng/api";
+import { SpiderlyButtonBaseComponent } from "../spiderly-button-base/spiderly-button-base";
+
+@Component({
+    selector: 'spiderly-split-button',
+    templateUrl: './spiderly-split-button.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        ButtonModule,
+        SplitButtonModule
+    ]
+})
+export class SpiderlySplitButtonComponent extends SpiderlyButtonBaseComponent {
+  @Input() dropdownItems: MenuItem[];
+
+
+
+}

package/src/lib/components/spiderly-data-table/spiderly-data-table.component.html

@@ -0,0 +1,93 @@
+<ng-container *transloco="let t">
+  <div [class]="showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''">
+    <p-table #dt [value]="items" [rows]="rows" [rowHover]="true" [paginator]="showPaginator" responsiveLayout="scroll" [lazy]="hasLazyLoad"
+    (onLazyLoad)="lazyLoad($event)" [totalRecords]="totalRecords" class="spiderly-table" [loading]="(items === undefined || loading === true)" [selectionMode]="selectionMode" dataKey="id" 
+    (onFilter)="filter($event)"> 
+      <ng-template pTemplate="caption">
+        <div class="table-header overflow-auto">
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <i class="{{tableIcon}} text-2xl primary-color"></i>
+            <h5 style="margin: 0px;">{{tableTitle}}</h5>
+          </div>
+          <div style="display: flex; gap: 8px;">
+            <button pButton [label]="t('ClearFilters')" class="p-button-outlined remove-button-border-focus" style="flex: none;" icon="pi pi-filter-slash" (click)="clear(dt)"></button>
+            <button pButton *ngIf="showExportToExcelButton" [label]="t('ExportToExcel')" class="p-button-outlined remove-button-border-focus" style="flex: none;" icon="pi pi-download" (click)="exportListToExcel()"></button>
+            <button pButton *ngIf="showReloadTableButton" [label]="t('Reload')" class="p-button-outlined remove-button-border-focus" style="flex: none;" icon="pi pi-refresh" (click)="reload()"></button>
+          </div>
+        </div>
+      </ng-template>
+      <ng-template pTemplate="header">
+        <tr>
+          <th style="width: 0rem;" *ngIf="selectionMode == 'multiple'">
+            <div style="display: flex; gap: 8px;">
+              <p-checkbox [disabled]="readonly" (onChange)="selectAll($event.checked)" [(ngModel)]="fakeIsAllSelected" [binary]="true"></p-checkbox> ({{rowsSelectedNumber}})
+            </div>
+          </th>
+          <ng-container *ngFor="let col of cols; trackBy: colTrackByFn">
+            <th [style]="getColHeaderWidth(col.filterType)">
+              <div style="display: flex; justify-content: space-between; align-items: center;">
+                {{col.name}}
+                <!-- <p-sortIcon field=""></p-sortIcon> -->
+                <!-- <p-columnFilter type="date" field="date" display="menu"></p-columnFilter> -->
+                <p-columnFilter *ngIf="col.filterType != null" [type]="col.filterType" [field]="col.filterField ?? col.field" display="menu" [placeholder]="col.filterPlaceholder" 
+                [showOperator]="false" [showMatchModes]="col.showMatchModes" [showAddButton]="col.showAddButton" [matchModeOptions]="getColMatchModeOptions(col.filterType)"
+                [matchMode]="getColMatchMode(col.filterType)"
+                >
+                <ng-container *ngIf="isDropOrMulti(col.filterType)">
+                  <ng-template pTemplate="filter" let-value let-filter="filterCallback">
+                    <p-multiSelect [ngModel]="value" [options]="col.dropdownOrMultiselectValues" [placeholder]="t('All')" (onChange)="filter($event.value)" optionLabel="label" optionValue="code" [style]="{'width':'240px'}">
+                      <ng-template let-item pTemplate="item">
+                        <div class="p-multiselect-representative-option">
+                          <span class="ml-2">{{ item.label }}</span>
+                        </div>
+                      </ng-template>
+                    </p-multiSelect>
+                  </ng-template>
+                </ng-container>
+              </p-columnFilter>
+              </div>
+            </th>
+          </ng-container>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-rowData let-index="rowIndex" let-editing="editing">
+        <tr>
+          <td *ngIf="selectionMode == 'multiple'">
+              <p-checkbox [disabled]="readonly" (onChange)="selectRow(rowData.id, rowData.index)" [ngModel]="isRowSelected(rowData.id)" [binary]="true"></p-checkbox>
+          </td>
+          <ng-container *ngFor="let col of cols; trackBy: colTrackByFn">
+            <td [pTooltip]="getRowData(rowData, col)" [style]="getStyleForBodyColumn(col)" *ngIf="!col.editable">
+              <div style="display: flex; align-items: center; justify-content: center; gap: 18px;">
+                <ng-container *ngFor="let action of col.actions; trackBy: actionTrackByFn" >
+                  <span [pTooltip]="action.name" [class]="getClassForAction(action)" (click)="getMethodForAction(action, rowData)"></span>
+                </ng-container>
+              </div>
+              {{getRowData(rowData, col)}}
+            </td>
+            <td *ngIf="col.editable">
+              <spiderly-number [control]="getFormArrayControlByIndex(col.field, rowData.index)" [showLabel]="false"></spiderly-number>
+            </td>
+          </ng-container>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="emptymessage">
+        <tr>
+          <td [attr.colspan]="cols?.length + (selectionMode === 'multiple' ? 1 : 0)">{{t('NoRecordsFound')}}</td>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="loadingbody">
+        <tr>
+          <td [attr.colspan]="cols?.length + (selectionMode === 'multiple' ? 1 : 0)">{{t('Loading')}}...</td>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="paginatorleft">
+        {{t('TotalRecords')}}: {{totalRecords}}
+      </ng-template>
+      <ng-template pTemplate="paginatorright">
+        <div style="display: flex; justify-content: end; gap: 10px;">
+          <spiderly-button *ngIf="showAddButton" [label]="t('AddNew')" icon="pi pi-plus" (onClick)="navigateToDetails(0)"></spiderly-button>
+        </div>
+      </ng-template>
+    </p-table>
+  </div>
+</ng-container>

package/{styles → src/lib}/components/spiderly-data-table/spiderly-data-table.component.scss

@@ -31,4 +31,19 @@
 			right: 0;
 		}
 	}
+}
+
+:host {
+	::ng-deep {
+		.p-datatable-thead{
+			position: unset !important;
+		}
+		.p-datatable-header{
+			border-radius: 6px 6px 0 0;
+		}
+		.p-datatable {
+			border-radius: var(--p-content-border-radius);
+			border: 1px solid var(--p-datatable-border-color);
+		}
+	}
 }