From 0cb1ae550174cd21a026a8f4690b00087262c662 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Thu, 13 Aug 2026 16:15:55 +0200
Subject: [PATCH] test: add Playwright coverage and test ids for
 CpsTableComponent

---
 .../cps-ui-kit/components/cps-table.spec.ts   | 613 +++++++++++++++++-
 playwright/fixtures/composition-components.ts |   7 +-
 .../src/app/api-data/cps-table.json           |   8 +
 .../table-page/table-page.component.html      | 102 ++-
 .../table-page/table-page.component.scss      |   4 +
 .../pages/table-page/table-page.component.ts  |  74 ++-
 .../pages/table-page/table-page.examples.ts   | 159 ++++-
 .../cps-sort-icon/cps-sort-icon.component.ts  |   1 +
 .../table-column-filter.component.html        |  18 +-
 ...le-column-visibility-toggle.component.html |   4 +
 .../table-row-menu.component.html             |   1 +
 .../cps-table/cps-table.component.html        | 105 ++-
 .../cps-table/cps-table.component.scss        |  27 +-
 .../cps-table/cps-table.component.spec.ts     |  16 +
 .../cps-table/cps-table.component.ts          |  15 +-
 .../cps-table-column-resizable.directive.ts   |   5 +
 .../cps-table-header-selectable.directive.ts  |   7 +-
 17 files changed, 1122 insertions(+), 44 deletions(-)

diff --git a/playwright/cps-ui-kit/components/cps-table.spec.ts b/playwright/cps-ui-kit/components/cps-table.spec.ts
index a15c88b4a..77ad95b23 100644
--- a/playwright/cps-ui-kit/components/cps-table.spec.ts
+++ b/playwright/cps-ui-kit/components/cps-table.spec.ts
@@ -1,18 +1,623 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Page, type Locator } from '@playwright/test';
 import * as fs from 'fs';
 import * as path from 'path';
 
+function example(page: Page, testId: string): Locator {
+  return page.getByTestId(testId);
+}
+
+test.describe('cps-table', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/table');
+    await page.addStyleTag({
+      content: '* { scroll-behavior: auto !important; }'
+    });
+  });
+
+  test.describe('Real sort on the default-rendered header (Table 2)', () => {
+    test('clicking a sortable+filterable header cycles real aria-sort through ascending/descending/none', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 2', exact: true }).click();
+      const wrapper = example(page, 'table-2-virtual-default-render');
+      const header = wrapper.getByTestId('cps-table-header-cell-a');
+      await expect(header).toBeVisible();
+
+      await expect(header).toHaveAttribute('aria-sort', 'none');
+      await header.click({ position: { x: 5, y: 5 } });
+      await expect(header).toHaveAttribute('aria-sort', 'ascending');
+      await header.click({ position: { x: 5, y: 5 } });
+      await expect(header).toHaveAttribute('aria-sort', 'descending');
+      await header.click({ position: { x: 5, y: 5 } });
+      await expect(header).toHaveAttribute('aria-sort', 'none');
+    });
+  });
+
+  test.describe('Real multi-sort badge (Table 1)', () => {
+    test('sorting a second column shows the real order-2 badge on its sort icon', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'table-1-paginated-filters');
+      const headerA = wrapper.locator('th[cpstcolsortable="a"]');
+      const headerC = wrapper.locator('th[cpstcolsortable="c"]');
+
+      await headerA.click({ position: { x: 5, y: 5 } });
+      await headerC.click({ position: { x: 5, y: 5 } });
+
+      await expect(wrapper.getByTestId('cps-table-sort-icon-c')).toHaveText(
+        '2'
+      );
+      await expect(headerA).toHaveAttribute('aria-sort', 'ascending');
+      await expect(headerC).toHaveAttribute('aria-sort', 'ascending');
+    });
+  });
+
+  test.describe('Real per-column filtering (Table 1)', () => {
+    test('a text filter real-narrows the rendered rows', async ({ page }) => {
+      const wrapper = example(page, 'table-1-paginated-filters');
+
+      await wrapper.getByTestId('cps-table-col-filter-btn-a').click();
+      const constraint = page.getByTestId(
+        'cps-table-col-filter-constraint-a-0'
+      );
+      await expect(constraint).toBeVisible();
+      await constraint.locator('input').first().fill('a13');
+      await page.getByTestId('cps-table-col-filter-apply-btn').click();
+
+      await expect(wrapper.locator('tbody tr')).toHaveCount(1);
+      await expect(wrapper.locator('tbody tr')).toHaveText(/A13/);
+    });
+  });
+
+  test.describe('Real empty state (Table 8)', () => {
+    test('shows the configured message and real emptyBodyHeight layout, with no toolbar', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 8', exact: true }).click();
+      const wrapper = example(page, 'table-8-empty');
+      const emptyMessage = wrapper.getByTestId('cps-table-empty-message');
+
+      await expect(emptyMessage).toBeVisible();
+      await expect(emptyMessage).toHaveText('No records match your criteria');
+
+      const box = await emptyMessage.boundingBox();
+      expect(box?.height).toBe(352); // 22rem
+
+      await expect(wrapper.locator('.p-datatable-header')).toHaveCount(0);
+    });
+  });
+
+  test.describe('Real loading state (Table 9)', () => {
+    test('shows aria-busy and a real visible loading spinner', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 9', exact: true }).click();
+      const wrapper = example(page, 'table-9-loading');
+
+      await expect(wrapper.getByTestId('cps-table')).toHaveAttribute(
+        'aria-busy',
+        'true'
+      );
+      await expect(
+        wrapper
+          .getByTestId('cps-table-loading')
+          .getByTestId('cps-loader-spinner')
+      ).toBeVisible();
+    });
+  });
+
+  test.describe('Real HTML rendering and sanitization (Table 10)', () => {
+    test('safe HTML renders unescaped, and an injected <script> is stripped and never executes', async ({
+      page
+    }) => {
+      const consoleLogs: string[] = [];
+      page.on('console', (msg) => consoleLogs.push(msg.text()));
+
+      await page.getByRole('tab', { name: 'Table 10', exact: true }).click();
+      const wrapper = example(page, 'table-10-html');
+
+      const safeCell = wrapper.getByTestId('cps-table-cell-0-a');
+      await expect(safeCell.locator('h1')).toHaveText('hello');
+
+      const maliciousCell = wrapper.getByTestId('cps-table-cell-1-a');
+      await expect(maliciousCell).toHaveText('this is sanitized');
+      await expect(maliciousCell.locator('script')).toHaveCount(0);
+      expect(consoleLogs).not.toContain('pwned');
+    });
+  });
+
+  test.describe('Real virtual scroll rendering (Table 2)', () => {
+    test('a virtualized ~1000-row table renders a real bounded subset of rows', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 2', exact: true }).click();
+      const wrapper = example(page, 'table-2-virtual-default-render');
+
+      await expect(wrapper.locator('.p-virtualscroller')).toBeVisible();
+      const rowCount = await wrapper.locator('tbody tr').count();
+      expect(rowCount).toBeGreaterThan(0);
+      expect(rowCount).toBeLessThan(100);
+    });
+  });
+
+  test.describe('Real checkbox selection (Table 4)', () => {
+    test('clicking a row checkbox real-selects it, reflected in the real p-datatable-row-selected class', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 4', exact: true }).click();
+      const wrapper = example(page, 'table-4-select-expand');
+
+      const row = wrapper.getByTestId('cps-table-row-a1');
+      const checkbox = wrapper
+        .getByTestId('cps-table-row-select-cell-a1')
+        .getByRole('checkbox');
+
+      await expect(checkbox).not.toBeChecked();
+      await checkbox.click();
+
+      await expect(checkbox).toBeChecked();
+      await expect(row).toHaveClass(/cps-table-row-selected/);
+    });
+
+    test('select-all checkbox real-checks/unchecks every row', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 4', exact: true }).click();
+      const wrapper = example(page, 'table-4-select-expand');
+      const selectAll = wrapper
+        .getByTestId('cps-table-header-select-all-cell')
+        .getByRole('checkbox');
+      const firstCheckbox = wrapper
+        .getByTestId('cps-table-row-select-cell-a1')
+        .getByRole('checkbox');
+
+      await selectAll.click();
+      await expect(selectAll).toBeChecked();
+      await expect(firstCheckbox).toBeChecked();
+
+      await selectAll.click();
+      await expect(selectAll).not.toBeChecked();
+      await expect(firstCheckbox).not.toBeChecked();
+    });
+
+    test("a checked row checkbox's icon stays white while hovered", async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 4', exact: true }).click();
+      const wrapper = example(page, 'table-4-select-expand');
+      const cell = wrapper.getByTestId('cps-table-row-select-cell-a1');
+      const checkbox = cell.getByRole('checkbox');
+      const input = cell.locator('.p-checkbox-input');
+      const icon = cell.locator('.p-checkbox-icon');
+
+      await checkbox.check();
+      await expect(icon).toHaveCSS('color', 'rgb(255, 255, 255)');
+
+      await input.hover();
+      await expect(icon).toHaveCSS('color', 'rgb(255, 255, 255)');
+    });
+
+    test("an unchecked checkbox's border reverts once the mouse moves away, even though a real click leaves it focused", async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 4', exact: true }).click();
+      const wrapper = example(page, 'table-4-select-expand');
+      const cell = wrapper.getByTestId('cps-table-row-select-cell-a1');
+      const checkbox = cell.getByRole('checkbox');
+      const box_ = cell.locator('.p-checkbox-box');
+
+      const baseline = await box_.evaluate(
+        (el) => getComputedStyle(el).borderColor
+      );
+
+      await checkbox.click();
+      await expect(checkbox).toBeChecked();
+      await checkbox.click();
+      await expect(checkbox).not.toBeChecked();
+
+      await page.mouse.move(0, 0);
+      await expect(box_).toHaveCSS('border-color', baseline);
+    });
+  });
+
+  test.describe('Real header-selectable checkbox on a custom nested header (Table 5)', () => {
+    test('select-all real-checks/unchecks every row', async ({ page }) => {
+      await page.getByRole('tab', { name: 'Table 5', exact: true }).click();
+      const wrapper = example(page, 'table-5-nested-header');
+      const selectAll = wrapper
+        .getByTestId('cps-table-header-selectable-checkbox')
+        .getByRole('checkbox');
+      const firstCheckbox = wrapper
+        .getByTestId('cps-table-row-select-cell-0')
+        .getByRole('checkbox');
+
+      await selectAll.click();
+      await expect(selectAll).toBeChecked();
+      await expect(firstCheckbox).toBeChecked();
+
+      await selectAll.click();
+      await expect(selectAll).not.toBeChecked();
+      await expect(firstCheckbox).not.toBeChecked();
+    });
+  });
+
+  test.describe('Real row expansion (Table 4)', () => {
+    test('clicking the chevron real-toggles aria-expanded and reveals real projected content', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 4', exact: true }).click();
+      const wrapper = example(page, 'table-4-select-expand');
+      const expandBtn = wrapper.getByTestId('cps-table-row-expand-btn-a1');
+
+      await expect(expandBtn).toHaveAttribute('aria-expanded', 'false');
+      await expandBtn.click();
+      await expect(expandBtn).toHaveAttribute('aria-expanded', 'true');
+
+      const expandedContent = wrapper.getByTestId(
+        'cps-table-row-expanded-content-a1'
+      );
+      await expect(expandedContent).toBeVisible();
+      await expect(expandedContent).toContainText('id: 1');
+    });
+  });
+
+  test.describe('Real row menu (Table 3)', () => {
+    test('the Edit action opens the real menu without it closing prematurely', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 3', exact: true }).click();
+      const wrapper = example(page, 'table-3-reorder-menu');
+      const menuBtn = wrapper
+        .getByTestId('cps-table-row-menu-0')
+        .getByTestId('cps-table-row-menu-btn');
+
+      await menuBtn.click();
+      const editItem = page
+        .getByTestId(/cps-menu-item-\d+/)
+        .filter({ hasText: 'Edit' });
+      await expect(editItem).toBeVisible();
+      await editItem.click();
+
+      await expect(page.getByTestId('cps-toast-message-header')).toContainText(
+        'Edit row button clicked'
+      );
+    });
+
+    test('clicking Remove (once shown) real-shrinks the rendered row count', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 3', exact: true }).click();
+      const wrapper = example(page, 'table-3-reorder-menu');
+      const rows = wrapper.locator('tbody tr');
+      const initialCount = await rows.count();
+
+      await wrapper
+        .getByRole('button', { name: /Show Remove buttons/ })
+        .click();
+
+      const menuBtn = wrapper
+        .getByTestId('cps-table-row-menu-0')
+        .getByTestId('cps-table-row-menu-btn');
+      await menuBtn.click();
+      const removeItem = page
+        .getByTestId(/cps-menu-item-\d+/)
+        .filter({ hasText: 'Remove' });
+      await expect(removeItem).toBeVisible();
+      await removeItem.click();
+
+      await expect(rows).toHaveCount(initialCount - 1);
+    });
+  });
+
+  test.describe('Real toolbar action button (Table 3)', () => {
+    test('shows a real cps-notification toast reflecting the new state', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 3', exact: true }).click();
+      const wrapper = example(page, 'table-3-reorder-menu');
+      const actionBtn = wrapper.getByRole('button', {
+        name: /Show Remove buttons/
+      });
+
+      await actionBtn.click();
+
+      await expect(page.getByTestId('cps-toast-message-header')).toHaveText(
+        "'Remove' buttons are now visible"
+      );
+    });
+  });
+
+  test.describe('Real row reorder via keyboard (Table 3)', () => {
+    test('Enter picks up, ArrowDown moves, Enter confirms a real position swap', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 3', exact: true }).click();
+      const wrapper = example(page, 'table-3-reorder-menu');
+      const rows = wrapper.locator('tbody tr');
+      const firstRowTextBefore = await rows.first().textContent();
+      const secondRowTextBefore = await rows.nth(1).textContent();
+
+      const handle = wrapper.getByTestId('cps-table-row-drag-handle-0');
+      await handle.focus();
+      await page.keyboard.press('Enter');
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('Enter');
+
+      await expect(rows.first()).toHaveText(secondRowTextBefore!);
+      await expect(rows.nth(1)).toHaveText(firstRowTextBefore!);
+    });
+
+    test('Escape cancels a real in-progress reorder, leaving row order unchanged', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 3', exact: true }).click();
+      const wrapper = example(page, 'table-3-reorder-menu');
+      const rows = wrapper.locator('tbody tr');
+      const firstRowTextBefore = await rows.first().textContent();
+
+      const handle = wrapper.getByTestId('cps-table-row-drag-handle-0');
+      await handle.focus();
+      await page.keyboard.press('Enter');
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('Escape');
+
+      await expect(rows.first()).toHaveText(firstRowTextBefore!);
+    });
+  });
+
+  test.describe('Real global filter (Table 2)', () => {
+    test('typing real-narrows the rendered rows', async ({ page }) => {
+      await page.getByRole('tab', { name: 'Table 2', exact: true }).click();
+      const wrapper = example(page, 'table-2-virtual-default-render');
+      const filterInput = wrapper
+        .getByTestId('cps-table-tbar-global-filter')
+        .locator('input');
+      await expect(filterInput).toBeVisible();
+
+      await filterInput.fill('Panda');
+
+      await expect(wrapper.locator('tbody tr')).toHaveCount(1);
+    });
+  });
+
+  test.describe('Real remove-on-select toolbar button (Table 4)', () => {
+    test('appears only once a real selection exists', async ({ page }) => {
+      await page.getByRole('tab', { name: 'Table 4', exact: true }).click();
+      const wrapper = example(page, 'table-4-select-expand');
+      const removeBtn = wrapper.getByTestId('cps-table-tbar-remove-btn');
+
+      await expect(removeBtn).toHaveCount(0);
+
+      await wrapper
+        .getByTestId('cps-table-row-select-cell-a1')
+        .getByRole('checkbox')
+        .click();
+
+      await expect(removeBtn).toBeVisible();
+    });
+  });
+
+  test.describe('Real columns visibility toggle', () => {
+    test('the internal toggle real-removes a column from the rendered table (Table 2)', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 2', exact: true }).click();
+      const wrapper = example(page, 'table-2-virtual-default-render');
+
+      await wrapper.getByTestId('cps-table-coltoggle-btn').click();
+      const item = page.getByTestId('cps-table-coltoggle-item-String');
+      await expect(item).toBeVisible();
+
+      await expect(wrapper.getByTestId('cps-table-header-cell-a')).toHaveCount(
+        1
+      );
+      await item.click();
+      await expect(wrapper.getByTestId('cps-table-header-cell-a')).toHaveCount(
+        0
+      );
+    });
+
+    test('the externally-consumed variant real-opens with every column listed (Table 4)', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 4', exact: true }).click();
+      const wrapper = example(page, 'table-4-select-expand');
+
+      await wrapper.getByTestId('cps-table-coltoggle-btn').click();
+      const listbox = page.getByTestId('cps-table-coltoggle-listbox');
+      await expect(listbox).toBeVisible();
+      await expect(listbox.getByRole('option')).toHaveCount(6);
+    });
+  });
+
+  test.describe('Real column resize via keyboard (Table 2)', () => {
+    test('ArrowRight on the resize handle real-widens the column', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 2', exact: true }).click();
+      const wrapper = example(page, 'table-2-virtual-default-render');
+      const header = wrapper.getByTestId('cps-table-header-cell-a');
+      const separator = header.getByTestId('cps-table-col-resizer');
+
+      const before = (await header.boundingBox())!.width;
+      await separator.focus();
+      for (let i = 0; i < 5; i++) await page.keyboard.press('ArrowRight');
+
+      const after = (await header.boundingBox())!.width;
+      expect(after).toBeGreaterThan(before);
+    });
+  });
+
+  test.describe('Real lazy loading (Table 11)', () => {
+    async function waitForInitialLazyLoad(wrapper: Locator) {
+      const spinner = wrapper
+        .getByTestId('cps-table-loading')
+        .getByTestId('cps-loader-spinner');
+      await expect(spinner).toBeVisible();
+      await expect(spinner).toBeHidden();
+    }
+
+    test('fires on init and real-swaps rendered rows on a real page change', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 11', exact: true }).click();
+      const wrapper = example(page, 'table-11-lazy');
+      await waitForInitialLazyLoad(wrapper);
+
+      const firstRowTextBefore = await wrapper
+        .locator('tbody tr')
+        .first()
+        .textContent();
+
+      await wrapper.locator('.p-paginator-next').click();
+
+      const loader = wrapper.getByTestId('cps-table-loading');
+      const spinner = loader.getByTestId('cps-loader-spinner');
+      await expect(spinner).toBeVisible();
+      await expect(loader.getByTestId('cps-loader-label')).toHaveText(
+        'Fetching...'
+      );
+      await expect(spinner).toBeHidden();
+
+      await expect(wrapper.locator('tbody tr').first()).not.toHaveText(
+        firstRowTextBefore!
+      );
+    });
+
+    test('clicking the already-active page again does not re-trigger a real fetch', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 11', exact: true }).click();
+      const wrapper = example(page, 'table-11-lazy');
+      await waitForInitialLazyLoad(wrapper);
+
+      const firstRowTextBefore = await wrapper
+        .locator('tbody tr')
+        .first()
+        .textContent();
+
+      const spinner = wrapper
+        .getByTestId('cps-table-loading')
+        .getByTestId('cps-loader-spinner');
+      let sawSpinner = false;
+      const spinnerWatch = spinner
+        .waitFor({ state: 'visible', timeout: 900 })
+        .then(() => {
+          sawSpinner = true;
+        })
+        .catch(() => {});
+
+      await wrapper.getByRole('button', { name: '1' }).click();
+      await spinnerWatch;
+
+      expect(sawSpinner).toBe(false);
+      await expect(wrapper.locator('tbody tr').first()).toHaveText(
+        firstRowTextBefore!
+      );
+    });
+  });
+
+  test.describe('Real alwaysShowPaginator=false (Table 12)', () => {
+    test('the real paginator hides once everything fits on one page, and reappears with more rows', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 12', exact: true }).click();
+      const wrapper = example(page, 'table-12-always-show-paginator-false');
+
+      await expect(wrapper.locator('.p-paginator')).toBeHidden();
+
+      await page.getByTestId('cps-switch-label').click();
+
+      await expect(wrapper.locator('.p-paginator')).toBeVisible();
+    });
+  });
+
+  test.describe('Real additional toolbar button on select (Table 13)', () => {
+    test('appears alongside Remove only once a real selection exists, and fires its real output', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 13', exact: true }).click();
+      const wrapper = example(page, 'table-13-additional-btn-on-select');
+      const additionalBtn = wrapper.getByTestId(
+        'cps-table-tbar-additional-btn'
+      );
+
+      await expect(additionalBtn).toHaveCount(0);
+
+      await wrapper
+        .getByTestId('cps-table-row-select-cell-0')
+        .getByRole('checkbox')
+        .click();
+
+      await expect(additionalBtn).toBeVisible();
+
+      await additionalBtn.click();
+      await expect(page.getByTestId('cps-toast-message-header')).toHaveText(
+        'Archive clicked for 1 row(s)'
+      );
+    });
+  });
+
+  test.describe('Real custom sort (Table 14)', () => {
+    for (const [column, nthChild] of [
+      ['name', 1],
+      ['city', 2]
+    ] as const) {
+      test(`sorts the ${column} column by real string length instead of alphabetically`, async ({
+        page
+      }) => {
+        await page.getByRole('tab', { name: 'Table 14', exact: true }).click();
+        const wrapper = example(page, 'table-14-custom-sort');
+        const header = wrapper.getByTestId(`cps-table-header-cell-${column}`);
+
+        await header.click({ position: { x: 5, y: 5 } });
+
+        const values = await wrapper
+          .locator(`tbody tr td:nth-child(${nthChild})`)
+          .allTextContents();
+        const lengths = values.map((v) => v.trim().length);
+        const sortedLengths = [...lengths].sort((a, b) => a - b);
+        expect(lengths).toEqual(sortedLengths);
+      });
+    }
+  });
+
+  test.describe('Real initialColumns (Table 15)', () => {
+    test('renders only the configured subset, and the columns toggle real-reveals the rest', async ({
+      page
+    }) => {
+      await page.getByRole('tab', { name: 'Table 15', exact: true }).click();
+      const wrapper = example(page, 'table-15-initial-columns');
+
+      await expect(wrapper.locator('thead th')).toHaveCount(3);
+
+      await wrapper.getByTestId('cps-table-coltoggle-btn').click();
+      const items = page.locator('[data-testid^="cps-table-coltoggle-item-"]');
+      await expect(items.nth(3)).toBeVisible();
+      await items.nth(3).click();
+
+      await expect(wrapper.locator('thead th')).toHaveCount(4);
+    });
+  });
+});
+
 test.describe('cps-table page', () => {
   test.describe('export to xlsx', () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/table');
+      await page.addStyleTag({
+        content: '* { scroll-behavior: auto !important; }'
+      });
     });
 
     test('should properly download valid xlsx', async ({ page }) => {
-      await page.getByText('Table 6').click({ force: true });
-      await page.locator('.cps-table-tbar-export-btn cps-icon').click();
+      await page.getByRole('tab', { name: 'Table 6', exact: true }).click();
+      const wrapper = page.getByTestId('table-6-export');
+      await wrapper.getByTestId('cps-table-tbar-export-btn').click();
 
-      const xlsxItem = page.getByText('XLSX');
+      const xlsxItem = page
+        .getByTestId(/cps-menu-item-\d+/)
+        .filter({ hasText: 'XLSX' });
       await expect(xlsxItem).toBeVisible();
 
       const downloadPromise = page.waitForEvent('download');
diff --git a/playwright/fixtures/composition-components.ts b/playwright/fixtures/composition-components.ts
index 4e516c336..5f3695c68 100644
--- a/playwright/fixtures/composition-components.ts
+++ b/playwright/fixtures/composition-components.ts
@@ -244,7 +244,12 @@ export const components: ComponentEntry[] = [
     'Table 7',
     'Table 8',
     'Table 9',
-    'Table 10'
+    'Table 10',
+    'Table 11',
+    'Table 12',
+    'Table 13',
+    'Table 14',
+    'Table 15'
   ].map((tab): ComponentEntry => ({
     route: '/table',
     name: tab,
diff --git a/projects/composition/src/app/api-data/cps-table.json b/projects/composition/src/app/api-data/cps-table.json
index 92963fc68..899dcd751 100644
--- a/projects/composition/src/app/api-data/cps-table.json
+++ b/projects/composition/src/app/api-data/cps-table.json
@@ -140,6 +140,14 @@
                         "default": "false",
                         "description": "When enabled, a loader component is displayed."
                     },
+                    {
+                        "name": "loadingLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "Loading...",
+                        "description": "Text shown alongside the loader while  `loading`  is true."
+                    },
                     {
                         "name": "tableStyle",
                         "optional": false,
diff --git a/projects/composition/src/app/pages/table-page/table-page.component.html b/projects/composition/src/app/pages/table-page/table-page.component.html
index 5c25c16fb..d818419b9 100644
--- a/projects/composition/src/app/pages/table-page/table-page.component.html
+++ b/projects/composition/src/app/pages/table-page/table-page.component.html
@@ -10,6 +10,7 @@
         [htmlCode]="examples.table1.html"
         [tsCode]="examples.table1.ts">
         <cps-table
+          data-testid="table-1-paginated-filters"
           [data]="data"
           [paginator]="true"
           sortMode="multiple"
@@ -58,6 +59,7 @@
         [tsCode]="examples.table2.ts">
         @if (selectedTabIndex === 1) {
           <cps-table
+            data-testid="table-2-virtual-default-render"
             [showGlobalFilter]="true"
             [data]="dataVirtual"
             [columns]="colsVirtual"
@@ -77,6 +79,7 @@
         [htmlCode]="examples.table3.html"
         [tsCode]="examples.table3.ts">
         <cps-table
+          data-testid="table-3-reorder-menu"
           [data]="data"
           [reorderableRows]="true"
           [showActionBtn]="true"
@@ -127,6 +130,7 @@
         [htmlCode]="examples.table4.html"
         [tsCode]="examples.table4.ts">
         <cps-table
+          data-testid="table-4-select-expand"
           [data]="data"
           dataKey="a"
           [columns]="colsWithFilterType"
@@ -200,6 +204,7 @@
         [htmlCode]="examples.table5.html"
         [tsCode]="examples.table5.ts">
         <cps-table
+          data-testid="table-5-nested-header"
           [data]="data"
           [selectable]="true"
           toolbarSize="small"
@@ -252,6 +257,7 @@
         [htmlCode]="examples.table6.html"
         [tsCode]="examples.table6.ts">
         <cps-table
+          data-testid="table-6-export"
           [data]="data"
           [columns]="cols"
           [rowHover]="false"
@@ -336,8 +342,10 @@
     <cps-tab label="Table 8">
       <app-code-example [htmlCode]="examples.table8.html">
         <cps-table
+          data-testid="table-8-empty"
           [data]="[]"
-          toolbarTitle="Empty table"
+          [hasToolbar]="false"
+          emptyMessage="No records match your criteria"
           emptyBodyHeight="22rem">
           <ng-template #header>
             <th cpsTColSortable="a">A</th>
@@ -354,6 +362,7 @@
         [htmlCode]="examples.table9.html"
         [tsCode]="examples.table9.ts">
         <cps-table
+          data-testid="table-9-loading"
           [data]="data"
           [loading]="true"
           scrollHeight="25rem"
@@ -367,6 +376,7 @@
         [htmlCode]="examples.table10.html"
         [tsCode]="examples.table10.ts">
         <cps-table
+          data-testid="table-10-html"
           [data]="dataWithHTML"
           scrollHeight="22rem"
           [columns]="colsHTML"
@@ -380,5 +390,95 @@
         </cps-table>
       </app-code-example>
     </cps-tab>
+    <cps-tab label="Table 11">
+      <app-code-example
+        [htmlCode]="examples.table11.html"
+        [tsCode]="examples.table11.ts">
+        <cps-table
+          data-testid="table-11-lazy"
+          [data]="lazyData"
+          [columns]="cols"
+          [lazy]="true"
+          [lazyLoadOnInit]="true"
+          [loading]="lazyLoading"
+          loadingLabel="Fetching..."
+          [paginator]="true"
+          [rows]="lazyRows"
+          [totalRecords]="lazyTotalRecords"
+          (lazyLoaded)="onLazyLoad($event)"
+          toolbarTitle="Table with lazy/server-side loading, driven by a simulated 600ms fetch delay">
+        </cps-table>
+      </app-code-example>
+    </cps-tab>
+    <cps-tab label="Table 12">
+      <app-code-example
+        [htmlCode]="examples.table12.html"
+        [tsCode]="examples.table12.ts">
+        <cps-table
+          data-testid="table-12-always-show-paginator-false"
+          [data]="manyRecordsForPaginator ? data : data.slice(0, 3)"
+          [columns]="cols"
+          [paginator]="true"
+          [rows]="10"
+          [alwaysShowPaginator]="false"
+          toolbarTitle="Table whose paginator hides when everything fits on one page">
+        </cps-table>
+        <cps-switch
+          class="spaced-from-table"
+          [(ngModel)]="manyRecordsForPaginator"
+          label="Load enough records for multiple pages">
+        </cps-switch>
+      </app-code-example>
+    </cps-tab>
+    <cps-tab label="Table 13">
+      <app-code-example
+        [htmlCode]="examples.table13.html"
+        [tsCode]="examples.table13.ts">
+        <cps-table
+          data-testid="table-13-additional-btn-on-select"
+          [data]="data"
+          [columns]="cols"
+          [selectable]="true"
+          [showAdditionalBtnOnSelect]="true"
+          additionalBtnOnSelectTitle="Archive"
+          additionalBtnOnSelectIcon="star"
+          (additionalBtnOnSelectClicked)="
+            onAdditionalBtnOnSelectClicked($event)
+          "
+          toolbarTitle="Selectable table with an additional toolbar action shown alongside Remove when rows are selected">
+        </cps-table>
+      </app-code-example>
+    </cps-tab>
+    <cps-tab label="Table 14">
+      <app-code-example
+        [htmlCode]="examples.table14.html"
+        [tsCode]="examples.table14.ts">
+        <cps-table
+          data-testid="table-14-custom-sort"
+          [data]="customSortData"
+          [columns]="customSortCols"
+          [sortable]="true"
+          [customSort]="true"
+          (customSortFunction)="onCustomSort($event)"
+          toolbarTitle="Table with a custom sort function (sorts by string length instead of alphabetically)">
+        </cps-table>
+      </app-code-example>
+    </cps-tab>
+    <cps-tab label="Table 15">
+      <app-code-example
+        [htmlCode]="examples.table15.html"
+        [tsCode]="examples.table15.ts">
+        <cps-table
+          data-testid="table-15-initial-columns"
+          [data]="dataVirtual"
+          [columns]="colsVirtual"
+          [initialColumns]="colsVirtual.slice(0, 3)"
+          [virtualScroll]="true"
+          scrollHeight="26rem"
+          [showColumnsToggleBtn]="true"
+          toolbarTitle="Table that initially shows only a subset of columns. Use the columns button to reveal the rest">
+        </cps-table>
+      </app-code-example>
+    </cps-tab>
   </cps-tab-group>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/table-page/table-page.component.scss b/projects/composition/src/app/pages/table-page/table-page.component.scss
index 17709b16b..fb6a617c2 100644
--- a/projects/composition/src/app/pages/table-page/table-page.component.scss
+++ b/projects/composition/src/app/pages/table-page/table-page.component.scss
@@ -4,6 +4,10 @@
     color: red;
   }
 
+  .spaced-from-table {
+    margin-top: 1rem;
+  }
+
   ::ng-deep {
     .table-page--sub-tabs {
       padding-top: 0.625rem;
diff --git a/projects/composition/src/app/pages/table-page/table-page.component.ts b/projects/composition/src/app/pages/table-page/table-page.component.ts
index 9ba404f5a..27601e087 100644
--- a/projects/composition/src/app/pages/table-page/table-page.component.ts
+++ b/projects/composition/src/app/pages/table-page/table-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
   CpsTableComponent,
@@ -14,7 +14,9 @@ import {
   CpsTabChangeEvent,
   CpsColumnFilterMatchMode,
   CpsMenuItem,
-  CpsIconComponent
+  CpsIconComponent,
+  CpsSwitchComponent,
+  CpsNotificationService
 } from 'cps-ui-kit';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
 import { CodeExampleComponent } from '../../components/code-example/code-example.component';
@@ -39,6 +41,7 @@ import { DatePipe, PercentPipe, UpperCasePipe } from '@angular/common';
     CpsTabComponent,
     CpsButtonToggleComponent,
     CpsIconComponent,
+    CpsSwitchComponent,
     ComponentDocsViewerComponent,
     CodeExampleComponent
   ],
@@ -47,6 +50,8 @@ import { DatePipe, PercentPipe, UpperCasePipe } from '@angular/common';
   host: { class: 'composition-page' }
 })
 export class TablePageComponent implements OnInit {
+  private readonly _notifService = inject(CpsNotificationService);
+
   readonly examples = tableExamples;
 
   selectedTabIndex = 0;
@@ -358,6 +363,19 @@ export class TablePageComponent implements OnInit {
 
   selCols: { [key: string]: any }[] = [];
 
+  customSortData = [
+    { name: 'Andrei', city: 'Tyumen' },
+    { name: 'Oleksandra', city: 'Kharkiv' },
+    { name: 'Lukas', city: 'Kosice' },
+    { name: 'Terrance', city: 'Johannesburg' },
+    { name: 'Michael', city: 'Nairobi' }
+  ];
+
+  customSortCols = [
+    { field: 'name', header: 'Name' },
+    { field: 'city', header: 'City' }
+  ];
+
   dataVirtual: {
     a: string;
     b: string;
@@ -383,6 +401,16 @@ export class TablePageComponent implements OnInit {
 
   colsHTML = this.colsVirtual.slice(0, 3);
 
+  lazyData: any[] = [];
+  lazyTotalRecords = 0;
+  lazyLoading = false;
+  lazyRows = 10;
+  private _lazyLoadTimeout?: ReturnType<typeof setTimeout>;
+  private _lastLazyFirst = -1;
+  private _lastLazyRows = -1;
+
+  manyRecordsForPaginator = false;
+
   componentData = ComponentData;
 
   customRowMenuItems: CpsMenuItem[] = [
@@ -430,7 +458,7 @@ export class TablePageComponent implements OnInit {
   onActionBtnClicked() {
     this.isRemoveBtnVisible = !this.isRemoveBtnVisible;
     const visibilityStatus = this.isRemoveBtnVisible ? 'visible' : 'hidden';
-    alert(`'Remove' buttons are now ${visibilityStatus}`);
+    this._notifService.info(`'Remove' buttons are now ${visibilityStatus}`);
   }
 
   onRowsToRemove(rows: any[]) {
@@ -438,11 +466,13 @@ export class TablePageComponent implements OnInit {
   }
 
   onReloadBtnClicked() {
-    alert('Data reload button clicked');
+    this._notifService.info('Data reload button clicked');
   }
 
   onEditRowButtonClicked(item: any) {
-    alert(`Edit row button clicked. Item: ${JSON.stringify(item)}`);
+    this._notifService.info(
+      `Edit row button clicked. Item: ${JSON.stringify(item)}`
+    );
   }
 
   onRowsSelectionChanged(rows: any) {
@@ -456,4 +486,38 @@ export class TablePageComponent implements OnInit {
   changeTab({ newIndex }: CpsTabChangeEvent) {
     this.selectedTabIndex = newIndex;
   }
+
+  onLazyLoad(event: { first?: number; rows?: number }) {
+    const first = event.first ?? 0;
+    const rows = event.rows ?? this.lazyRows;
+
+    if (first === this._lastLazyFirst && rows === this._lastLazyRows) return;
+    this._lastLazyFirst = first;
+    this._lastLazyRows = rows;
+
+    Promise.resolve().then(() => {
+      this.lazyLoading = true;
+      clearTimeout(this._lazyLoadTimeout);
+      this._lazyLoadTimeout = setTimeout(() => {
+        this.lazyTotalRecords = this.dataVirtual.length;
+        this.lazyData = this.dataVirtual.slice(first, first + rows);
+        this.lazyLoading = false;
+      }, 600);
+    });
+  }
+
+  onAdditionalBtnOnSelectClicked(rows: any[]) {
+    this._notifService.success(`Archive clicked for ${rows.length} row(s)`);
+  }
+
+  onCustomSort(event: { data: any[]; field?: string; order?: number }) {
+    const { data, field, order } = event;
+    if (!field) return;
+    data.sort((a, b) => {
+      const v1 = String(a[field] ?? '');
+      const v2 = String(b[field] ?? '');
+      const result = v1.length - v2.length || v1.localeCompare(v2);
+      return (order ?? 1) * result;
+    });
+  }
 }
diff --git a/projects/composition/src/app/pages/table-page/table-page.examples.ts b/projects/composition/src/app/pages/table-page/table-page.examples.ts
index 6c47ef19d..45a40b639 100644
--- a/projects/composition/src/app/pages/table-page/table-page.examples.ts
+++ b/projects/composition/src/app/pages/table-page/table-page.examples.ts
@@ -238,6 +238,8 @@ ngOnInit(): void {
   </ng-template>
 </cps-table>`,
     ts: `
+private readonly _notifService = inject(CpsNotificationService);
+
 ${tableDataTs.trim()}
 
 isRemoveBtnVisible = false;
@@ -247,17 +249,19 @@ onRowsToRemove(rows: any[]) {
 }
 
 onEditRowButtonClicked(item: any) {
-  alert(\`Edit row button clicked. Item: \${JSON.stringify(item)}\`);
+  this._notifService.info(
+    \`Edit row button clicked. Item: \${JSON.stringify(item)}\`
+  );
 }
 
 onActionBtnClicked() {
   this.isRemoveBtnVisible = !this.isRemoveBtnVisible;
   const visibilityStatus = this.isRemoveBtnVisible ? 'visible' : 'hidden';
-  alert(\`'Remove' buttons are now \${visibilityStatus}\`);
+  this._notifService.info(\`'Remove' buttons are now \${visibilityStatus}\`);
 }
 
 onReloadBtnClicked() {
-  alert('Data reload button clicked');
+  this._notifService.info('Data reload button clicked');
 }`
   },
 
@@ -331,6 +335,8 @@ onReloadBtnClicked() {
   </ng-template>
 </cps-table>`,
     ts: `
+private readonly _notifService = inject(CpsNotificationService);
+
 ${tableDataTs.trim()}
 
 colsWithFilterType = [
@@ -352,7 +358,9 @@ onColumnsSelected(columns: any) {
 }
 
 onEditRowButtonClicked(item: any) {
-  alert(\`Edit row button clicked. Item: \${JSON.stringify(item)}\`);
+  this._notifService.info(
+    \`Edit row button clicked. Item: \${JSON.stringify(item)}\`
+  );
 }
 
 onRowsSelectionChanged(rows: any) {
@@ -453,6 +461,8 @@ onRowsToRemove(rows: any[]) {
   </ng-template>
 </cps-table>`,
     ts: `
+private readonly _notifService = inject(CpsNotificationService);
+
 ${tableDataTs.trim()}
 
 cols = [
@@ -481,7 +491,9 @@ customRowMenuItems: CpsMenuItem[] = [
 ];
 
 onEditRowButtonClicked(item: any) {
-  alert(\`Edit row button clicked. Item: \${JSON.stringify(item)}\`);
+  this._notifService.info(
+    \`Edit row button clicked. Item: \${JSON.stringify(item)}\`
+  );
 }`
   },
 
@@ -535,7 +547,11 @@ selSize: CpsTableSize = 'small';`
 
   table8: {
     html: `
-<cps-table [data]="[]" toolbarTitle="Empty table" emptyBodyHeight="22rem">
+<cps-table
+  [data]="[]"
+  [hasToolbar]="false"
+  emptyMessage="No records match your criteria"
+  emptyBodyHeight="22rem">
   <ng-template #header>
     <th cpsTColSortable="a">A</th>
     <th cpsTColSortable="b">B</th>
@@ -602,5 +618,136 @@ colsHTML = [
 ];
 
 renderAsHTML = true;`
+  },
+
+  table11: {
+    html: `
+<cps-table
+  [data]="lazyData"
+  [columns]="cols"
+  [lazy]="true"
+  [lazyLoadOnInit]="true"
+  [loading]="lazyLoading"
+  loadingLabel="Fetching..."
+  [paginator]="true"
+  [rows]="lazyRows"
+  [totalRecords]="lazyTotalRecords"
+  (lazyLoaded)="onLazyLoad($event)"
+  toolbarTitle="Table with lazy/server-side loading, driven by a simulated 600ms fetch delay">
+</cps-table>`,
+    ts: `
+lazyData: any[] = [];
+lazyTotalRecords = 0;
+lazyLoading = false;
+lazyRows = 10;
+private _lazyLoadTimeout?: ReturnType<typeof setTimeout>;
+private _lastLazyFirst = -1;
+private _lastLazyRows = -1;
+
+onLazyLoad(event: { first?: number; rows?: number }) {
+  const first = event.first ?? 0;
+  const rows = event.rows ?? this.lazyRows;
+
+  if (first === this._lastLazyFirst && rows === this._lastLazyRows) return;
+  this._lastLazyFirst = first;
+  this._lastLazyRows = rows;
+
+  Promise.resolve().then(() => {
+    this.lazyLoading = true;
+    clearTimeout(this._lazyLoadTimeout);
+    this._lazyLoadTimeout = setTimeout(() => {
+      this.lazyTotalRecords = this.dataVirtual.length;
+      this.lazyData = this.dataVirtual.slice(first, first + rows);
+      this.lazyLoading = false;
+    }, 600);
+  });
+}`
+  },
+
+  table12: {
+    html: `
+<cps-table
+  [data]="manyRecordsForPaginator ? data : data.slice(0, 3)"
+  [columns]="cols"
+  [paginator]="true"
+  [rows]="10"
+  [alwaysShowPaginator]="false"
+  toolbarTitle="Table whose paginator hides when everything fits on one page">
+</cps-table>
+<cps-switch
+  [(ngModel)]="manyRecordsForPaginator"
+  label="Load enough records for multiple pages">
+</cps-switch>`,
+    ts: `
+manyRecordsForPaginator = false;`
+  },
+
+  table13: {
+    html: `
+<cps-table
+  [data]="data"
+  [columns]="cols"
+  [selectable]="true"
+  [showAdditionalBtnOnSelect]="true"
+  additionalBtnOnSelectTitle="Archive"
+  additionalBtnOnSelectIcon="star"
+  (additionalBtnOnSelectClicked)="onAdditionalBtnOnSelectClicked($event)"
+  toolbarTitle="Selectable table with an additional toolbar action shown alongside Remove when rows are selected">
+</cps-table>`,
+    ts: `
+private readonly _notifService = inject(CpsNotificationService);
+
+onAdditionalBtnOnSelectClicked(rows: any[]) {
+  this._notifService.success(\`Archive clicked for \${rows.length} row(s)\`);
+}`
+  },
+
+  table14: {
+    html: `
+<cps-table
+  [data]="customSortData"
+  [columns]="customSortCols"
+  [sortable]="true"
+  [customSort]="true"
+  (customSortFunction)="onCustomSort($event)"
+  toolbarTitle="Table with a custom sort function (sorts by string length instead of alphabetically)">
+</cps-table>`,
+    ts: `
+customSortData = [
+  { name: 'Andrei', city: 'Tyumen' },
+  { name: 'Oleksandra', city: 'Kharkiv' },
+  { name: 'Lukas', city: 'Kosice' },
+  { name: 'Terrance', city: 'Johannesburg' },
+  { name: 'Michael', city: 'Nairobi' }
+];
+
+customSortCols = [
+  { field: 'name', header: 'Name' },
+  { field: 'city', header: 'City' }
+];
+
+onCustomSort(event: { data: any[]; field?: string; order?: number }) {
+  const { data, field, order } = event;
+  if (!field) return;
+  data.sort((a, b) => {
+    const v1 = String(a[field] ?? '');
+    const v2 = String(b[field] ?? '');
+    const result = v1.length - v2.length || v1.localeCompare(v2);
+    return (order ?? 1) * result;
+  });
+}`
+  },
+
+  table15: {
+    html: `
+<cps-table
+  [data]="dataVirtual"
+  [columns]="colsVirtual"
+  [initialColumns]="colsVirtual.slice(0, 3)"
+  [virtualScroll]="true"
+  scrollHeight="26rem"
+  [showColumnsToggleBtn]="true"
+  toolbarTitle="Table that initially shows only a subset of columns. Use the columns button to reveal the rest">
+</cps-table>`
   }
 };
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.ts b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.ts
index a93f27d44..933bcd4b5 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.ts
@@ -21,6 +21,7 @@ import { Subscription } from 'rxjs';
     tabindex: '0',
     role: 'button',
     '[attr.aria-label]': 'sortAriaLabel',
+    '[attr.data-testid]': "'cps-table-sort-icon-' + field",
     '(keydown.enter)': 'onKeydown($event)',
     '(keydown.space)': 'onKeydown($event)'
   }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html
index 0b06f4af0..9609c347c 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html
@@ -1,4 +1,6 @@
-<div class="cps-table-col-filter">
+<div
+  class="cps-table-col-filter"
+  [attr.data-testid]="'cps-table-col-filter-' + field">
   <cps-menu
     #columnFilterMenu
     [withArrow]="false"
@@ -17,6 +19,7 @@
             <button
               type="button"
               class="cps-table-col-filter-close-btn"
+              data-testid="cps-table-col-filter-close-btn"
               aria-label="Close filter"
               (click)="onCloseClick()">
               <cps-icon icon="close-x" aria-hidden="true"></cps-icon>
@@ -27,6 +30,7 @@
       @if (isShowOperator) {
         <div class="cps-table-col-filter-menu-content-operator">
           <cps-select
+            data-testid="cps-table-col-filter-operator-select"
             ariaLabel="Select operator"
             [hideDetails]="true"
             [disabled]="!fieldConstraints || fieldConstraints.length < 2"
@@ -42,11 +46,18 @@
           track $index;
           let i = $index
         ) {
-          <div class="cps-table-col-filter-menu-content-constraint">
+          <div
+            class="cps-table-col-filter-menu-content-constraint"
+            [attr.data-testid]="
+              'cps-table-col-filter-constraint-' + field + '-' + i
+            ">
             @if (showMatchModes && currentMatchModes) {
               <cps-select
                 ariaLabel="Select match mode"
                 class="cps-table-col-filter-match-mode-select"
+                [attr.data-testid]="
+                  'cps-table-col-filter-match-mode-' + field + '-' + i
+                "
                 [hideDetails]="true"
                 [returnObject]="false"
                 [options]="currentMatchModes"
@@ -98,6 +109,7 @@
       <div class="cps-table-col-filter-buttonbar">
         @if (showClearButton) {
           <cps-button
+            data-testid="cps-table-col-filter-clear-btn"
             (clicked)="clearFilter()"
             type="borderless"
             color="calm"
@@ -106,6 +118,7 @@
         }
         @if (showApplyButton) {
           <cps-button
+            data-testid="cps-table-col-filter-apply-btn"
             (clicked)="applyFilter()"
             color="calm"
             size="small"
@@ -117,6 +130,7 @@
   <button
     type="button"
     class="cps-table-col-filter-menu-button"
+    [attr.data-testid]="'cps-table-col-filter-btn-' + field"
     [class.cps-table-col-filter-menu-button-active]="isFilterApplied"
     [attr.aria-label]="
       isFilterApplied ? 'Filter applied, open filter menu' : 'Open filter menu'
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.html b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.html
index 8afc862b7..695a82f3d 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.html
@@ -1,5 +1,6 @@
 <div class="cps-table-tbar-coltoggle-btn">
   <cps-button
+    data-testid="cps-table-coltoggle-btn"
     ariaLabel="Toggle column visibility"
     ariaHaspopup="listbox"
     [ariaExpanded]="isMenuOpen()"
@@ -18,6 +19,7 @@
   <div
     #listbox
     class="cps-table-coltoggle-menu suppress-focus-visible"
+    data-testid="cps-table-coltoggle-listbox"
     role="listbox"
     tabindex="0"
     aria-multiselectable="true"
@@ -27,6 +29,7 @@
     <div
       class="cps-table-coltoggle-menu-item select-all-option"
       role="option"
+      data-testid="cps-table-coltoggle-select-all"
       [id]="listboxId + '-opt-0'"
       [attr.aria-selected]="selectedColumns().length === columns().length"
       [class.allselected]="selectedColumns().length === columns().length"
@@ -43,6 +46,7 @@
       <div
         class="cps-table-coltoggle-menu-item"
         role="option"
+        [attr.data-testid]="'cps-table-coltoggle-item-' + col[colHeaderName()]"
         [id]="listboxId + '-opt-' + (i + 1)"
         [attr.aria-selected]="isColumnSelected(col)"
         [class.selected]="isColumnSelected(col)"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.html b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.html
index f05facc77..95df13024 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.html
@@ -9,6 +9,7 @@
 <button
   type="button"
   class="cps-table-row-menu-btn"
+  data-testid="cps-table-row-menu-btn"
   aria-label="Row actions"
   aria-haspopup="menu"
   [attr.aria-expanded]="isMenuOpen"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html
index 472bee6fa..5de059a52 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html
@@ -2,6 +2,7 @@
   #primengTable
   #tUnsortDirective="tWithUnsort"
   tWithUnsort
+  data-testid="cps-table"
   [pt]="tablePassthrough"
   [attr.aria-busy]="loading || null"
   [class.cps-table-loading]="loading"
@@ -54,17 +55,21 @@
         <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
       }
       @if (!toolbarTemplate) {
-        <div class="cps-table-tbar-left">
+        <div class="cps-table-tbar-left" data-testid="cps-table-tbar-left">
           @if (toolbarIcon) {
-            <div class="cps-table-tbar-icon">
+            <div class="cps-table-tbar-icon" data-testid="cps-table-tbar-icon">
               <cps-icon
                 [icon]="toolbarIcon"
                 [color]="toolbarIconColor"></cps-icon>
             </div>
           }
-          <div class="cps-table-tbar-title">{{ toolbarTitle }}</div>
+          <div class="cps-table-tbar-title" data-testid="cps-table-tbar-title">
+            {{ toolbarTitle }}
+          </div>
           @if (showGlobalFilter) {
-            <div class="cps-table-tbar-global-filter">
+            <div
+              class="cps-table-tbar-global-filter"
+              data-testid="cps-table-tbar-global-filter">
               <cps-input
                 #globalFilterComp
                 ariaLabel="Global filter"
@@ -81,9 +86,11 @@
             </div>
           }
         </div>
-        <div class="cps-table-tbar-right">
+        <div class="cps-table-tbar-right" data-testid="cps-table-tbar-right">
           @if (showRemoveBtnOnSelect && selectedRows.length > 0) {
-            <div class="cps-table-tbar-btn-on-select">
+            <div
+              class="cps-table-tbar-btn-on-select"
+              data-testid="cps-table-tbar-remove-btn">
               <cps-button
                 label="Remove"
                 [disabled]="removeBtnOnSelectDisabled"
@@ -96,7 +103,9 @@
             </div>
           }
           @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {
-            <div class="cps-table-tbar-btn-on-select">
+            <div
+              class="cps-table-tbar-btn-on-select"
+              data-testid="cps-table-tbar-additional-btn">
               <cps-button
                 [label]="additionalBtnOnSelectTitle"
                 [disabled]="additionalBtnOnSelectDisabled"
@@ -109,7 +118,9 @@
             </div>
           }
           @if (showActionBtn) {
-            <div class="cps-table-tbar-action-btn">
+            <div
+              class="cps-table-tbar-action-btn"
+              data-testid="cps-table-tbar-action-btn">
               <cps-button
                 [label]="actionBtnTitle"
                 [disabled]="actionBtnDisabled"
@@ -123,6 +134,7 @@
           }
           @if (showColumnsToggleBtn && columns.length > 0) {
             <table-column-visibility-toggle
+              data-testid="cps-table-tbar-columns-toggle"
               [columns]="columns"
               [selectedColumns]="selectedColumns"
               [disabled]="columnsToggleBtnDisabled"
@@ -134,6 +146,7 @@
             <div class="cps-table-tbar-export-btn">
               <cps-button
                 label="Export"
+                data-testid="cps-table-tbar-export-btn"
                 [disabled]="exportBtnDisabled"
                 color="calm"
                 type="solid"
@@ -145,6 +158,7 @@
               </cps-button>
               <cps-menu
                 #exportMenu
+                data-testid="cps-table-tbar-export-menu"
                 [items]="exportMenuItems"
                 [compressed]="true"
                 [withArrow]="false"
@@ -154,7 +168,9 @@
             </div>
           }
           @if (showDataReloadBtn) {
-            <div class="cps-table-tbar-reload-btn">
+            <div
+              class="cps-table-tbar-reload-btn"
+              data-testid="cps-table-tbar-reload-btn">
               <cps-button
                 ariaLabel="Reload data"
                 icon="refresh"
@@ -190,6 +206,7 @@
           <th
             scope="col"
             style="width: 3rem"
+            data-testid="cps-table-header-expansion-spacer"
             cpsTColResizable
             [cpsTColResizableDisabled]="!resizableColumns">
             <span class="cps-sr-only">Row expansion</span>
@@ -199,6 +216,7 @@
           <th
             scope="col"
             style="width: 3rem"
+            data-testid="cps-table-header-reorder-spacer"
             cpsTColResizable
             [cpsTColResizableDisabled]="!resizableColumns">
             <span class="cps-sr-only">Row order</span>
@@ -208,6 +226,7 @@
           <th
             scope="col"
             style="width: 4rem"
+            data-testid="cps-table-header-select-all-cell"
             cpsTColResizable
             [cpsTColResizableDisabled]="!resizableColumns">
             <p-tableHeaderCheckbox
@@ -229,6 +248,9 @@
               @for (col of columns; track col) {
                 <th
                   scope="col"
+                  [attr.data-testid]="
+                    'cps-table-header-cell-' + col[colFieldName]
+                  "
                   [cpsTColSortable]="col[colFieldName]"
                   [cpsTColFilter]="col[colFieldName]"
                   [filterType]="
@@ -246,6 +268,9 @@
               @for (col of columns; track col) {
                 <th
                   scope="col"
+                  [attr.data-testid]="
+                    'cps-table-header-cell-' + col[colFieldName]
+                  "
                   [cpsTColSortable]="col[colFieldName]"
                   cpsTColResizable
                   [cpsTColResizableDisabled]="!resizableColumns">
@@ -259,6 +284,9 @@
               @for (col of columns; track col) {
                 <th
                   scope="col"
+                  [attr.data-testid]="
+                    'cps-table-header-cell-' + col[colFieldName]
+                  "
                   [cpsTColFilter]="col[colFieldName]"
                   [filterType]="
                     col[colFilterTypeName] ??
@@ -275,6 +303,9 @@
               @for (col of columns; track col) {
                 <th
                   scope="col"
+                  [attr.data-testid]="
+                    'cps-table-header-cell-' + col[colFieldName]
+                  "
                   cpsTColResizable
                   [cpsTColResizableDisabled]="!resizableColumns">
                   {{ col[colHeaderName] }}
@@ -288,6 +319,7 @@
             scope="col"
             style="width: 2rem"
             class="cps-table-row-menu-cell"
+            data-testid="cps-table-header-row-menu-spacer"
             cpsTColResizable
             [cpsTColResizableDisabled]="!resizableColumns">
             <span class="cps-sr-only">Row actions</span>
@@ -306,6 +338,7 @@
     let-expanded="expanded">
     <tr
       [pReorderableRow]="rowIndex"
+      [attr.data-testid]="'cps-table-row-' + rowTestKey(item, rowIndex)"
       [class.cps-table-row-selected]="
         selectable && primengTable.isSelected(item)
       "
@@ -313,10 +346,17 @@
         reorderableRows && keyboardDragRowIndex === rowIndex
       ">
       @if (rowExpansionTemplate) {
-        <td class="cps-table-row-chevron-cell">
+        <td
+          class="cps-table-row-chevron-cell"
+          [attr.data-testid]="
+            'cps-table-row-expand-cell-' + rowTestKey(item, rowIndex)
+          ">
           <button
             type="button"
             class="cps-table-row-chevron"
+            [attr.data-testid]="
+              'cps-table-row-expand-btn-' + rowTestKey(item, rowIndex)
+            "
             [class.cps-table-row-chevron-expanded]="expanded"
             [attr.aria-expanded]="expanded"
             [attr.aria-label]="expanded ? 'Collapse row' : 'Expand row'"
@@ -334,6 +374,7 @@
             role="button"
             tabindex="0"
             [attr.data-row-index]="rowIndex"
+            [attr.data-testid]="'cps-table-row-drag-handle-' + rowIndex"
             [attr.aria-label]="
               keyboardDragRowIndex === rowIndex
                 ? 'Moving row. Use arrow keys to reposition, Enter or Space to confirm, Escape to cancel'
@@ -344,7 +385,10 @@
         </td>
       }
       @if (selectable) {
-        <td>
+        <td
+          [attr.data-testid]="
+            'cps-table-row-select-cell-' + rowTestKey(item, rowIndex)
+          ">
           <p-tableCheckbox
             [value]="item"
             ariaLabel="Select row"></p-tableCheckbox>
@@ -369,11 +413,23 @@
             @for (col of columns; track col) {
               <td
                 class="cps-table-html-cell"
+                [attr.data-testid]="
+                  'cps-table-cell-' +
+                  rowTestKey(item, rowIndex) +
+                  '-' +
+                  col[colFieldName]
+                "
                 [innerHTML]="rowData[col[colFieldName]]"></td>
             }
           } @else {
             @for (col of columns; track col) {
-              <td>
+              <td
+                [attr.data-testid]="
+                  'cps-table-cell-' +
+                  rowTestKey(item, rowIndex) +
+                  '-' +
+                  col[colFieldName]
+                ">
                 {{
                   col[colDateFormatName]
                     ? (rowData[col[colFieldName]]
@@ -386,8 +442,15 @@
         }
       }
       @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {
-        <td class="cps-table-row-menu-cell">
+        <td
+          class="cps-table-row-menu-cell"
+          [attr.data-testid]="
+            'cps-table-row-menu-cell-' + rowTestKey(item, rowIndex)
+          ">
           <table-row-menu
+            [attr.data-testid]="
+              'cps-table-row-menu-' + rowTestKey(item, rowIndex)
+            "
             (editRowBtnClicked)="onEditRowClicked(item)"
             (removeRowBtnClicked)="onRemoveRowClicked(item)"
             [showRowRemoveButton]="showRowRemoveButton"
@@ -399,8 +462,12 @@
     </tr>
   </ng-template>
   @if (rowExpansionTemplate; as item) {
-    <ng-template pTemplate="expandedrow" let-item>
-      <tr class="cps-table-row-expanded-content">
+    <ng-template pTemplate="expandedrow" let-item let-rowIndex="rowIndex">
+      <tr
+        class="cps-table-row-expanded-content"
+        [attr.data-testid]="
+          'cps-table-row-expanded-content-' + rowTestKey(item, rowIndex)
+        ">
         <td colspan="100">
           <ng-container
             *ngTemplateOutlet="
@@ -418,13 +485,18 @@
       <td
         colspan="100"
         class="cps-table-empty-message-td"
+        data-testid="cps-table-empty-message"
         [style.height]="emptyBodyHeight">
         {{ emptyMessage }}
       </td>
     </tr>
   </ng-template>
   <ng-template pTemplate="loadingicon">
-    <cps-loader [fullScreen]="false" opacity="0"></cps-loader>
+    <cps-loader
+      data-testid="cps-table-loading"
+      [fullScreen]="false"
+      [label]="loadingLabel"
+      opacity="0"></cps-loader>
   </ng-template>
   <ng-template pTemplate="paginatorleft">
     <div class="cps-table-paginator-itms-per-page">
@@ -432,6 +504,7 @@
         >Rows per page:
       </span>
       <cps-select
+        data-testid="cps-table-paginator-rows-select"
         ariaLabel="Set rows per page"
         width="4rem"
         [options]="rowOptions"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss
index 381756892..3f9ed708c 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss
@@ -437,19 +437,34 @@ $tbar-normal-height: 4.5rem;
       border-color: $color-calm;
       background: $color-calm;
     }
-    .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover)
-      .p-checkbox-box,
-    .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus)
-      .p-checkbox-box {
+    .p-checkbox-checked:not(.p-disabled)
+      .p-checkbox-input:hover
+      ~ .p-checkbox-box,
+    .p-checkbox-checked:not(.p-disabled)
+      .p-checkbox-input:focus-visible
+      ~ .p-checkbox-box {
       border-color: $color-calm;
       background: $color-calm;
       color: #ffffff;
     }
-    .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box,
-    .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus) .p-checkbox-box {
+    .p-checkbox:not(.p-disabled) .p-checkbox-input:hover ~ .p-checkbox-box,
+    .p-checkbox:not(.p-disabled)
+      .p-checkbox-input:focus-visible
+      ~ .p-checkbox-box {
       border-color: $color-calm;
     }
 
+    .p-checkbox-checked:not(.p-disabled)
+      .p-checkbox-input:hover
+      ~ .p-checkbox-box
+      .p-checkbox-icon,
+    .p-checkbox-checked:not(.p-disabled)
+      .p-checkbox-input:focus-visible
+      ~ .p-checkbox-box
+      .p-checkbox-icon {
+      color: #ffffff;
+    }
+
     .p-checkbox .p-checkbox-box .p-icon {
       width: 0.875rem;
       height: 0.875rem;
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.spec.ts
index de0776993..b62d104d1 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.spec.ts
@@ -293,6 +293,22 @@ describe('CpsTableComponent', () => {
     });
   });
 
+  describe('rowTestKey', () => {
+    it('should return the rowIndex as a string when dataKey is not set', () => {
+      expect(component.rowTestKey({ id: 'a1' }, 3)).toBe('3');
+    });
+
+    it('should return the resolved field value when dataKey is a flat field name', () => {
+      component.dataKey = 'id';
+      expect(component.rowTestKey({ id: 'a1' }, 3)).toBe('a1');
+    });
+
+    it('should resolve a nested/dot-path dataKey the same way PrimeNG does', () => {
+      component.dataKey = 'user.id';
+      expect(component.rowTestKey({ user: { id: 'u1' } }, 3)).toBe('u1');
+    });
+  });
+
   describe('onSortFunction', () => {
     it('should emit customSortFunction with the event', () => {
       jest.spyOn(component.customSortFunction, 'emit');
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts
index f79412764..9e1273f6e 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts
@@ -21,6 +21,7 @@ import { Table, TableService, TableModule } from 'primeng/table';
 import type { TablePassThrough } from 'primeng/types/table';
 import type { PaginatorPassThrough } from 'primeng/types/paginator';
 import { SortEvent } from 'primeng/api';
+import { ObjectUtils } from 'primeng/utils';
 import { CpsInputComponent } from '../cps-input/cps-input.component';
 import { CpsButtonComponent } from '../cps-button/cps-button.component';
 import { CpsSelectComponent } from '../cps-select/cps-select.component';
@@ -214,6 +215,12 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
    */
   @Input() loading = false;
 
+  /**
+   * Text shown alongside the loader while `loading` is true.
+   * @group Props
+   */
+  @Input() loadingLabel = 'Loading...';
+
   /**
    * Inline style of the table.
    * @group Props
@@ -776,7 +783,7 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
 
   private _buildTablePassthrough(): TablePassThrough {
     const pt: TablePassThrough = {};
-    if (!this.virtualScroll && this.scrollHeight) {
+    if (!this.virtualScroll) {
       pt.tableContainer = { tabindex: 0 };
     }
     if (this.paginator) {
@@ -869,6 +876,12 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
     this.globalFilterComp?.clear();
   }
 
+  rowTestKey(item: any, rowIndex: number): string {
+    return this.dataKey
+      ? String(ObjectUtils.resolveFieldData(item, this.dataKey))
+      : `${rowIndex}`;
+  }
+
   onSelectionChanged(selection: any[]) {
     this.rowsSelected.emit(selection);
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable/cps-table-column-resizable.directive.ts b/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable/cps-table-column-resizable.directive.ts
index 19e1f40cd..6008d1527 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable/cps-table-column-resizable.directive.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable/cps-table-column-resizable.directive.ts
@@ -32,6 +32,11 @@ export class CpsTableColumnResizableDirective extends ResizableColumn {
     super.onAfterViewInit();
     if (this.isEnabled() && this.resizer) {
       this.renderer.setAttribute(this.resizer, 'tabindex', '0');
+      this.renderer.setAttribute(
+        this.resizer,
+        'data-testid',
+        'cps-table-col-resizer'
+      );
       this.renderer.setAttribute(this.resizer, 'role', 'separator');
       this.renderer.setAttribute(this.resizer, 'aria-orientation', 'vertical');
       this.renderer.setAttribute(this.resizer, 'aria-label', 'Column resizer');
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-header-selectable/cps-table-header-selectable.directive.ts b/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-header-selectable/cps-table-header-selectable.directive.ts
index b3c50ffa8..3596f57b2 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-header-selectable/cps-table-header-selectable.directive.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-header-selectable/cps-table-header-selectable.directive.ts
@@ -28,9 +28,12 @@ export class CpsTableHeaderSelectableDirective implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.checkboxCompRef.setInput('ariaLabel', 'Select all rows');
-    this.elementRef.nativeElement.appendChild(
-      this.checkboxCompRef.location.nativeElement
+    const checkboxEl = this.checkboxCompRef.location.nativeElement;
+    checkboxEl.setAttribute(
+      'data-testid',
+      'cps-table-header-selectable-checkbox'
     );
+    this.elementRef.nativeElement.appendChild(checkboxEl);
   }
 
   ngOnDestroy(): void {