Add pagination view and fixed scroll issue

less/TableStyles/queryBuilder.less

@@ -534,6 +534,29 @@ input::-webkit-inner-spin-button {
   margin-bottom: 5px;
 }
 
+.query-document-detail-list {
+  max-height: 180px;
+  overflow-x: hidden;
+}
+.query-table-clause-container {
+  max-height: 80px;
+  overflow: scroll;
+  overflow-x: hidden;
+}
+.query-tab-document-pagination {
+  margin-top: 18px;
+}
+.pagination > li > div {
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  margin-left: -1px;
+  line-height: 1.42857143;
+  text-decoration: none;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
 /*
 @media only screen and (max-width: 1200px) {
     .clause-table {

src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx

@@ -66,6 +66,7 @@ export interface IQueryTablesTabComponentStates {
   isLoading: boolean;
   queryErrorMessage: string;
   hasQueryError: boolean;
+  currentPage: number;
 }
 
 export interface IQueryTableRowsType {

src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx

@@ -62,6 +62,8 @@ export interface Button {
   isSelected?: boolean;
 }
 
+const dummyQueryDocumentsPages = [1, 2, 3];
+
 class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, IQueryTablesTabComponentStates> {
   public collection: ViewModels.Collection;
   public _queryViewModel: QueryViewModel;
@@ -189,6 +191,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       isLoading: true,
       queryErrorMessage: "",
       hasQueryError: false,
+      currentPage: 0,
     };
 
     this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab;
@@ -724,9 +727,15 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     this.setState({ queryTableRows: cloneQueryTableRows });
   };
 
+  private handlePagination = (pageNo: number): void => {
+    // eslint-disable-next-line no-console
+    console.log("pagination", pageNo);
+    this.setState({ currentPage: pageNo });
+  };
+
   render(): JSX.Element {
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
-    const { queryTableRows } = this.state;
+    const { queryTableRows, currentPage } = this.state;
     return (
       <div className="tab-pane tableContainer" id={this.props.tabsBaseInstance.tabId} role="tabpanel">
         <div className="query-builder">
@@ -791,7 +800,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
                     </thead>
                   </table>
                 </div>
-                <>
+                <div className="query-table-clause-container">
                   {queryTableRows.map((queryTableRow, index) => (
                     <QueryTableEntityClause
                       index={index}
@@ -818,7 +827,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
                       }
                     />
                   ))}
-                </>
+                </div>
                 <div className="addClause" role="button" onClick={this.onAddNewClause} tabIndex={0}>
                   <div className="addClause-heading">
                     <span className="clause-table addClause-title">
@@ -910,16 +919,32 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
         <div className="tablesQueryTab tableContainer">
           {this.state.isLoading && <Spinner size={SpinnerSize.large} className="spinner" />}
           {this.state.items.length > 0 && !this.state.isLoading && (
-            <DetailsList
+            <>
-              items={this.state.items}
+              <DetailsList
-              columns={this.state.columns}
+                className="query-document-detail-list"
-              selectionMode={SelectionMode.single}
+                items={this.state.items}
-              layoutMode={DetailsListLayoutMode.justified}
+                columns={this.state.columns}
-              compact={true}
+                selectionMode={SelectionMode.single}
-              selection={this.state.selection}
+                layoutMode={DetailsListLayoutMode.justified}
-              selectionPreservedOnEmptyClick={true}
+                compact={true}
-              checkboxVisibility={CheckboxVisibility.always}
+                selection={this.state.selection}
-            />
+                selectionPreservedOnEmptyClick={true}
+                checkboxVisibility={CheckboxVisibility.always}
+              />
+              <ul className="pagination query-tab-document-pagination">
+                <li>
+                  <div onClick={() => this.handlePagination(currentPage - 1)}>Previous</div>
+                </li>
+                {dummyQueryDocumentsPages.map((pageNo) => (
+                  <li key={pageNo} onClick={() => this.handlePagination(pageNo)}>
+                    <div>{pageNo}</div>
+                  </li>
+                ))}
+                <li>
+                  <div onClick={() => this.handlePagination(currentPage + 1)}>Next</div>
+                </li>
+              </ul>
+            </>
           )}
           {this.state.items.length === 0 && !this.state.isLoading && (
             <Text variant="mediumPlus">No data available in table</Text>