UI/UX Specification: Mandatory Row Numbers (STT) and Pagination for All CMS Tables

Last Updated: 16/07/2026
Type: UI/UX Standardization Spec — Table Controls
Scope: All Swizzled CMS Data Tables (excluding CMS Articles/Events which already implement this)
Severity: 🟠 Medium — Critical for usability, listing clarity, and backend query optimization when datasets grow

Feedback Reference:

• Reference UI: The Article list page already implements the correct STT index column and footer pagination

---

1. The Issue & Standard Requirement

Currently, only a few tables under the CMS group (Articles, Events, Banners) display row indices (STT) and footer pagination controls.

Most other system management tables under other sections lack these controls:

• Booking Group: Booking List (Danh sách booking), Spa Services (Dịch vụ spa)
• Minigame Group: Spin History (Lịch sử quay)
• Voucher Group: Vouchers list, Voucher Redemptions
• Membership Group: Membership tiers list, Point transfers

Standard Requirement:

Every data table in the Admin CMS must implement:

1. An Index Column (STT) as the very first column.
2. A Pagination Footer supporting page index controls and total item count labels.

---

2. Table Layout Standard Specification

┌────────────────────────────────────────────────────────────────────────┐
│  [🔍 Search...]                                         [+ Add Item]   │
├──────┬──────────────────────────┬──────────────┬──────────────┬────────┤
│  STT │  Main Identifier         │  Attribute 1 │  Attribute 2 │ Actions│
├──────┼──────────────────────────┼──────────────┼──────────────┼────────┤
│  1   │  Item Name A             │  Value 1     │  Value 2     │ ✏️  🗑   │
│  2   │  Item Name B             │  Value 1     │  Value 2     │ ✏️  🗑   │
├──────┴──────────────────────────┴──────────────┴──────────────┴────────┤
│  Hiển thị 1–10 / 48 kết quả                           [Trước] [1] [2] [Sau] │ ← Standard Footer
└────────────────────────────────────────────────────────────────────────┘

---

3. Implementation Details

3.1 First Column: STT (Row Index) Calculation

The row index should account for the current page number to prevent index resets when changing pages:

// Index calculator formula
const getRowIndex = (indexInCurrentPage: number, currentPage: number, pageSize: number): number => {
  return (currentPage - 1) * pageSize + indexInCurrentPage + 1;
};

3.2 Pagination Footer Specs

The footer component must be rendered right below the table boundary and contain:

• Left Label: "Hiển thị [Start]–[End] / [Total] kết quả"
  • Start = (currentPage - 1) * pageSize + 1
  • End = Math.min(currentPage * pageSize, totalItems)
• Right Page Buttons:
  • [Trước] (Previous) button: disabled if currentPage === 1.
  • Numbered page pills: e.g., [1], [2], [3] (active page highlighted in brand color).
  • [Sau] (Next) button: disabled if currentPage === totalPages.

---

4. API Pagination Requirements (Backend Integration)

All backend fetch endpoints for lists must support offset-based pagination query parameters:

// GET /api/cms/services?page=2&pageSize=10
interface PaginatedResponse<T> {
  items: T[];
  totalCount: number;
  totalPages: number;
  currentPage: number;
  pageSize: number;
}

---

5. Affected Screens Audit List

Ensure the following screens are updated to comply with this layout standard:

Section / Menu	View File / Component	Required Actions
Booking > Booking List	BookingListTable.tsx	Add STT column & Pagination footer
Booking > Spa Services	SpaServicesListTable.tsx	Add STT column & Pagination footer
Minigame > Spin History	SpinHistoryTable.tsx	Add STT column & Pagination footer
Voucher > Vouchers	VouchersTable.tsx	Add STT column & Pagination footer
Voucher > Redemptions	VoucherRedemptionsTable.tsx	Add STT column & Pagination footer
Membership > Tiers	MembershipTiersTable.tsx	Add STT column (Pagination optional if total tiers <= 10)
Point transfers	PointTransfersTable.tsx	Add STT column & Pagination footer

---

Technical Checklist

• Build a reusable <TablePaginationFooter /> component in the CMS theme library.
• Update the global list container layout template to always append the pagination footer.
• Go through the affected screens audit list one-by-one.
• Add the STT header block and render index calculations in the first cell of the rows.
• Connect the onChangePage callback from the footer to trigger API calls with updated page offsets.
• Verify sorting: ensure changing sort fields does not reset page indexes incorrectly.
• Run build validation to ensure consistent layout compile targets.