# Data Table: Unmanaged PagingTablePage

The `data-table/PagingTablePage.svelte` component is the "unmanaged" version of the paginated data table. It provides the UI and basic structure by wrapping `@ticatec/uniface-element/DataTable`, but leaves the data fetching and state management entirely up to you via a `PagedDataManager`.

## Purpose

Use this component when you need full control over how and when data is fetched. The component provides the page structure and pagination controls, but you are responsible for creating and managing a `PagedDataManager` instance and passing its state to the component as props.

## Key Dependencies

-   **`@ticatec/uniface-element/DataTable`**: Used for rendering the core table structure (`<thead>`, `<tbody>`).
-   **`@ticatec/app-data-manager/PagedDataManager`**: This class is the "brain" of the component. It holds the pagination state (`pageNo`, `pageCount`, `count`), the data for the current page (`list`), and query/refresh methods. You interact directly with this manager.

## How to Use

You manually create a `PagedDataManager` instance (backed by a `PagingDataService`) and pass its state properties individually to the component's props. The `PagingTablePage` component itself does not accept a manager instance, only raw data and callbacks.

1.  **Prepare your data service, manager, and columns**

    ```ts
    import type { DataColumn } from "@ticatec/uniface-element";
    import { PagingDataService } from '@ticatec/app-data-service';
    import { PagedDataManager } from '@ticatec/app-data-manager';

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

    // 1. Create the data service.
    class TenantService extends PagingDataService {
        constructor() {
            super('/api/tenants');
        }
    }
    const service = new TenantService();

    // 2. Create the manager, passing the service and key field.
    const manager = new PagedDataManager(service, 'id');

    // 3. Load the initial data.
    await manager.refresh();
    ```

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

    ```svelte
    <script lang="ts">
        // ... (script from above)
        import PagingTablePage from '@ticatec/uniface-pro-components/data-table/PagingTablePage';

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

        const indicatorColumn = { width: 50, selectable: false };

        // Pagination callbacks delegate straight to the manager
        const onPageChange = (pageNo: number) => {
            manager.setPageNo(pageNo);
        };

        const onRowCountChanged = (pageSize: number) => {
            manager.setRowsPage(pageSize);
        };
    </script>

    <PagingTablePage
        {page$attrs}
        {indicatorColumn}
        list={manager.list}
        {columns}
        total={manager.count}
        pageCount={manager.pageCount}
        pageNo={manager.pageNo}
        {onPageChange}
        {onRowCountChanged}
        rowHeight={48}
        canBeClosed={false}
    />
    ```

    This component does not provide create/refresh buttons or a search box on its own; use the `searchPanel` snippet to add those, or use the managed version `data-table/managed/PagingTablePage` instead.

## Component Props

-   `page$attrs: PageAttrs`: Page attributes containing title and other page-level settings. **(Required)**
-   `indicatorColumn: IndicatorColumn`: Configuration for selection indicators. **(Required)**
-   `list: Array<any>`: The array of data items to display in the table. **(Required)**
-   `columns: Array<DataColumn>`: Array of column definition objects from @ticatec/uniface-element. **(Required)**
-   `total: number`: Total record count. **(Required)**
-   `pageCount: number`: Total number of pages. **(Required)**
-   `pageNo: number`: Current page number. **(Required)**
-   `onPageChange: OnPageChange`: Callback invoked when the page number changes. **(Required)**
-   `onRowCountChanged: OnPageSizeChange`: Callback invoked when the page size changes. **(Required)**
-   `actionsColumn?: ActionsColumn`: Configuration for row action buttons.
-   `selectedRows?: Array<any>`: Array to bind selected rows to.
-   `rowHeight?: number`: Height of each row in pixels.
-   `canBeClosed?: boolean`: Whether the page can be closed. Defaults to `false`.
-   `roundTable?: boolean`: Whether to use rounded table corners. Defaults to `false`.
-   `round?: boolean`: Whether the page container has rounded corners. Defaults to `true`.
-   `shadow?: boolean`: Whether the page container shows a shadow. Defaults to `true`.
-   `emptyText?: string`: Custom text for empty state.
-   `getRowFontStyle?: GetRowFontStyle`: Function to customize row style.

## Snippets

-   `sidebar?: Snippet`: Optional sidebar content.
-   `searchPanel?: Snippet`: Optional search panel content, rendered in the table header area.

## Features

-   Data display using @ticatec/uniface-element/DataTable
-   Pagination state and data fetching driven by PagedDataManager
-   Support for row selection and actions
-   Responsive design with pagination controls
-   Optional sidebar and search panel support