Настройка шаблона подкачки для Datatable в шаблонах devexpress

Question

Я получил макет следующим образом: (изображение прилагается)

вышеприведенный пейджинг требуется размещать как снизу, так и сверху стола Но не в состоянии найти правильный путь для достижения этой цели. пожалуйста, кто-нибудь поможет мне сделать это?

вот мой текущий шаблон:

<dx-data-grid
    id="gridContainer"
    [dataSource]="courseList | async"
    (onInitialized)="onInitialized($event)"
    keyExpr="Id"
    [allowColumnReordering]="true"
    [allowColumnResizing]="true"
    [columnResizingMode]="columnResizingMode"
    [columnMinWidth]="150"
    [columnAutoWidth]="true"
    [(columns)]="columns"
    (onRowPrepared)="onRowPrepared()"
    [showBorders]="true"
    (onEditingStart)="logEvent('EditingStart')"
    [rowAlternationEnabled]="true"
    (onInitNewRow)="logEvent('InitNewRow')"
    (onRowInserting)="logEvent('RowInserting')"
    (onRowInserted)="logEvent('RowInserted')"
    (onRowUpdating)="logEvent('RowUpdating')"
    (onRowUpdated)="logEvent('RowUpdated')"
    (onRowRemoving)="logEvent('RowRemoving')"
    (onRowRemoved)="logEvent('RowRemoved')">
    <!-- show filter options -->
    <dxo-header-filter [visible]="showHeaderFilter"></dxo-header-filter>
    <!-- show search by column -->
    <dxo-filter-row [visible]="showFilterRow" [applyFilter]="currentFilter"></dxo-filter-row>

    <dxo-editing
    mode="row"
    [allowUpdating]="true"
    [allowDeleting]="true">
    </dxo-editing>

    <dxo-paging
        [pageSize]="10"
        [pageIndex]="1"> <!-- Shows the second page -->
    </dxo-paging>
    <dxo-pager>

    </dxo-pager>
    <dxo-pager
        [showInfo]="true"
        infoText="Page #{0}. Total: {1} ({2} items)"
        [showPageSizeSelector]="true"
        [allowedPageSizes]="[10, 20, 50, 100]"
        [showNavigationButtons]="true">
    </dxo-pager>



</dx-data-grid>

мой файл TS:

ngOnInit(){

        this.columns = [
            {
                dataField: "Id",
                caption:'Idxx',
                allowEditing: false,
                alignment:"left",
                allowHeaderFiltering : false,
                selectedFilterOperation:"contains",
                editorOptions :{
                    showClearButton :true
                }

            },
            {
                dataField: "Name",
                allowEditing: true,
                editorOptions :{
                    showClearButton :true
                }
            },
            {
                dataField: "Description",
                allowEditing: true,
                editorOptions :{
                    showClearButton :true
                }
            },
            {
                dataField: "CreatedBy",
                allowEditing: true,
                editorOptions :{
                    showClearButton :true
                }
            }
        ]
}

особенно ищет заманчивый подход. если есть демо, это спасет мой день !!

Заранее спасибо.