table

import { UniverseDataTable } from 'universe-code/uiux';

import {
  Component,
  ElementRef,
  Input,
  OnChanges,
  Output,
  EventEmitter,
  SimpleChanges,
} from '@angular/core';
import { UniverseDataTable } from 'universe-code/uiux';

@Component({
  selector: 'app-universe-table',
  template: `<div #tableContainer></div>`,
  standalone: true,
})
export class UniverseTableComponent implements OnChanges {
  @Input() columns: any[] = [];
  @Input() apiData: any[] = [];
  @Input() pagination: any = {};
  @Input() jumpToPage = '';
  @Input() shouldEnableJumpToPage = false;
  @Input() shouldShowPagination = true;

  @Output() pageChange = new EventEmitter<number>();
  @Output() jumpToPageEvent = new EventEmitter<string>();

  private tableInstance: any = null;

  constructor(private el: ElementRef) {}

  ngOnChanges(changes: SimpleChanges) {
    this.renderTable();
  }

  renderTable() {
    const container = this.el.nativeElement.querySelector('div');
    if (!container) return;

    this.tableInstance = new UniverseDataTable({
      container,
      apiData: this.apiData,
      columns: this.columns,
      pagination: this.pagination,
      jumpToPage: this.jumpToPage,
      shouldEnableJumpToPage: this.shouldEnableJumpToPage,
      shouldShowPagination: this.shouldShowPagination,
      handlePageChange: (page: number) => this.pageChange.emit(page),
      handleJumpToPage: (page: string) => this.jumpToPageEvent.emit(page),
      handleKeyPress: (e: KeyboardEvent) => {
        const target = e.target as HTMLInputElement;
        if (e.key === 'Enter') {
          this.jumpToPageEvent.emit(target.value);
        }
      },
    });
  }
}

import { Component, OnInit } from '@angular/core';
import { UniverseTableComponent } from './universe-table/universe-table.component';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  standalone: true,
  imports: [UniverseTableComponent],
})
export class UsersComponent implements OnInit {
  tableColumns = [
    {
      key: 'id',
      label: 'ID',
      format: (value: any) => (value ? `#${value}` : '-'),
    },
    {
      key: 'name',
      label: 'Name',
      format: (value: any) => (value ? value.toUpperCase() : '-'),
    },
    {
      key: 'email',
      label: 'Email',
    },
    {
      key: 'status',
      label: 'Status',
      format: (value: any) => (value === 'active' ? '✓ Active' : '✗ Inactive'),
    },
  ];

  userList: any[] = [];
  currentPage = 1;
  totalPages = 5;
  startIndex = 1;
  endIndex = 10;
  totalRecords = 50;
  jumptoPage = '';

  ngOnInit() {
    this.loadUsers(1);
  }

  loadUsers(page: number) {
    this.currentPage = page;
    const startIdx = (page - 1) * 10;
    const endIdx = Math.min(startIdx + 10, this.totalRecords);
    this.startIndex = startIdx + 1;
    this.endIndex = endIdx;

    // Fetch data from API
    this.userList = this.generateDummyData(10);
  }

  JumpPage(page: string) {
    const pageNum = parseInt(page || this.jumptoPage, 10);
    if (pageNum > 0 && pageNum <= this.totalPages) {
      this.currentPage = pageNum;
      this.loadUsers(pageNum);
      this.jumptoPage = '';
    }
  }

  generateDummyData(count: number) {
    return Array.from({ length: count }, (_, i) => ({
      id: (this.currentPage - 1) * 10 + i + 1,
      name: `User ${(this.currentPage - 1) * 10 + i + 1}`,
      email: `user${(this.currentPage - 1) * 10 + i + 1}@example.com`,
      status: i % 2 === 0 ? 'active' : 'inactive',
    }));
  }
}

<app-universe-table
  [columns]="tableColumns"
  [apiData]="userList"
  [pagination]="{
    currentPage: currentPage,
    totalPages: totalPages,
    startEntry: startIndex,
    endEntry: endIndex,
    totalRecords: totalRecords
  }"
  [jumpToPage]="jumptoPage"
  [shouldEnableJumpToPage]="true"
  [shouldShowPagination]="true"
  (pageChange)="loadUsers($event)"
  (jumpToPageEvent)="JumpPage($event)"
></app-universe-table>

{
  currentPage: number;      // Current active page
  totalPages: number;       // Total number of pages
  startEntry: number;       // Starting entry number
  endEntry: number;         // Ending entry number
  totalRecords: number;     // Total records count
}

{
  key: string;                     // Data key from API
  label: string;                   // Column header
  format?: (value: any) => string; // Optional formatter
}

/* Header */
--tableHeaderBg: #f3f4f6;
--tableHeaderBorder: 1px solid #d1d5db;

/* Go Button */
--goButtonBackground: linear-gradient(180deg, #2e4b5e 0%, #243a48 82%);
--goButtonColor: #fff;
--goButtonBorderRadius: 0.125rem;

/* Pagination Buttons */
--paginationButtonBackground: #fff;
--paginationButtonColor: #4b5563;
--paginationButtonBorder: 1px solid #d1d5db;
--paginationButtonDissableBg: #e5e7eb;
--paginationButtonDissableColor: #9ca3af;

/* Pagination Numbers */
--paginationNumberBackground: linear-gradient(180deg, #2e4b5e 0%, #243a48 82%);
--paginationNumberColor: #fff;
--paginationNumberBorder: 1px solid #d1d5db;
--paginationNumberBorderRadius: 0.25rem;

/* Others */
--entriesTextFontSize: 10px;

.udt-container          /* Main table container */
.table-wrapper          /* Table overflow wrapper */
.udt-table              /* Table element */
.udt-th                 /* Table header cell */
.udt-td                 /* Table data cell */
.udt-pagination         /* Pagination container */
.page-jump              /* Jump to page section */
.jumpto                 /* Jump input field */
.go-btn                 /* Go button */
.entries-text           /* Entries counter */
.pagination-buttons     /* Buttons container */
.pg-btn                 /* Pagination button */
.pg-number              /* Page number button */
.pg-number.active       /* Active page */

:root {
  --tableHeaderBg: #2e4b5e;
  --goButtonBackground: linear-gradient(180deg, #ff6b6b 0%, #ee5a52 82%);
  --paginationNumberBackground: linear-gradient(180deg, #ff6b6b 0%, #ee5a52 82%);
}

@Output() pageChange = new EventEmitter<number>();
@Output() jumpToPageEvent = new EventEmitter<string>();