# XWUIHrPayrollRunsPage

A full HR shell page (extends `HrListPage` → `HrPageBase` → `XWUIShellPage`) that lists payroll runs in a striped, hoverable `XWUIDataGrid` with the columns Period, Status, and Employees. It pulls rows from the injected HR API via `listPayrollRuns()`, showing a loading state, an empty "No records found" state, or an error panel; pass `data.rows` to render pre-fetched data without a network call. Configure the data source with `conf_comp.hrApiOptions` (defaults to `{ env: 'sandbox' }`) or a pre-built `conf_comp.hrApi`, set `conf_comp.locale` (`en`/`ar`), and override the heading with `data.title` / `data.titleAr` (default "Payroll Runs"). Use it for the payroll administration screen where staff review each pay period and its processing status.

## Basic Usage

Mounts the page with a custom title and a sandbox-mode HR API, so the grid auto-loads mock payroll-run rows.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Instantiates XWUIHrPayrollRunsPage against createHrApi({ env: 'sandbox' }) in English, letting the page fetch and render payroll runs.
```

## Arabic Locale (RTL)

Renders the page right-to-left with an Arabic title by passing `locale: 'ar'`.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic Locale (RTL)
description: Renders the page right-to-left with an Arabic title by passing locale 'ar'.
```

## Preloaded Rows

Supplies `data.rows` directly so the grid renders immediately without calling the API.

```example
file: examples/PreloadedRows.ts
html: examples/PreloadedRows.html
title: Preloaded Rows
description: Supplies data.rows directly so the grid renders immediately without calling the API.
```

```api
```