diff --git a/SHERPA.BBM.UI/Components/DataPager.razor b/SHERPA.BBM.UI/Components/DataPager.razor
new file mode 100644
index 0000000..d486fd7
--- /dev/null
+++ b/SHERPA.BBM.UI/Components/DataPager.razor
@@ -0,0 +1,21 @@
+<div class="input-group ">
+    <input @bind-value="numRecord" @bind-value:event="oninput" type="text" class="form-control" />
+    <div class="input-group-append">
+        <button @onclick="reportChange" class="btn btn-success input-group-text"># record</button>
+        @*<span class="input-group-text"># record</span>*@
+    </div>
+</div>
+
+@code {
+
+    [Parameter]
+    public int numRecord { get; set; } = 10;
+
+    [Parameter]
+    public EventCallback<int> numRecordChanged { get; set; }
+
+    private async Task reportChange()
+    {
+        await numRecordChanged.InvokeAsync(numRecord);
+    }
+}
\ No newline at end of file