Css datatable + plot responsive

client/src/app/instance/search/components/result/datatable-tab.component.html

@@ -9,38 +9,42 @@
             </span>
         </button>
         <div class="row">
-            <div class="col-5" *ngIf="coneSearch">
+            <div class="col-md-5" *ngIf="coneSearch">
                 <app-cone-search-plot *ngIf="dataIsLoaded"
                     [coneSearch]="coneSearch"
                     [data]="getData()">
                 </app-cone-search-plot>
             </div>
-            <div class="col">
-                <app-datatable-actions 
-                    [selectedData]="selectedData"
-                    [datasetSelected]="datasetSelected"
-                    [datasetList]="datasetList"
-                    [sampRegistered]="sampRegistered"
-                    (broadcast)="broadcast.emit($event)"
-                    (startTaskCreateResult)="startTaskCreateResult.emit($event)"
-                    (startTaskCreateArchive)="startTaskCreateArchive.emit($event)">
-                </app-datatable-actions>
-                <app-datatable
-                    [dataset]="datasetList | datasetByName:datasetSelected"
-                    [instance]="instance"
-                    [attributeList]="attributeList"
-                    [outputList]="outputList"
-                    [queryParams]="queryParams"
-                    [dataLength]="dataLength"
-                    [data]="data"
-                    [dataIsLoading]="dataIsLoading"
-                    [dataIsLoaded]="dataIsLoaded"
-                    [selectedData]="selectedData"
-                    (retrieveData)="retrieveData.emit($event)"
-                    (addSelectedData)="addSelectedData.emit($event)"
-                    (deleteSelectedData)="deleteSelectedData.emit($event)"
-                    (downloadFile)="downloadFile.emit($event)">
-                </app-datatable>
+            <div class="datatable-group" [ngClass]="{'col': !coneSearch, 'col-md-7' : coneSearch }">
+                <div class="row">
+                    <div class="col">
+                        <app-datatable-actions 
+                            [selectedData]="selectedData"
+                            [datasetSelected]="datasetSelected"
+                            [datasetList]="datasetList"
+                            [sampRegistered]="sampRegistered"
+                            (broadcast)="broadcast.emit($event)"
+                            (startTaskCreateResult)="startTaskCreateResult.emit($event)"
+                            (startTaskCreateArchive)="startTaskCreateArchive.emit($event)">
+                        </app-datatable-actions>
+                        <app-datatable
+                            [dataset]="datasetList | datasetByName:datasetSelected"
+                            [instance]="instance"
+                            [attributeList]="attributeList"
+                            [outputList]="outputList"
+                            [queryParams]="queryParams"
+                            [dataLength]="dataLength"
+                            [data]="data"
+                            [dataIsLoading]="dataIsLoading"
+                            [dataIsLoaded]="dataIsLoaded"
+                            [selectedData]="selectedData"
+                            (retrieveData)="retrieveData.emit($event)"
+                            (addSelectedData)="addSelectedData.emit($event)"
+                            (deleteSelectedData)="deleteSelectedData.emit($event)"
+                            (downloadFile)="downloadFile.emit($event)">
+                        </app-datatable>
+                    </div>
+                </div>
             </div>
         </div>
     </accordion-group>

client/src/app/instance/search/components/result/datatable-tab.component.scss

+.datatable-group > .row {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+.datatable-group > .row > .col {
+    display: inline-block;
+    float: none;
+}
\ No newline at end of file

client/src/app/instance/search/components/result/datatable-tab.component.ts

@@ -19,6 +19,7 @@ import { Pagination, SearchQueryParams, Criterion, ConeSearch } from 'src/app/in
 @Component({
     selector: 'app-datatable-tab',
     templateUrl: 'datatable-tab.component.html',
+    styleUrls: [ 'datatable-tab.component.scss' ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DatatableTabComponent {

client/src/app/instance/search/components/result/datatable.component.html

 <app-spinner *ngIf="(dataIsLoading)"></app-spinner>
 
-<div *ngIf="(dataIsLoaded)" class="table-responsive">
+<div *ngIf="(dataIsLoaded)">
     <table class="table table-bordered table-hover" aria-describedby="List of results">
         <thead>
             <tr>