# Data Table: Managed PagingListPage

The `data-table/managed/PagingTablePage.svelte` component is a powerful, high-level tool for displaying paginated data from a server-side source. It wraps the base `@ticatec/uniface-element/DataTable` to fully automate data fetching, pagination, and state management.

## Purpose

This component is for the common use case of displaying large datasets queried page by page from an API. It abstracts away the boilerplate code for:
- Calling the data service.
- Handling loading and error states.
- Managing pagination controls.
- Refreshing the data.
- Displaying empty states.

## How It Works

This component acts as a "smart" wrapper. It uses the `dataManager` you provide (a `PagedDataManager` instance) to fetch data and manage pagination state, which then drives the underlying `@ticatec/uniface-element/DataTable` component.

The table rendering is fully controlled by the `columns` configuration you provide - each column definition determines how data is displayed without requiring manual row rendering.


## How to Use

1.  **Create a `PagingDataService`**

    ```ts
    // src/services/TenantService.ts
    import { PagingDataService } from '@ticatec/app-data-service';

    export default class TenantService extends PagingDataService {
        constructor() {
            super('/api/tenants');
        }
    }

    export const service = new TenantService();
    ```

2.  **Create a `PagedDataManager`**

    ```ts
    // src/managers/TenantManager.ts
    import { PagedDataManager } from '@ticatec/app-data-manager';
    import { service } from '../services/TenantService';

    export default class TenantManager extends PagedDataManager {
        constructor() {
            super(service, 'id');
        }
    }
    ```

3.  **Define Your Columns**

    ```ts
    // src/config/TenantColumns.ts
    import type { DataColumn } from "@ticatec/uniface-element";

    const columns: Array<DataColumn> = [
        {
            title: 'Tenant Name',
            field: 'name',
            width: 200,
            resizable: true
        },
        {
            title: 'Contact Email',
            field: 'email',
            width: 250,
            resizable: true
        },
        {
            title: 'Status',
            field: 'status',
            width: 120,
            align: 'center'
        }
    ];

    export default columns;
    ```

4.  **Use the Component in Your Page**

    ```svelte
    <script lang="ts">
        import PagingListPage from '@ticatec/uniface-pro-components/data-table/managed/PagingTablePage';
        import TenantManager from '../managers/TenantManager';
        import columns from '../config/TenantColumns';

        const dataManager = new TenantManager();

        let page$attrs = {
            title: "Managed Tenants"
        };

        const indicatorColumn = { width: 50, selectable: false };
        const actions: any[] = [];
    </script>

    <PagingListPage
        {dataManager}
        {columns}
        {indicatorColumn}
        {page$attrs}
        {actions}
        rowHeight={48}
    />
    ```

## Component Props

-   `dataManager: IPagedDataManager`: An instance of your data manager. **(Required)**
-   `columns: DataColumn[]`: An array of column definition objects from @ticatec/uniface-element. **(Required)**
-   `indicatorColumn: IndicatorColumn`: Configuration for selection indicators. **(Required)**
-   `page$attrs: object`: Page attributes containing title and other page-level settings. **(Required)**
-   `actions: ButtonActions`: Array of action buttons for the top action bar. **(Required)**
-   `rowHeight?: number`: Height of each row in pixels. Defaults to `40`.
-   `canBeClosed?: boolean`: Whether the page can be closed. Defaults to `false`.
-   `actionsColumn?: ActionsColumn`: Configuration for row action buttons.
-   `onError?: (ex: any) => void`: callback invoked when a post-initial-load operation (search / page change / refresh) fails; when omitted, the error message is shown in a MessageBox by default.

## Instance methods (via `bind:this`)

-   `doSearch(reset?: boolean)`: re-run the search; `reset=true` resets the criteria first. Searching returns to page 1.
-   `refresh()`: reload data with the **current criteria and current page number** (delegates to `IPagedDataManager.refresh()`) — use it after create/update/delete to stay on the current page.

```svelte
<script lang="ts">
    let tablePage: any = $state();

    const afterDelete = async () => {
        await tablePage.refresh();   // stay on the current page after deleting
    }
</script>

<PagingTablePage bind:this={tablePage} ... />
```

## Features

-   Automatic data fetching using PagedDataManager
-   Built-in pagination controls
-   Server-side data loading and searching
-   Loading and error state management
-   Uses @ticatec/uniface-element/DataTable for rendering
-   Support for row selection and actions
-   Responsive layout with action bars