diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
index 4ff07e575c..39b980ea12 100644
--- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
+++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -19,16 +19,31 @@ beforeEach(() => {
   )
   cy.intercept(
     'GET',
-    '/geoserver/insee/ows?REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=true&LAYERS=rectangles_200m_menage_erbm*',
+    '/geoserver/insee/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&OUTPUTFORMAT=application%2Fjson&PROPERTYNAME=oid%2Cidk%2Cmen%2Cmen_occ5%2Cpt_men_occ5&COUNT=10&SRSNAME=EPSG%3A4326',
     {
-      fixture: 'insee-rectangles_200m_menage_erbm.png',
+      fixture: 'insee-wfs-table-data.json',
     }
   )
+  //Note: The real WFS of this example responds with an error to this request due to a missing primary key in the table
   cy.intercept(
     'GET',
-    '/geoserver/insee/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&OUTPUTFORMAT=application%2Fjson*',
+    'geoserver/insee/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&OUTPUTFORMAT=application%2Fjson&PROPERTYNAME=oid%2Cidk%2Cmen%2Cmen_occ5%2Cpt_men_occ5&COUNT=10&SRSNAME=EPSG%3A4326&STARTINDEX=10',
     {
-      fixture: 'insee-rectangles_200m_menage_erbm.json',
+      fixture: 'insee-wfs-table-data-page2.json',
+    }
+  )
+  cy.intercept(
+    'GET',
+    'geoserver/insee/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&OUTPUTFORMAT=application%2Fjson&PROPERTYNAME=oid%2Cidk%2Cmen%2Cmen_occ5%2Cpt_men_occ5&COUNT=10&SRSNAME=EPSG%3A4326&SORTBY=idk+D',
+    {
+      fixture: 'insee-wfs-table-data-sort-idk.json',
+    }
+  )
+  cy.intercept(
+    'GET',
+    '/geoserver/insee/ows?REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=true&LAYERS=rectangles_200m_menage_erbm*',
+    {
+      fixture: 'insee-rectangles_200m_menage_erbm.png',
     }
   )
   cy.intercept(
@@ -389,19 +404,19 @@ describe('dataset pages', () => {
 
         cy.get('@previewSection').find('gn-ui-map-legend').should('be.visible')
       })
-      it('should display the table', () => {
+      it('should display the table with 10 rows', () => {
         cy.get('@previewSection')
           .find('.mat-mdc-tab-labels')
           .children('div')
           .eq(1)
           .click()
-        cy.get('@previewSection').find('gn-ui-table').should('be.visible')
+        cy.get('@previewSection').find('gn-ui-data-table').should('be.visible')
         cy.get('@previewSection')
-          .find('gn-ui-table')
+          .find('gn-ui-data-table')
           .find('table')
           .find('tbody')
           .children('tr')
-          .should('have.length.gt', 0)
+          .should('have.length', 10)
         cy.screenshot({ capture: 'fullPage' })
       })
       it('should display the chart & dropdowns', () => {
@@ -441,16 +456,53 @@ describe('dataset pages', () => {
         })
         cy.get('@previewSection').find('gn-ui-feature-detail')
       })
-      it('TABLE : should scroll', () => {
-        cy.get('@previewSection')
-          .find('.mat-mdc-tab-labels')
-          .children('div')
-          .eq(1)
-          .click()
-        cy.get('@previewSection').find('gn-ui-table').find('table').as('table')
-        cy.get('@table').scrollTo('bottom', { ensureScrollable: false })
+      describe('TABLE', () => {
+        beforeEach(() => {
+          cy.get('@previewSection')
+            .find('.mat-mdc-tab-labels')
+            .children('div')
+            .eq(1)
+            .click()
+          cy.get('@previewSection')
+            .find('gn-ui-data-table')
+            .find('table')
+            .as('table')
+        })
 
-        cy.get('@table').find('tr:last-child').should('be.visible')
+        it('TABLE sort: should sort the table on column click', () => {
+          cy.get('@table').find('th').eq(1).click()
+          cy.get('@table')
+            .find('td')
+            .eq(1)
+            .invoke('text')
+            .then((firstValue) => {
+              cy.get('@table').find('th').eq(1).click()
+              cy.get('@table')
+                .find('td')
+                .eq(1)
+                .invoke('text')
+                .should('not.eq', firstValue)
+            })
+        })
+        it('TABLE pagination: should display 10 rows with different data when clicking next page', () => {
+          cy.get('@previewSection').find('mat-paginator').as('pagination')
+          cy.get('@table')
+            .find('td')
+            .eq(1)
+            .invoke('text')
+            .then((firstValue) => {
+              cy.get('@pagination').find('button').eq(2).click()
+              cy.get('@table')
+                .find('td')
+                .eq(1)
+                .invoke('text')
+                .should('not.eq', firstValue)
+              cy.get('@table')
+                .find('tbody')
+                .children('tr')
+                .should('have.length', 10)
+            })
+        })
       })
       it('CHART : should change the chart on options change', () => {
         cy.get('@previewSection')
diff --git a/apps/datahub-e2e/src/fixtures/insee-rectangles_200m_menage_erbm.json b/apps/datahub-e2e/src/fixtures/insee-rectangles_200m_menage_erbm.json
deleted file mode 100644
index 599d230d06..0000000000
--- a/apps/datahub-e2e/src/fixtures/insee-rectangles_200m_menage_erbm.json
+++ /dev/null
@@ -1,527 +0,0 @@
-{
-  "type": "FeatureCollection",
-  "features": [
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-149a",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.450004, 48.822945],
-              [3.474431, 48.824379],
-              [3.473251, 48.833334],
-              [3.448819, 48.831899],
-              [3.450004, 48.822945]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 1,
-        "idk": "N14390E19203-N14394E19211",
-        "men": 19,
-        "men_occ5": 12,
-        "pt_men_occ5": 63.1578947368421
-      },
-      "bbox": [3.448819, 48.822945, 3.474431, 48.833334]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1499",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.451297, 48.83385],
-              [3.462156, 48.834488],
-              [3.460263, 48.848815],
-              [3.449401, 48.848177],
-              [3.451297, 48.83385]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 2,
-        "idk": "N14396E19204-N14403E19207",
-        "men": 17,
-        "men_occ5": 13,
-        "pt_men_occ5": 76.47058823529412
-      },
-      "bbox": [3.449401, 48.83385, 3.462156, 48.848815]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1498",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.473015, 48.835125],
-              [3.489303, 48.836079],
-              [3.48789, 48.846825],
-              [3.471598, 48.845871],
-              [3.473015, 48.835125]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 3,
-        "idk": "N14396E19212-N14401E19217",
-        "men": 14,
-        "men_occ5": 8,
-        "pt_men_occ5": 57.14285714285714
-      },
-      "bbox": [3.471598, 48.835125, 3.489303, 48.846825]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1497",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.49285, 48.850725],
-              [3.500997, 48.851202],
-              [3.499821, 48.860155],
-              [3.491672, 48.85968],
-              [3.49285, 48.850725]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 4,
-        "idk": "N14404E19220-N14408E19222",
-        "men": 22,
-        "men_occ5": 11,
-        "pt_men_occ5": 50
-      },
-      "bbox": [3.491672, 48.850725, 3.500997, 48.860155]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1496",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.430156, 48.848848],
-              [3.446449, 48.849808],
-              [3.4455, 48.856972],
-              [3.429205, 48.856011],
-              [3.430156, 48.848848]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 5,
-        "idk": "N14405E19197-N14408E19202",
-        "men": 18,
-        "men_occ5": 10,
-        "pt_men_occ5": 55.55555555555556
-      },
-      "bbox": [3.429205, 48.848848, 3.446449, 48.856972]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1495",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.451169, 48.8555],
-              [3.467464, 48.856457],
-              [3.466281, 48.865412],
-              [3.449983, 48.864455],
-              [3.451169, 48.8555]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 6,
-        "idk": "N14408E19205-N14412E19210",
-        "men": 19,
-        "men_occ5": 11,
-        "pt_men_occ5": 57.89473684210527
-      },
-      "bbox": [3.449983, 48.8555, 3.467464, 48.865412]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1494",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.401809, 48.856196],
-              [3.423535, 48.857482],
-              [3.420439, 48.880762],
-              [3.398702, 48.879475],
-              [3.401809, 48.856196]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 7,
-        "idk": "N14410E19187-N14422E19194",
-        "men": 21,
-        "men_occ5": 13,
-        "pt_men_occ5": 61.904761904761905
-      },
-      "bbox": [3.398702, 48.856196, 3.423535, 48.880762]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1493",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.466991, 48.860039],
-              [3.483288, 48.860994],
-              [3.48258, 48.866367],
-              [3.466281, 48.865412],
-              [3.466991, 48.860039]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 8,
-        "idk": "N14410E19211-N14412E19216",
-        "men": 13,
-        "men_occ5": 7,
-        "pt_men_occ5": 53.84615384615385
-      },
-      "bbox": [3.466281, 48.860039, 3.483288, 48.866367]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1492",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.379843, 48.856696],
-              [3.387991, 48.85718],
-              [3.385836, 48.873297],
-              [3.377686, 48.872813],
-              [3.379843, 48.856696]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 9,
-        "idk": "N14411E19179-N14419E19181",
-        "men": 18,
-        "men_occ5": 9,
-        "pt_men_occ5": 50
-      },
-      "bbox": [3.377686, 48.856696, 3.387991, 48.873297]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1491",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.444551, 48.864135],
-              [3.463565, 48.865253],
-              [3.462855, 48.870625],
-              [3.443838, 48.869508],
-              [3.444551, 48.864135]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 10,
-        "idk": "N14413E19203-N14415E19209",
-        "men": 11,
-        "men_occ5": 9,
-        "pt_men_occ5": 81.81818181818183
-      },
-      "bbox": [3.443838, 48.864135, 3.463565, 48.870625]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1490",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.463565, 48.865253],
-              [3.496162, 48.867161],
-              [3.493806, 48.885071],
-              [3.461197, 48.883162],
-              [3.463565, 48.865253]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 11,
-        "idk": "N14413E19210-N14422E19221",
-        "men": 36,
-        "men_occ5": 22,
-        "pt_men_occ5": 61.111111111111114
-      },
-      "bbox": [3.461197, 48.865253, 3.496162, 48.885071]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-148f",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.422583, 48.864645],
-              [3.444313, 48.865926],
-              [3.441463, 48.887416],
-              [3.419723, 48.886134],
-              [3.422583, 48.864645]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 12,
-        "idk": "N14414E19195-N14425E19202",
-        "men": 19,
-        "men_occ5": 9,
-        "pt_men_occ5": 47.368421052631575
-      },
-      "bbox": [3.419723, 48.864645, 3.444313, 48.887416]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-148e",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.387033, 48.864343],
-              [3.389749, 48.864504],
-              [3.388552, 48.873458],
-              [3.385836, 48.873297],
-              [3.387033, 48.864343]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 13,
-        "idk": "N14415E19182-N14419E19182",
-        "men": 14,
-        "men_occ5": 3,
-        "pt_men_occ5": 21.428571428571427
-      },
-      "bbox": [3.385836, 48.864343, 3.389749, 48.873458]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-148d",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.389749, 48.864504],
-              [3.397898, 48.864988],
-              [3.396463, 48.875732],
-              [3.388313, 48.875249],
-              [3.389749, 48.864504]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 14,
-        "idk": "N14415E19183-N14420E19185",
-        "men": 15,
-        "men_occ5": 2,
-        "pt_men_occ5": 13.333333333333334
-      },
-      "bbox": [3.388313, 48.864504, 3.397898, 48.875732]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-148c",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.498408, 48.870901],
-              [3.531011, 48.872801],
-              [3.530074, 48.879965],
-              [3.497466, 48.878065],
-              [3.498408, 48.870901]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 15,
-        "idk": "N14415E19223-N14418E19234",
-        "men": 20,
-        "men_occ5": 15,
-        "pt_men_occ5": 75
-      },
-      "bbox": [3.497466, 48.870901, 3.531011, 48.879965]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-148b",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.443838, 48.869508],
-              [3.449272, 48.869827],
-              [3.448322, 48.876991],
-              [3.442888, 48.876671],
-              [3.443838, 48.869508]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 16,
-        "idk": "N14416E19203-N14419E19204",
-        "men": 16,
-        "men_occ5": 11,
-        "pt_men_occ5": 68.75
-      },
-      "bbox": [3.442888, 48.869508, 3.449272, 48.876991]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-148a",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.529839, 48.881756],
-              [3.573321, 48.884272],
-              [3.570524, 48.905765],
-              [3.527025, 48.903247],
-              [3.529839, 48.881756]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 17,
-        "idk": "N14420E19235-N14431E19250",
-        "men": 31,
-        "men_occ5": 25,
-        "pt_men_occ5": 80.64516129032258
-      },
-      "bbox": [3.527025, 48.881756, 3.573321, 48.905765]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1489",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.388313, 48.875249],
-              [3.39103, 48.87541],
-              [3.389833, 48.884364],
-              [3.387115, 48.884202],
-              [3.388313, 48.875249]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 18,
-        "idk": "N14421E19183-N14425E19183",
-        "men": 12,
-        "men_occ5": 8,
-        "pt_men_occ5": 66.66666666666666
-      },
-      "bbox": [3.387115, 48.875249, 3.39103, 48.884364]
-    },
-    {
-      "type": "Feature",
-      "id": "rectangles_200m_menage_erbm.fid-3b922062_1899695b6ff_-1488",
-      "geometry": {
-        "type": "MultiPolygon",
-        "coordinates": [
-          [
-            [
-              [3.494278, 48.881489],
-              [3.499713, 48.881806],
-              [3.499242, 48.885388],
-              [3.493806, 48.885071],
-              [3.494278, 48.881489]
-            ]
-          ]
-        ]
-      },
-      "geometry_name": "geometry",
-      "properties": {
-        "oid": 19,
-        "idk": "N14421E19222-N14422E19223",
-        "men": 20,
-        "men_occ5": 10,
-        "pt_men_occ5": 50
-      },
-      "bbox": [3.493806, 48.881489, 3.499713, 48.885388]
-    }
-  ],
-  "totalFeatures": 63172,
-  "numberMatched": 63172,
-  "numberReturned": 100,
-  "timeStamp": "2023-07-27T09:03:13.044Z",
-  "crs": {
-    "type": "name",
-    "properties": { "name": "urn:ogc:def:crs:EPSG::4326" }
-  },
-  "bbox": [3.250891, 48.822945, 3.652429, 49.0148]
-}
diff --git a/apps/datahub-e2e/src/fixtures/insee-wfs-table-data-page2.json b/apps/datahub-e2e/src/fixtures/insee-wfs-table-data-page2.json
new file mode 100644
index 0000000000..4005792388
--- /dev/null
+++ b/apps/datahub-e2e/src/fixtures/insee-wfs-table-data-page2.json
@@ -0,0 +1,154 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-7071",
+      "geometry": null,
+      "properties": {
+        "oid": 11,
+        "idk": "N14413E19210-N14422E19221",
+        "men": 36,
+        "men_occ5": 22,
+        "pt_men_occ5": 61.111111111111114
+      },
+      "bbox": [3.461197, 48.865253, 3.496162, 48.885071]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-7070",
+      "geometry": null,
+      "properties": {
+        "oid": 12,
+        "idk": "N14414E19195-N14425E19202",
+        "men": 19,
+        "men_occ5": 9,
+        "pt_men_occ5": 47.368421052631575
+      },
+      "bbox": [3.419723, 48.864645, 3.444313, 48.887416]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-706f",
+      "geometry": null,
+      "properties": {
+        "oid": 13,
+        "idk": "N14415E19182-N14419E19182",
+        "men": 14,
+        "men_occ5": 3,
+        "pt_men_occ5": 21.428571428571427
+      },
+      "bbox": [3.385836, 48.864343, 3.389749, 48.873458]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-706e",
+      "geometry": null,
+      "properties": {
+        "oid": 14,
+        "idk": "N14415E19183-N14420E19185",
+        "men": 15,
+        "men_occ5": 2,
+        "pt_men_occ5": 13.333333333333334
+      },
+      "bbox": [3.388313, 48.864504, 3.397898, 48.875732]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-706d",
+      "geometry": null,
+      "properties": {
+        "oid": 15,
+        "idk": "N14415E19223-N14418E19234",
+        "men": 20,
+        "men_occ5": 15,
+        "pt_men_occ5": 75
+      },
+      "bbox": [3.497466, 48.870901, 3.531011, 48.879965]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-706c",
+      "geometry": null,
+      "properties": {
+        "oid": 16,
+        "idk": "N14416E19203-N14419E19204",
+        "men": 16,
+        "men_occ5": 11,
+        "pt_men_occ5": 68.75
+      },
+      "bbox": [3.442888, 48.869508, 3.449272, 48.876991]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-706b",
+      "geometry": null,
+      "properties": {
+        "oid": 17,
+        "idk": "N14420E19235-N14431E19250",
+        "men": 31,
+        "men_occ5": 25,
+        "pt_men_occ5": 80.64516129032258
+      },
+      "bbox": [3.527025, 48.881756, 3.573321, 48.905765]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-706a",
+      "geometry": null,
+      "properties": {
+        "oid": 18,
+        "idk": "N14421E19183-N14425E19183",
+        "men": 12,
+        "men_occ5": 8,
+        "pt_men_occ5": 66.66666666666666
+      },
+      "bbox": [3.387115, 48.875249, 3.39103, 48.884364]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-7069",
+      "geometry": null,
+      "properties": {
+        "oid": 19,
+        "idk": "N14421E19222-N14422E19223",
+        "men": 20,
+        "men_occ5": 10,
+        "pt_men_occ5": 50
+      },
+      "bbox": [3.493806, 48.881489, 3.499713, 48.885388]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--43bcf198_19538c12328_-7068",
+      "geometry": null,
+      "properties": {
+        "oid": 20,
+        "idk": "N14421E19230-N14423E19234",
+        "men": 25,
+        "men_occ5": 20,
+        "pt_men_occ5": 80
+      },
+      "bbox": [3.515312, 48.882757, 3.529605, 48.88892]
+    }
+  ],
+  "totalFeatures": 63172,
+  "numberMatched": 63172,
+  "numberReturned": 10,
+  "timeStamp": "2025-02-24T16:28:27.050Z",
+  "links": [
+    {
+      "title": "previous page",
+      "type": "application/json",
+      "rel": "previous",
+      "href": "https://www.geo2france.fr/geoserver/insee/wfs?PROPERTYNAME=oid%2Cidk%2Cmen%2Cmen_occ5%2Cpt_men_occ5&REQUEST=GetFeature&SORTBY=oid%20A&SRSNAME=EPSG%3A4326&OUTPUTFORMAT=application%2Fjson&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&COUNT=10&SERVICE=WFS&STARTINDEX=0"
+    },
+    {
+      "title": "next page",
+      "type": "application/json",
+      "rel": "next",
+      "href": "https://www.geo2france.fr/geoserver/insee/wfs?PROPERTYNAME=oid%2Cidk%2Cmen%2Cmen_occ5%2Cpt_men_occ5&REQUEST=GetFeature&SORTBY=oid%20A&SRSNAME=EPSG%3A4326&OUTPUTFORMAT=application%2Fjson&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&COUNT=10&SERVICE=WFS&STARTINDEX=20"
+    }
+  ],
+  "crs": null
+}
diff --git a/apps/datahub-e2e/src/fixtures/insee-wfs-table-data-sort-idk.json b/apps/datahub-e2e/src/fixtures/insee-wfs-table-data-sort-idk.json
new file mode 100644
index 0000000000..78ac977161
--- /dev/null
+++ b/apps/datahub-e2e/src/fixtures/insee-wfs-table-data-sort-idk.json
@@ -0,0 +1,140 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-4035",
+      "geometry": null,
+      "properties": {
+        "oid": 63172,
+        "idk": "N15673E18990-N15673E18991",
+        "men": 23,
+        "men_occ5": 12,
+        "pt_men_occ5": 52.17391304347826
+      },
+      "bbox": [2.521293, 51.081592, 2.527267, 51.083746]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-4034",
+      "geometry": null,
+      "properties": {
+        "oid": 63171,
+        "idk": "N15672E18990-N15672E18990",
+        "men": 18,
+        "men_occ5": 12,
+        "pt_men_occ5": 66.66666666666666
+      },
+      "bbox": [2.521583, 51.079805, 2.524715, 51.081775]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-4033",
+      "geometry": null,
+      "properties": {
+        "oid": 63170,
+        "idk": "N15672E18989-N15672E18989",
+        "men": 79,
+        "men_occ5": 35,
+        "pt_men_occ5": 44.303797468354425
+      },
+      "bbox": [2.518742, 51.079621, 2.521874, 51.081592]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-4032",
+      "geometry": null,
+      "properties": {
+        "oid": 63169,
+        "idk": "N15672E18987-N15672E18988",
+        "men": 53,
+        "men_occ5": 18,
+        "pt_men_occ5": 33.9622641509434
+      },
+      "bbox": [2.513059, 51.079254, 2.519032, 51.081408]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-4031",
+      "geometry": null,
+      "properties": {
+        "oid": 63168,
+        "idk": "N15671E18989-N15671E18989",
+        "men": 40,
+        "men_occ5": 22,
+        "pt_men_occ5": 55.00000000000001
+      },
+      "bbox": [2.519032, 51.077834, 2.522164, 51.079805]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-4030",
+      "geometry": null,
+      "properties": {
+        "oid": 63167,
+        "idk": "N15671E18988-N15671E18988",
+        "men": 52,
+        "men_occ5": 30,
+        "pt_men_occ5": 57.692307692307686
+      },
+      "bbox": [2.516191, 51.077651, 2.519322, 51.079621]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-402f",
+      "geometry": null,
+      "properties": {
+        "oid": 63166,
+        "idk": "N15671E18987-N15671E18987",
+        "men": 62,
+        "men_occ5": 36,
+        "pt_men_occ5": 58.06451612903226
+      },
+      "bbox": [2.513349, 51.077467, 2.516481, 51.079438]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-402e",
+      "geometry": null,
+      "properties": {
+        "oid": 63165,
+        "idk": "N15671E18986-N15671E18986",
+        "men": 47,
+        "men_occ5": 28,
+        "pt_men_occ5": 59.57446808510638
+      },
+      "bbox": [2.510508, 51.077283, 2.51364, 51.079254]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-402d",
+      "geometry": null,
+      "properties": {
+        "oid": 63164,
+        "idk": "N15671E18985-N15671E18985",
+        "men": 58,
+        "men_occ5": 31,
+        "pt_men_occ5": 53.44827586206896
+      },
+      "bbox": [2.507666, 51.077099, 2.510798, 51.07907]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid-1f2964e7_19538e63fd0_-402c",
+      "geometry": null,
+      "properties": {
+        "oid": 63163,
+        "idk": "N15671E18984-N15671E18984",
+        "men": 18,
+        "men_occ5": 7,
+        "pt_men_occ5": 38.88888888888889
+      },
+      "bbox": [2.504825, 51.076915, 2.507957, 51.078886]
+    }
+  ],
+  "totalFeatures": 63172,
+  "numberMatched": 63172,
+  "numberReturned": 10,
+  "timeStamp": "2025-02-24T17:04:31.460Z",
+  "crs": null
+}
diff --git a/apps/datahub-e2e/src/fixtures/insee-wfs-table-data.json b/apps/datahub-e2e/src/fixtures/insee-wfs-table-data.json
new file mode 100644
index 0000000000..11e1812863
--- /dev/null
+++ b/apps/datahub-e2e/src/fixtures/insee-wfs-table-data.json
@@ -0,0 +1,140 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d1f",
+      "geometry": null,
+      "properties": {
+        "oid": 1,
+        "idk": "N14390E19203-N14394E19211",
+        "men": 19,
+        "men_occ5": 12,
+        "pt_men_occ5": 63.1578947368421
+      },
+      "bbox": [3.448819, 48.822945, 3.474431, 48.833334]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d1e",
+      "geometry": null,
+      "properties": {
+        "oid": 2,
+        "idk": "N14396E19204-N14403E19207",
+        "men": 17,
+        "men_occ5": 13,
+        "pt_men_occ5": 76.47058823529412
+      },
+      "bbox": [3.449401, 48.83385, 3.462156, 48.848815]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d1d",
+      "geometry": null,
+      "properties": {
+        "oid": 3,
+        "idk": "N14396E19212-N14401E19217",
+        "men": 14,
+        "men_occ5": 8,
+        "pt_men_occ5": 57.14285714285714
+      },
+      "bbox": [3.471598, 48.835125, 3.489303, 48.846825]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d1c",
+      "geometry": null,
+      "properties": {
+        "oid": 4,
+        "idk": "N14404E19220-N14408E19222",
+        "men": 22,
+        "men_occ5": 11,
+        "pt_men_occ5": 50
+      },
+      "bbox": [3.491672, 48.850725, 3.500997, 48.860155]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d1b",
+      "geometry": null,
+      "properties": {
+        "oid": 5,
+        "idk": "N14405E19197-N14408E19202",
+        "men": 18,
+        "men_occ5": 10,
+        "pt_men_occ5": 55.55555555555556
+      },
+      "bbox": [3.429205, 48.848848, 3.446449, 48.856972]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d1a",
+      "geometry": null,
+      "properties": {
+        "oid": 6,
+        "idk": "N14408E19205-N14412E19210",
+        "men": 19,
+        "men_occ5": 11,
+        "pt_men_occ5": 57.89473684210527
+      },
+      "bbox": [3.449983, 48.8555, 3.467464, 48.865412]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d19",
+      "geometry": null,
+      "properties": {
+        "oid": 7,
+        "idk": "N14410E19187-N14422E19194",
+        "men": 21,
+        "men_occ5": 13,
+        "pt_men_occ5": 61.904761904761905
+      },
+      "bbox": [3.398702, 48.856196, 3.423535, 48.880762]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d18",
+      "geometry": null,
+      "properties": {
+        "oid": 8,
+        "idk": "N14410E19211-N14412E19216",
+        "men": 13,
+        "men_occ5": 7,
+        "pt_men_occ5": 53.84615384615385
+      },
+      "bbox": [3.466281, 48.860039, 3.483288, 48.866367]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d17",
+      "geometry": null,
+      "properties": {
+        "oid": 9,
+        "idk": "N14411E19179-N14419E19181",
+        "men": 18,
+        "men_occ5": 9,
+        "pt_men_occ5": 50
+      },
+      "bbox": [3.377686, 48.856696, 3.387991, 48.873297]
+    },
+    {
+      "type": "Feature",
+      "id": "rectangles_200m_menage_erbm.fid--1b2dbd23_195385017a1_-1d16",
+      "geometry": null,
+      "properties": {
+        "oid": 10,
+        "idk": "N14413E19203-N14415E19209",
+        "men": 11,
+        "men_occ5": 9,
+        "pt_men_occ5": 81.81818181818183
+      },
+      "bbox": [3.443838, 48.864135, 3.463565, 48.870625]
+    }
+  ],
+  "totalFeatures": 63172,
+  "numberMatched": 63172,
+  "numberReturned": 10,
+  "timeStamp": "2025-02-24T14:25:50.188Z",
+  "crs": null
+}
diff --git a/apps/datahub/src/app/record/record-data-preview/record-data-preview.component.html b/apps/datahub/src/app/record/record-data-preview/record-data-preview.component.html
index fc5f1fc042..bf0b5ea46e 100644
--- a/apps/datahub/src/app/record/record-data-preview/record-data-preview.component.html
+++ b/apps/datahub/src/app/record/record-data-preview/record-data-preview.component.html
@@ -1,5 +1,5 @@
 <div
-  style="height: 612px"
+  style="height: 652px"
   *ngIf="(displayMap$ | async) || (displayData$ | async)"
   id="preview"
 >
@@ -41,22 +41,7 @@
               <span class="tab-header-label" translate>record.tab.data</span>
             </ng-template>
             <div class="block" *ngIf="displayData$ | async">
-              <ng-container
-                *ngIf="exceedsMaxFeatureCount$ | async; else tableView"
-              >
-                <gn-ui-popup-alert
-                  type="warning"
-                  icon="matErrorOutlineOutline"
-                  class="block h-12 p-1"
-                >
-                  <span translate [translateParams]="{ count: maxFeatureCount }"
-                    >record.feature.limit</span
-                  >
-                </gn-ui-popup-alert>
-              </ng-container>
-              <ng-template #tableView>
-                <gn-ui-data-view mode="table"></gn-ui-data-view>
-              </ng-template>
+              <gn-ui-data-view mode="table"></gn-ui-data-view>
             </div>
           </mat-tab>
           <mat-tab [disabled]="(displayData$ | async) === false">
diff --git a/apps/datahub/src/app/record/record-data-preview/record-data-preview.component.ts b/apps/datahub/src/app/record/record-data-preview/record-data-preview.component.ts
index dfa5c47cad..320c2ed17e 100644
--- a/apps/datahub/src/app/record/record-data-preview/record-data-preview.component.ts
+++ b/apps/datahub/src/app/record/record-data-preview/record-data-preview.component.ts
@@ -91,10 +91,7 @@ export class RecordDataPreviewComponent {
     map(
       ([displayMap, displayData, selectedView, exceedsMaxFeatureCount]) =>
         (displayData || displayMap) &&
-        !(
-          (selectedView === 'chart' || selectedView === 'table') &&
-          exceedsMaxFeatureCount
-        )
+        !(selectedView === 'chart' && exceedsMaxFeatureCount)
     )
   )
 
diff --git a/docs/developers/i18n.md b/docs/developers/i18n.md
index 7380439e2e..a21e900979 100644
--- a/docs/developers/i18n.md
+++ b/docs/developers/i18n.md
@@ -48,6 +48,7 @@ The rules for showing the translated labels on screen are:
 - use the `| translate` pipe or `translate` directive
 - avoid using instant translation in the code: in case the language is switched dynamically, labels translated that way will not be updated
 - if translation keys are computed dynamically, use the [`marker()`](https://github.com/biesbjerg/ngx-translate-extract-marker) function to declare them beforehand; **translation keys should be discoverable statically by analyzing the source code!**
+- be sure to use separate closing tags as the extraction script may not find them otherwise (eg. `<div></div>` instead of `<div/>`). Even "non-closed" child elements can become an issue here.
 
 When a contribution adds new translated labels, the `npm run i18n:extract` command (which relies on the [`ngx-translate-extract`](https://github.com/biesbjerg/ngx-translate-extract) library) should be run and its results committed separately. English labels should always be provided for new keys as this is the fallback language.
 
diff --git a/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.stories.ts b/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.stories.ts
index 08b9cef6ca..a257ecc1a1 100644
--- a/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.stories.ts
+++ b/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.stories.ts
@@ -7,14 +7,14 @@ import {
 } from '@storybook/angular'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { FigureContainerComponent } from './figure-container.component'
-import {
-  someHabTableItemFixture,
-  tableItemFixture,
-  UiDatavizModule,
-} from '@geonetwork-ui/ui/dataviz'
+import { UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
 import { importProvidersFrom } from '@angular/core'
 import { TRANSLATE_DEFAULT_CONFIG } from '@geonetwork-ui/util/i18n'
 import { TranslateModule } from '@ngx-translate/core'
+import {
+  someFigureItemFixture,
+  someHabFigureItemFixture,
+} from '../figure.fixtures'
 
 export default {
   title: 'Dataviz/FigureContainerComponent',
@@ -46,7 +46,7 @@ export const Sum: Story = {
     icon: 'maps_home_work',
     unit: 'hab.',
     expression: 'sum|pop',
-    dataset: someHabTableItemFixture(),
+    dataset: someHabFigureItemFixture(),
   },
 }
 
@@ -57,6 +57,6 @@ export const Average: Story = {
     unit: 'years old',
     expression: 'average|age',
     digits: 3,
-    dataset: tableItemFixture(),
+    dataset: someFigureItemFixture(),
   },
 }
diff --git a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.html b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.html
index c1ef589599..a062e40227 100644
--- a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.html
+++ b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.html
@@ -1,11 +1,11 @@
 <div class="flex flex-row h-full overflow-auto">
-  <gn-ui-table
+  <gn-ui-data-table
     #table
     class="w-1/2 overflow-auto"
-    [data]="tableData"
+    [dataset]="dataset"
     [activeId]="selectionId"
     (selected)="onTableSelect($event)"
-  ></gn-ui-table>
+  ></gn-ui-data-table>
   <gn-ui-map-container
     #mapContainer
     class="w-1/2 h-full"
diff --git a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts
index 197d04ecb0..aeaec894a2 100644
--- a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts
+++ b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts
@@ -4,7 +4,9 @@ import { pointFeatureCollectionFixture } from '@geonetwork-ui/common/fixtures'
 import { GeoTableViewComponent } from './geo-table-view.component'
 import { MockBuilder } from 'ng-mocks'
 
-describe('GeoTableViewComponent', () => {
+// FIXME: these tests should be restored once there is a possibility to clone
+// a Reader (from the data-fetcher); currently the component is broken
+describe.skip('GeoTableViewComponent', () => {
   let component: GeoTableViewComponent
   let fixture: ComponentFixture<GeoTableViewComponent>
 
diff --git a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.stories.ts b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.stories.ts
index 3f0a28b94c..6867d3e3c7 100644
--- a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.stories.ts
+++ b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.stories.ts
@@ -8,27 +8,22 @@ import {
 } from '@storybook/angular'
 import { GeoTableViewComponent } from './geo-table-view.component'
 import { importProvidersFrom } from '@angular/core'
-import {
-  FeatureDetailComponent,
-  MapContainerComponent,
-} from '@geonetwork-ui/ui/map'
 import { pointFeatureCollectionFixture } from '@geonetwork-ui/common/fixtures'
-import { TableComponent } from '@geonetwork-ui/ui/dataviz'
 import { HttpClientModule } from '@angular/common/http'
 import { TRANSLATE_DEFAULT_CONFIG } from '@geonetwork-ui/util/i18n'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import {
+  BaseFileReader,
+  DataItem,
+  PropertyInfo,
+} from '@geonetwork-ui/data-fetcher'
 
 export default {
   title: 'Map/GeoTable',
   component: GeoTableViewComponent,
   decorators: [
     moduleMetadata({
-      imports: [
-        FeatureDetailComponent,
-        MapContainerComponent,
-        TableComponent,
-        BrowserAnimationsModule,
-      ],
+      imports: [BrowserAnimationsModule],
     }),
     applicationConfig({
       providers: [
@@ -42,8 +37,22 @@ export default {
   ],
 } as Meta<GeoTableViewComponent>
 
+export class MockBaseReader extends BaseFileReader {
+  override getData(): Promise<{
+    items: DataItem[]
+    properties: PropertyInfo[]
+  }> {
+    return Promise.resolve({
+      items: pointFeatureCollectionFixture().features,
+      properties: [],
+    })
+  }
+}
+const reader = new MockBaseReader('')
+reader.load()
+
 export const Primary: StoryObj<GeoTableViewComponent> = {
   args: {
-    data: pointFeatureCollectionFixture(),
+    dataset: reader,
   },
 }
diff --git a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts
index 360df24de4..82b452a0ab 100644
--- a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts
+++ b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts
@@ -8,7 +8,7 @@ import {
   ViewChild,
 } from '@angular/core'
 import {
-  TableComponent,
+  DataTableComponent,
   TableItemId,
   TableItemModel,
 } from '@geonetwork-ui/ui/dataviz'
@@ -19,18 +19,19 @@ import {
   FeatureDetailComponent,
   MapContainerComponent,
 } from '@geonetwork-ui/ui/map'
+import { BaseReader } from '@geonetwork-ui/data-fetcher'
 
 @Component({
   selector: 'gn-ui-geo-table-view',
   templateUrl: './geo-table-view.component.html',
   styleUrls: ['./geo-table-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TableComponent, MapContainerComponent, FeatureDetailComponent],
+  imports: [MapContainerComponent, FeatureDetailComponent, DataTableComponent],
   standalone: true,
 })
 export class GeoTableViewComponent implements OnInit, OnDestroy {
-  @Input() data: FeatureCollection = { type: 'FeatureCollection', features: [] }
-  @ViewChild('table') uiTable: TableComponent
+  @Input() dataset: BaseReader
+  @ViewChild('table') uiTable: DataTableComponent
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   tableData: TableItemModel[]
@@ -39,21 +40,16 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
   selection: Feature
   private subscription = new Subscription()
 
-  get features() {
-    return this.data.features
-  }
-
   constructor(private changeRef: ChangeDetectorRef) {}
 
-  ngOnInit(): void {
-    this.tableData = this.geojsonToTableData(this.data)
-    this.mapContext = this.initMapContext()
+  async ngOnInit() {
+    this.mapContext = await this.initMapContext()
   }
 
   onTableSelect(tableEntry: TableItemModel) {
     const { id } = tableEntry
     this.selectionId = id
-    this.selection = this.getFeatureFromId(id)
+    // this.selection = this.getFeatureFromId(id)
     if (this.selection) {
       this.animateToFeature(this.selection)
     }
@@ -77,7 +73,8 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
     }))
   }
 
-  private initMapContext(): MapContext {
+  private async initMapContext(): Promise<MapContext> {
+    this.dataset.selectAll()
     return {
       layers: [
         {
@@ -86,7 +83,11 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
         },
         {
           type: 'geojson',
-          data: this.data,
+          data: {
+            type: 'FeatureCollection',
+            // FIXME: we're not getting geojson here
+            features: await this.dataset.read(),
+          },
         },
       ],
       view: {
@@ -112,7 +113,8 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
   }
 
   private getFeatureFromId(id: TableItemId) {
-    return this.features.find((feature) => feature.id === id)
+    // FIXME: restore this once we need it?
+    // return this.features.find((feature) => feature.id === id)
   }
 
   ngOnDestroy(): void {
diff --git a/libs/feature/dataviz/src/lib/table-view/table-view.component.html b/libs/feature/dataviz/src/lib/table-view/table-view.component.html
index 736016d62a..1d6a5f73ec 100644
--- a/libs/feature/dataviz/src/lib/table-view/table-view.component.html
+++ b/libs/feature/dataviz/src/lib/table-view/table-view.component.html
@@ -1,10 +1,11 @@
 <div class="w-full h-full flex flex-col">
   <div class="relative h-full">
-    <gn-ui-table
+    <gn-ui-data-table
+      *ngIf="tableData$ | async as dataset"
       class="overflow-auto grow"
-      [data]="tableData$ | async"
+      [dataset]="dataset"
       (selected)="onTableSelect($event)"
-    ></gn-ui-table>
+    ></gn-ui-data-table>
     <gn-ui-loading-mask
       *ngIf="loading"
       class="absolute inset-0"
diff --git a/libs/feature/dataviz/src/lib/table-view/table-view.component.spec.ts b/libs/feature/dataviz/src/lib/table-view/table-view.component.spec.ts
index 708e0aeb9b..628cb3d484 100644
--- a/libs/feature/dataviz/src/lib/table-view/table-view.component.spec.ts
+++ b/libs/feature/dataviz/src/lib/table-view/table-view.component.spec.ts
@@ -7,7 +7,7 @@ import {
   tick,
 } from '@angular/core/testing'
 import { TableViewComponent } from './table-view.component'
-import { of, throwError } from 'rxjs'
+import { delay, firstValueFrom, of, throwError } from 'rxjs'
 import { ChangeDetectionStrategy, importProvidersFrom } from '@angular/core'
 import { By } from '@angular/platform-browser'
 import { DataService } from '../service/data.service'
@@ -16,23 +16,33 @@ import { FetchError } from '@geonetwork-ui/data-fetcher'
 import { MockBuilder } from 'ng-mocks'
 import { TranslateModule } from '@ngx-translate/core'
 import { LoadingMaskComponent } from '@geonetwork-ui/ui/widgets'
-import { TableComponent } from '@geonetwork-ui/ui/dataviz'
+import { DataTableComponent } from '@geonetwork-ui/ui/dataviz'
 
-const SAMPLE_DATA_ITEMS = [
+const SAMPLE_DATA_ITEMS_CSV = [
   { type: 'Feature', properties: { id: 1 } },
   { type: 'Feature', properties: { id: 2 } },
 ]
-const SAMPLE_TABLE_DATA = [{ id: 1 }, { id: 2 }]
+const SAMPLE_DATA_ITEMS_GEOJSON = [
+  { type: 'Feature', properties: { id: 3 } },
+  { type: 'Feature', properties: { id: 4 } },
+]
 
-class DatasetReaderMock {
-  read = jest.fn(() => Promise.resolve(SAMPLE_DATA_ITEMS))
+class DatasetCsvReaderMock {
+  read = jest.fn(() => Promise.resolve(SAMPLE_DATA_ITEMS_CSV))
+}
+class DatasetGeoJsonReaderMock {
+  read = jest.fn(() => Promise.resolve(SAMPLE_DATA_ITEMS_GEOJSON))
 }
 class DataServiceMock {
-  getDataset = jest.fn(({ url }) =>
-    url.toString().indexOf('error') > -1
-      ? throwError(() => new FetchError('unknown', 'data loading error'))
-      : of(new DatasetReaderMock())
-  )
+  getDataset = jest.fn(({ url }) => {
+    if (url.toString().indexOf('error') > -1) {
+      return throwError(() => new FetchError('unknown', 'data loading error'))
+    } else if (url.toString().indexOf('csv') > -1) {
+      return of(new DatasetCsvReaderMock()).pipe(delay(100))
+    } else {
+      return of(new DatasetGeoJsonReaderMock()).pipe(delay(100))
+    }
+  })
 }
 
 describe('TableViewComponent', () => {
@@ -71,7 +81,7 @@ describe('TableViewComponent', () => {
   })
 
   describe('initial state', () => {
-    let tableComponent: TableComponent
+    let tableComponent: DataTableComponent
 
     it('loads the data from the first available link', () => {
       expect(dataService.getDataset).toHaveBeenCalledWith(
@@ -79,6 +89,17 @@ describe('TableViewComponent', () => {
       )
     })
 
+    describe('when link is not defined', () => {
+      beforeEach(() => {
+        component.link = null
+        fixture.detectChanges()
+      })
+      it('sets tableData undefined', async () => {
+        const tableData = await firstValueFrom(component.tableData$)
+        expect(tableData).toBeUndefined()
+      })
+    })
+
     describe('during data loading', () => {
       beforeEach(fakeAsync(() => {
         component.link = aSetOfLinksFixture().dataCsv()
@@ -96,21 +117,28 @@ describe('TableViewComponent', () => {
     describe('when data is loaded', () => {
       beforeEach(fakeAsync(() => {
         component.link = aSetOfLinksFixture().dataCsv()
+        tick(500)
         fixture.detectChanges()
         flushMicrotasks()
         tableComponent = fixture.debugElement.query(
-          By.directive(TableComponent)
+          By.directive(DataTableComponent)
         ).componentInstance
         fixture.detectChanges()
       }))
 
-      it('displays mocked data in the table', () => {
-        expect(tableComponent.data).toEqual(SAMPLE_TABLE_DATA)
+      it('passes dataset reader to table', () => {
+        expect(tableComponent.dataset).toBeInstanceOf(DatasetCsvReaderMock)
+      })
+
+      it('displays data in the table', async () => {
+        const data = await tableComponent.dataset.read()
+        expect(data).toEqual(SAMPLE_DATA_ITEMS_CSV)
       })
 
       describe('when switching data link', () => {
         beforeEach(fakeAsync(() => {
           component.link = aSetOfLinksFixture().geodataJson()
+          tick(500)
           flushMicrotasks()
           fixture.detectChanges()
         }))
@@ -120,7 +148,13 @@ describe('TableViewComponent', () => {
           )
         })
         it('displays mocked data in the table', () => {
-          expect(tableComponent.data).toEqual(SAMPLE_TABLE_DATA)
+          expect(tableComponent.dataset).toBeInstanceOf(
+            DatasetGeoJsonReaderMock
+          )
+        })
+        it('displays data in the table', async () => {
+          const data = await tableComponent.dataset.read()
+          expect(data).toEqual(SAMPLE_DATA_ITEMS_GEOJSON)
         })
       })
     })
diff --git a/libs/feature/dataviz/src/lib/table-view/table-view.component.stories.ts b/libs/feature/dataviz/src/lib/table-view/table-view.component.stories.ts
index 78feec5feb..6e693c689c 100644
--- a/libs/feature/dataviz/src/lib/table-view/table-view.component.stories.ts
+++ b/libs/feature/dataviz/src/lib/table-view/table-view.component.stories.ts
@@ -10,7 +10,7 @@ import {
   StoryObj,
 } from '@storybook/angular'
 import { TableViewComponent } from './table-view.component'
-import { TableComponent, UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
+import { DataTableComponent, UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
 import { importProvidersFrom } from '@angular/core'
 
 export default {
@@ -19,7 +19,7 @@ export default {
   decorators: [
     moduleMetadata({
       imports: [
-        TableComponent,
+        DataTableComponent,
         TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG),
       ],
     }),
diff --git a/libs/feature/dataviz/src/lib/table-view/table-view.component.ts b/libs/feature/dataviz/src/lib/table-view/table-view.component.ts
index cc483bf561..e21ff57af4 100644
--- a/libs/feature/dataviz/src/lib/table-view/table-view.component.ts
+++ b/libs/feature/dataviz/src/lib/table-view/table-view.component.ts
@@ -3,14 +3,13 @@ import { BehaviorSubject, Observable, of } from 'rxjs'
 import {
   catchError,
   finalize,
-  map,
   shareReplay,
   startWith,
   switchMap,
 } from 'rxjs/operators'
-import { DataItem, FetchError } from '@geonetwork-ui/data-fetcher'
+import { BaseReader, FetchError } from '@geonetwork-ui/data-fetcher'
 import { DataService } from '../service/data.service'
-import { TableComponent, TableItemModel } from '@geonetwork-ui/ui/dataviz'
+import { DataTableComponent } from '@geonetwork-ui/ui/dataviz'
 import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import {
@@ -26,7 +25,7 @@ import { CommonModule } from '@angular/common'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
-    TableComponent,
+    DataTableComponent,
     LoadingMaskComponent,
     PopupAlertComponent,
     TranslateModule,
@@ -45,25 +44,19 @@ export class TableViewComponent {
   tableData$ = this.currentLink$.pipe(
     switchMap((link) => {
       this.error = null
-      if (!link) return of([] as TableItemModel[])
+      if (!link) return of(undefined)
       this.loading = true
-      return this.fetchData(link).pipe(
-        map((items) =>
-          items.map((item) => ({
-            id: item.id,
-            ...item.properties,
-          }))
-        ),
+      return this.getDatasetReader(link).pipe(
         catchError((error) => {
           this.handleError(error)
-          return of([] as TableItemModel[])
+          return of(undefined)
         }),
         finalize(() => {
           this.loading = false
         })
       )
     }),
-    startWith([] as TableItemModel[]),
+    startWith(undefined),
     shareReplay(1)
   )
 
@@ -72,10 +65,8 @@ export class TableViewComponent {
     private translateService: TranslateService
   ) {}
 
-  fetchData(link: DatasetOnlineResource): Observable<DataItem[]> {
-    return this.dataService
-      .getDataset(link)
-      .pipe(switchMap((dataset) => dataset.read()))
+  getDatasetReader(link: DatasetOnlineResource): Observable<BaseReader> {
+    return this.dataService.getDataset(link)
   }
 
   onTableSelect(event) {
diff --git a/libs/feature/record/src/lib/data-view/data-view.component.html b/libs/feature/record/src/lib/data-view/data-view.component.html
index 24c4d40850..16cdb3272a 100644
--- a/libs/feature/record/src/lib/data-view/data-view.component.html
+++ b/libs/feature/record/src/lib/data-view/data-view.component.html
@@ -8,7 +8,7 @@
     [choices]="choices"
     (selectValue)="selectLink($event)"
   ></gn-ui-dropdown-selector>
-  <div class="relative h-[420px]">
+  <div class="relative h-[460px]">
     <gn-ui-table-view
       *ngIf="mode === 'table'"
       [link]="selectedLink$ | async"
diff --git a/libs/feature/record/src/lib/feature-record.module.ts b/libs/feature/record/src/lib/feature-record.module.ts
index fe3b17004d..e7df5f5901 100644
--- a/libs/feature/record/src/lib/feature-record.module.ts
+++ b/libs/feature/record/src/lib/feature-record.module.ts
@@ -4,7 +4,10 @@ import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
 import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
 import { FeatureMapModule } from '@geonetwork-ui/feature/map'
-import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
+import {
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '@geonetwork-ui/ui/inputs'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
@@ -16,9 +19,8 @@ import { MatTabsModule } from '@angular/material/tabs'
 import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { TranslateModule } from '@ngx-translate/core'
 import { FeatureCatalogModule } from '@geonetwork-ui/feature/catalog'
-import { TableComponent } from '@geonetwork-ui/ui/dataviz'
+import { DataTableComponent } from '@geonetwork-ui/ui/dataviz'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
-import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
 
 @NgModule({
   imports: [
@@ -33,7 +35,7 @@ import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
     MatTabsModule,
     UiWidgetsModule,
     TranslateModule,
-    TableComponent,
+    DataTableComponent,
     NgIconsModule,
     DropdownSelectorComponent,
   ],
diff --git a/libs/ui/dataviz/src/index.ts b/libs/ui/dataviz/src/index.ts
index 7cd9e8a884..b9f292e016 100644
--- a/libs/ui/dataviz/src/index.ts
+++ b/libs/ui/dataviz/src/index.ts
@@ -1,5 +1,5 @@
 export * from './lib/ui-dataviz.module'
 export * from './lib/chart/chart.component'
-export * from './lib/table/table.component'
-export * from './lib/table/table.fixtures'
+export * from './lib/data-table/data-table.component'
+export * from './lib/data-table/data-table.fixtures'
 export * from './lib/figure/figure.component'
diff --git a/libs/ui/dataviz/src/lib/data-table/custom.mat.paginator.intl.ts b/libs/ui/dataviz/src/lib/data-table/custom.mat.paginator.intl.ts
new file mode 100644
index 0000000000..df01aec18d
--- /dev/null
+++ b/libs/ui/dataviz/src/lib/data-table/custom.mat.paginator.intl.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core'
+import { MatPaginatorIntl } from '@angular/material/paginator'
+import { TranslateService } from '@ngx-translate/core'
+import { Subject } from 'rxjs'
+
+@Injectable()
+export class CustomMatPaginatorIntl extends MatPaginatorIntl {
+  override changes = new Subject<void>()
+
+  constructor(private translate: TranslateService) {
+    super()
+    this.setLabels()
+    this.translate.onLangChange.subscribe(() => {
+      this.setLabels()
+      this.changes.next()
+    })
+  }
+
+  setLabels() {
+    this.itemsPerPageLabel = this.translate.instant(
+      'table.paginator.itemsPerPage'
+    )
+    this.nextPageLabel = this.translate.instant('table.paginator.nextPage')
+    this.previousPageLabel = this.translate.instant(
+      'table.paginator.previousPage'
+    )
+    this.firstPageLabel = this.translate.instant('table.paginator.firstPage')
+    this.lastPageLabel = this.translate.instant('table.paginator.lastPage')
+    this.getRangeLabel = this.getRangeLabelIntl
+    this.changes.next()
+  }
+
+  getRangeLabelIntl(page: number, pageSize: number, length: number): string {
+    if (length === 0 || pageSize === 0) {
+      return this.translate.instant('table.paginator.rangeLabel', {
+        startIndex: 0,
+        endIndex: 0,
+        length,
+      })
+    }
+    const startIndex = page * pageSize
+    const endIndex =
+      startIndex < length
+        ? Math.min(startIndex + pageSize, length)
+        : startIndex + pageSize
+    return this.translate.instant('table.paginator.rangeLabel', {
+      startIndex: startIndex + 1,
+      endIndex,
+      length,
+    })
+  }
+}
diff --git a/libs/ui/dataviz/src/lib/table/table.component.css b/libs/ui/dataviz/src/lib/data-table/data-table.component.css
similarity index 90%
rename from libs/ui/dataviz/src/lib/table/table.component.css
rename to libs/ui/dataviz/src/lib/data-table/data-table.component.css
index 24d7421dc9..dd01428889 100644
--- a/libs/ui/dataviz/src/lib/table/table.component.css
+++ b/libs/ui/dataviz/src/lib/data-table/data-table.component.css
@@ -30,3 +30,7 @@ tr {
 .active .mat-mdc-cell {
   color: var(--color-primary);
 }
+
+.mat-mdc-paginator {
+  background: none;
+}
diff --git a/libs/ui/dataviz/src/lib/data-table/data-table.component.html b/libs/ui/dataviz/src/lib/data-table/data-table.component.html
new file mode 100644
index 0000000000..b1484e43e4
--- /dev/null
+++ b/libs/ui/dataviz/src/lib/data-table/data-table.component.html
@@ -0,0 +1,67 @@
+<div class="flex flex-col border border-gray-300 rounded-lg bg-white h-full">
+  <div class="flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative">
+    <table
+      mat-table
+      [dataSource]="dataSource"
+      matSort
+      (matSortChange)="setSort($event)"
+      [matSortDisableClear]="true"
+      *ngrxLet="properties$ as properties"
+    >
+      <ng-container *ngFor="let prop of properties" [matColumnDef]="prop">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          mat-sort-header
+          class="text-sm text-black bg-white"
+        >
+          {{ prop }}
+        </th>
+        <td
+          mat-cell
+          *matCellDef="let element"
+          class="whitespace-nowrap pr-1 truncate"
+        >
+          {{ element[prop] }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="properties; sticky: true"></tr>
+      <tr
+        [id]="getRowEltId(row.id)"
+        mat-row
+        *matRowDef="let row; columns: properties"
+        (click)="selected.emit(row)"
+        [class.active]="row.id === activeId"
+      ></tr>
+    </table>
+    <gn-ui-loading-mask
+      *ngIf="loading$ | async"
+      class="sticky inset-0"
+      [message]="'table.loading.data' | translate"
+    ></gn-ui-loading-mask>
+    <gn-ui-popup-alert
+      *ngIf="error"
+      type="warning"
+      icon="matErrorOutlineOutline"
+      class="absolute m-2 inset-0 z-[100]"
+    >
+      <span translate>{{ error }}</span>
+    </gn-ui-popup-alert>
+  </div>
+  <div class="flex justify-between items-center overflow-hidden">
+    <div class="text-gray-900 px-4 py-2 text-sm">
+      <span class="count font-extrabold text-primary">{{ count }}</span
+      >&nbsp;<span translate>table.object.count</span>.
+    </div>
+
+    <mat-paginator
+      class="my-[-16px]"
+      (page)="setPagination()"
+      [length]="count"
+      [pageSize]="10"
+      [showFirstLastButtons]="true"
+      [hidePageSize]="true"
+    ></mat-paginator>
+  </div>
+</div>
diff --git a/libs/ui/dataviz/src/lib/data-table/data-table.component.spec.ts b/libs/ui/dataviz/src/lib/data-table/data-table.component.spec.ts
new file mode 100644
index 0000000000..505c91f524
--- /dev/null
+++ b/libs/ui/dataviz/src/lib/data-table/data-table.component.spec.ts
@@ -0,0 +1,201 @@
+import { ChangeDetectionStrategy } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { MatSort, MatSortModule } from '@angular/material/sort'
+import { MatTableModule } from '@angular/material/table'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import {
+  someHabTableItemFixture,
+  tableItemsFixture,
+} from './data-table.fixtures'
+import { DataTableComponent } from './data-table.component'
+import { By } from '@angular/platform-browser'
+import { TableItemSizeDirective } from 'ng-table-virtual-scroll'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  BaseFileReader,
+  DataItem,
+  PropertyInfo,
+  DatasetInfo,
+} from '@geonetwork-ui/data-fetcher'
+import { firstValueFrom } from 'rxjs'
+
+const ITEMS_COUNT = 153
+export class MockBaseReader extends BaseFileReader {
+  data: {
+    items: DataItem[]
+    properties: PropertyInfo[]
+  }
+  constructor(data: { items: DataItem[]; properties: PropertyInfo[] }) {
+    super('')
+    this.data = data
+  }
+  override getData(): Promise<{
+    items: DataItem[]
+    properties: PropertyInfo[]
+  }> {
+    return Promise.resolve(this.data)
+  }
+  override get info(): Promise<DatasetInfo> {
+    return Promise.resolve({ itemsCount: ITEMS_COUNT })
+  }
+}
+
+describe('DataTableComponent', () => {
+  let component: DataTableComponent
+  let fixture: ComponentFixture<DataTableComponent>
+  let dataset: MockBaseReader
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        MatTableModule,
+        MatSortModule,
+        TranslateModule.forRoot(),
+      ],
+      declarations: [TableItemSizeDirective],
+    })
+      .overrideComponent(DataTableComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataTableComponent)
+    component = fixture.componentInstance
+    dataset = new MockBaseReader(tableItemsFixture)
+    component.dataset = dataset
+  })
+
+  it('should create', () => {
+    fixture.detectChanges()
+    expect(component).toBeTruthy()
+  })
+
+  it('computes data properties', async () => {
+    fixture.detectChanges()
+    const properties = await firstValueFrom(component.properties$)
+    expect(properties).toEqual(['id', 'firstName', 'lastName'])
+  })
+
+  it('displays the amount of objects in the dataset', () => {
+    fixture.detectChanges()
+    const countEl = fixture.debugElement.query(By.css('.count')).nativeElement
+    expect(countEl.textContent).toEqual(ITEMS_COUNT.toString())
+  })
+
+  describe('input data change', () => {
+    let previousDataSource
+    beforeEach(() => {
+      previousDataSource = component.dataSource
+      component.dataset = new MockBaseReader(someHabTableItemFixture)
+      fixture.detectChanges()
+    })
+    it('updates the internal data source', () => {
+      expect(component.dataSource).not.toBe(previousDataSource)
+    })
+    it('recomputes the data properties', async () => {
+      const properties = await firstValueFrom(component.properties$)
+      expect(properties).toEqual(['id', 'name', 'pop'])
+    })
+  })
+
+  describe('pagination', () => {
+    beforeEach(() => {
+      jest.spyOn(dataset, 'limit')
+      fixture.detectChanges()
+    })
+    it('sets the page size on the reader', () => {
+      expect(dataset.limit).toHaveBeenCalledWith(0, 10)
+    })
+    it('calls reader.limit initially', () => {
+      expect(dataset.limit).toHaveBeenCalledWith(0, 10)
+    })
+    it('compute the correct amount of pages', () => {
+      expect(component.count).toEqual(ITEMS_COUNT)
+    })
+    it('calls reader.limit when pagination changes', () => {
+      component.paginator.pageIndex = 3
+      component.paginator.pageSize = 10
+      component.setPagination()
+      expect(dataset.limit).toHaveBeenCalledWith(30, 10)
+    })
+  })
+
+  describe('sorting', () => {
+    beforeEach(() => {
+      jest.spyOn(dataset, 'orderBy')
+      fixture.detectChanges()
+    })
+    it('do not set an order initially', () => {
+      expect(dataset.orderBy).not.toHaveBeenCalled()
+    })
+    it('calls reader.orderBy on pagination change', () => {
+      component.setSort({ active: 'id', direction: 'asc' } as MatSort)
+      expect(dataset.orderBy).toHaveBeenCalledWith(['asc', 'id'])
+    })
+  })
+
+  describe('loading state', () => {
+    function getSpinner() {
+      return fixture.debugElement.query(By.css('gn-ui-loading-mask'))
+    }
+    let propsResolver
+    let dataResolver
+    beforeEach(() => {
+      fixture.detectChanges()
+      jest
+        .spyOn(dataset, 'properties', 'get')
+        .mockReturnValue(new Promise((resolver) => (propsResolver = resolver)))
+      jest
+        .spyOn(dataset, 'read')
+        .mockImplementation(
+          () => new Promise((resolver) => (dataResolver = resolver))
+        )
+    })
+    it('displays a loading spinner initially until properties and data are loaded', async () => {
+      expect(getSpinner()).toBeTruthy()
+      propsResolver([])
+      dataResolver([])
+      await Promise.resolve() // wait for promises in readData to finish
+      fixture.detectChanges()
+      expect(getSpinner()).toBeFalsy()
+    })
+    it('displays a loading spinner while the data is loading', async () => {
+      propsResolver([])
+      dataResolver([])
+      await Promise.resolve() // wait for promises in readData to finish
+      fixture.detectChanges()
+      expect(getSpinner()).toBeFalsy()
+
+      component.paginator.pageIndex = 3
+      component.setPagination()
+      await Promise.resolve() // wait for promises in readData to finish
+      fixture.detectChanges()
+      expect(getSpinner()).toBeTruthy()
+
+      dataResolver([])
+      await Promise.resolve() // wait for promises in readData to finish
+      fixture.detectChanges()
+      expect(getSpinner()).toBeFalsy()
+    })
+  })
+  describe('error handling', () => {
+    beforeEach(() => {
+      component.ngOnInit()
+      jest.spyOn(component, 'handleError')
+      jest.spyOn(component.dataSource, 'clearData')
+      jest
+        .spyOn(dataset, 'read')
+        .mockImplementation(() => Promise.reject(new Error('Test Error')))
+    })
+    it('should set component.error if reader ancounters an error', async () => {
+      await component.readData()
+      expect(component.handleError).toHaveBeenCalledWith(
+        new Error('Test Error')
+      )
+      expect(component.error).toEqual('Test Error')
+    })
+  })
+})
diff --git a/libs/ui/dataviz/src/lib/data-table/data-table.component.stories.ts b/libs/ui/dataviz/src/lib/data-table/data-table.component.stories.ts
new file mode 100644
index 0000000000..4e829e293a
--- /dev/null
+++ b/libs/ui/dataviz/src/lib/data-table/data-table.component.stories.ts
@@ -0,0 +1,94 @@
+import { HttpClientModule } from '@angular/common/http'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  applicationConfig,
+  componentWrapperDecorator,
+  Meta,
+  StoryObj,
+} from '@storybook/angular'
+import {
+  TRANSLATE_DEFAULT_CONFIG,
+  UtilI18nModule,
+} from '@geonetwork-ui/util/i18n'
+import { DataTableComponent } from './data-table.component'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { UiDatavizModule } from '../ui-dataviz.module'
+import { importProvidersFrom } from '@angular/core'
+import { tableItemsFixture } from './data-table.fixtures'
+import {
+  BaseFileReader,
+  DataItem,
+  openDataset,
+  PropertyInfo,
+} from '@geonetwork-ui/data-fetcher'
+
+export default {
+  title: 'Dataviz/DataTableComponent',
+  component: DataTableComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom(UiDatavizModule),
+        importProvidersFrom(BrowserAnimationsModule),
+        importProvidersFrom(HttpClientModule),
+        importProvidersFrom(UtilI18nModule),
+        importProvidersFrom(TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG)),
+      ],
+    }),
+    componentWrapperDecorator(
+      (story) =>
+        `<div class="border border-gray-300 h-[500px] w-[800px] p-[10px] overflow-auto resize">${story}</div>`
+    ),
+  ],
+} as Meta<DataTableComponent>
+
+export class MockBaseReader extends BaseFileReader {
+  override getData(): Promise<{
+    items: DataItem[]
+    properties: PropertyInfo[]
+  }> {
+    return Promise.resolve(tableItemsFixture)
+  }
+}
+const reader = new MockBaseReader('')
+
+export const Primary: StoryObj<DataTableComponent> = {
+  args: {
+    dataset: reader,
+  },
+}
+
+export const WithGeojson: StoryObj<DataTableComponent> = {
+  loaders: [
+    async () => ({
+      dataset: await openDataset(
+        'https://france-geojson.gregoiredavid.fr/repo/departements.geojson',
+        'geojson'
+      ),
+    }),
+  ],
+  render(args, { loaded }) {
+    return {
+      props: loaded,
+    }
+  },
+}
+
+export const WithWfs: StoryObj<DataTableComponent> = {
+  loaders: [
+    async () => ({
+      dataset: await openDataset(
+        'https://www.geo2france.fr/geoserver/cr_hdf/ows',
+        'wfs',
+        {
+          wfsFeatureType: 'accidento_hdf_L93',
+        }
+      ),
+    }),
+  ],
+  render(args, { loaded }) {
+    return {
+      props: loaded,
+    }
+  },
+}
diff --git a/libs/ui/dataviz/src/lib/data-table/data-table.component.ts b/libs/ui/dataviz/src/lib/data-table/data-table.component.ts
new file mode 100644
index 0000000000..b6867e3841
--- /dev/null
+++ b/libs/ui/dataviz/src/lib/data-table/data-table.component.ts
@@ -0,0 +1,173 @@
+import { ScrollingModule } from '@angular/cdk/scrolling'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { MatSort, MatSortModule } from '@angular/material/sort'
+import { MatTableModule } from '@angular/material/table'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DataTableDataSource } from './data-table.data.source'
+import { BaseReader, FetchError } from '@geonetwork-ui/data-fetcher'
+import {
+  MatPaginator,
+  MatPaginatorIntl,
+  MatPaginatorModule,
+} from '@angular/material/paginator'
+import { CustomMatPaginatorIntl } from './custom.mat.paginator.intl'
+import { CommonModule } from '@angular/common'
+import { BehaviorSubject, filter, firstValueFrom } from 'rxjs'
+import {
+  LoadingMaskComponent,
+  PopupAlertComponent,
+} from '@geonetwork-ui/ui/widgets'
+import { LetDirective } from '@ngrx/component'
+
+const rowIdPrefix = 'table-item-'
+
+export type TableItemId = string | number
+type TableItemType = string | number | Date
+
+export interface TableItemModel {
+  id: TableItemId
+  [key: string]: TableItemType
+}
+
+@Component({
+  standalone: true,
+  imports: [
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    ScrollingModule,
+    TranslateModule,
+    CommonModule,
+    LoadingMaskComponent,
+    PopupAlertComponent,
+    LetDirective,
+  ],
+  providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }],
+  selector: 'gn-ui-data-table',
+  templateUrl: './data-table.component.html',
+  styleUrls: ['./data-table.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
+  @Input() set dataset(value: BaseReader) {
+    this.properties$.next(null)
+    this.dataset_ = value
+    this.dataset_.load()
+    this.dataset_.properties.then((properties) =>
+      this.properties$.next(properties.map((p) => p.name))
+    )
+    this.dataset_.info.then((info) => (this.count = info.itemsCount))
+  }
+  @Input() activeId: TableItemId
+  @Output() selected = new EventEmitter<any>()
+
+  @ViewChild(MatSort) sort: MatSort
+  @ViewChild(MatPaginator) paginator: MatPaginator
+
+  dataset_: BaseReader
+  properties$ = new BehaviorSubject<string[]>(null)
+  dataSource: DataTableDataSource
+  headerHeight: number
+  count: number
+  loading$ = new BehaviorSubject<boolean>(false)
+  error = null
+
+  constructor(
+    private eltRef: ElementRef,
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit() {
+    this.dataSource = new DataTableDataSource()
+  }
+
+  ngAfterViewInit() {
+    this.headerHeight =
+      this.eltRef.nativeElement.querySelector('thead').offsetHeight
+    this.setPagination()
+    this.cdr.detectChanges()
+  }
+
+  ngOnChanges() {
+    this.setPagination()
+  }
+
+  setSort(sort: MatSort) {
+    if (!this.dataset_) return
+    if (!sort.active) {
+      this.dataset_.orderBy()
+    } else {
+      this.dataset_.orderBy([sort.direction || 'asc', sort.active])
+    }
+    this.readData()
+  }
+
+  setPagination() {
+    if (!this.paginator) return
+    if (!this.dataset_) return
+    this.dataset_.limit(
+      this.paginator.pageIndex * this.paginator.pageSize,
+      this.paginator.pageSize
+    )
+    this.readData()
+  }
+
+  async readData() {
+    this.loading$.next(true)
+    // wait for properties to be read
+    const properties = await firstValueFrom(
+      this.properties$.pipe(filter((p) => !!p))
+    )
+    const propsWithoutGeom = properties.filter(
+      (p) => !p.toLowerCase().startsWith('geom')
+    )
+    this.dataset_.select(...propsWithoutGeom)
+    try {
+      await this.dataSource.showData(this.dataset_.read())
+      this.error = null
+    } catch (error) {
+      this.handleError(error as FetchError | Error)
+    }
+    this.loading$.next(false)
+  }
+
+  scrollToItem(itemId: TableItemId): void {
+    const row = this.eltRef.nativeElement.querySelector(
+      `#${this.getRowEltId(itemId)}`
+    )
+    this.eltRef.nativeElement.scrollTop = row.offsetTop - this.headerHeight
+  }
+
+  public getRowEltId(id: TableItemId): string {
+    return rowIdPrefix + id
+  }
+
+  handleError(error: FetchError | Error) {
+    this.dataSource.clearData()
+    if (error instanceof FetchError) {
+      this.error = this.translateService.instant(
+        `dataset.error.${error.type}`,
+        {
+          info: error.info,
+        }
+      )
+      console.warn(error.message)
+    } else {
+      this.error = this.translateService.instant(error.message)
+      console.warn(error.stack || error)
+    }
+  }
+}
diff --git a/libs/ui/dataviz/src/lib/data-table/data-table.data.source.ts b/libs/ui/dataviz/src/lib/data-table/data-table.data.source.ts
new file mode 100644
index 0000000000..b4b7570c57
--- /dev/null
+++ b/libs/ui/dataviz/src/lib/data-table/data-table.data.source.ts
@@ -0,0 +1,33 @@
+import { DataSource } from '@angular/cdk/collections'
+import { BehaviorSubject, Observable } from 'rxjs'
+import { DataItem } from '@geonetwork-ui/data-fetcher'
+import { map } from 'rxjs/operators'
+import { TableItemModel } from './data-table.component'
+
+export class DataTableDataSource implements DataSource<TableItemModel> {
+  private dataItems$ = new BehaviorSubject<DataItem[]>([])
+
+  connect(): Observable<TableItemModel[]> {
+    return this.dataItems$.asObservable().pipe(
+      map((items) =>
+        items.map((item) => ({
+          id: item.id,
+          ...item.properties,
+        }))
+      )
+    )
+  }
+
+  disconnect(): void {
+    this.dataItems$.complete()
+  }
+
+  async showData(itemsPromise: Promise<DataItem[]>) {
+    const items = await itemsPromise
+    this.dataItems$.next(items)
+  }
+
+  clearData() {
+    this.dataItems$.next([])
+  }
+}
diff --git a/libs/ui/dataviz/src/lib/data-table/data-table.fixtures.ts b/libs/ui/dataviz/src/lib/data-table/data-table.fixtures.ts
new file mode 100644
index 0000000000..31e2cda50a
--- /dev/null
+++ b/libs/ui/dataviz/src/lib/data-table/data-table.fixtures.ts
@@ -0,0 +1,84 @@
+import { DataItem, PropertyInfo } from '@geonetwork-ui/data-fetcher'
+
+export const tableItemsFixture = {
+  items: [
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '0001',
+        firstName: 'John',
+        lastName: 'Lennon',
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '0002',
+        firstName: 'Ozzy',
+        lastName: 'Osbourne',
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '0003',
+        firstName: 'Claude',
+        lastName: 'François',
+      },
+    },
+  ] as DataItem[],
+  properties: [
+    { name: 'id', label: 'id', type: 'string' },
+    { name: 'firstName', label: 'Firstname', type: 'string' },
+    { name: 'lastName', label: 'Lastname', type: 'string' },
+  ] as PropertyInfo[],
+}
+
+export const someHabTableItemFixture = {
+  items: [
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '1',
+        name: 'France',
+        pop: 50500000,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '2',
+        name: 'Italy',
+        pop: 155878789655,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '3',
+        name: 'UK',
+        pop: 31522456,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '4',
+        name: 'US',
+        pop: 3215448888,
+      },
+    },
+  ] as DataItem[],
+  properties: [
+    { name: 'id', label: 'ID', type: 'string' },
+    { name: 'name', label: 'Name', type: 'string' },
+    { name: 'pop', label: 'Population', type: 'number' },
+  ] as PropertyInfo[],
+}
diff --git a/libs/ui/dataviz/src/lib/table/table.component.html b/libs/ui/dataviz/src/lib/table/table.component.html
deleted file mode 100644
index 7e5a6918ad..0000000000
--- a/libs/ui/dataviz/src/lib/table/table.component.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="border border-gray-300 rounded-lg overflow-hidden bg-white h-full">
-  <cdk-virtual-scroll-viewport
-    tvsItemSize="48"
-    headerHeight="56"
-    style="height: calc(100% - 37px)"
-  >
-    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
-      <ng-container *ngFor="let prop of properties" [matColumnDef]="prop">
-        <th
-          mat-header-cell
-          *matHeaderCellDef
-          mat-sort-header
-          class="text-sm text-black bg-white"
-        >
-          {{ prop }}
-        </th>
-        <td
-          mat-cell
-          *matCellDef="let element"
-          class="whitespace-nowrap pr-1 truncate"
-        >
-          {{ element[prop] }}
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="properties; sticky: true"></tr>
-      <tr
-        [id]="getRowEltId(row.id)"
-        mat-row
-        *matRowDef="let row; columns: properties"
-        (click)="selected.emit(row)"
-        [class.active]="row.id === activeId"
-      ></tr>
-    </table>
-  </cdk-virtual-scroll-viewport>
-  <div class="text-gray-900 border-t border-gray-300 px-4 py-2 text-sm">
-    <span class="count font-extrabold text-primary">{{ count }}</span
-    >&nbsp;<span translate>table.object.count</span>.
-  </div>
-</div>
diff --git a/libs/ui/dataviz/src/lib/table/table.component.spec.ts b/libs/ui/dataviz/src/lib/table/table.component.spec.ts
deleted file mode 100644
index 664b982ae7..0000000000
--- a/libs/ui/dataviz/src/lib/table/table.component.spec.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { ChangeDetectionStrategy } from '@angular/core'
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { MatSortModule } from '@angular/material/sort'
-import { MatTableModule } from '@angular/material/table'
-import { NoopAnimationsModule } from '@angular/platform-browser/animations'
-import { someHabTableItemFixture, tableItemFixture } from './table.fixtures'
-import { TableComponent } from './table.component'
-import { By } from '@angular/platform-browser'
-import { TableItemSizeDirective } from 'ng-table-virtual-scroll'
-import { TranslateModule } from '@ngx-translate/core'
-
-describe('TableComponent', () => {
-  let component: TableComponent
-  let fixture: ComponentFixture<TableComponent>
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        NoopAnimationsModule,
-        MatTableModule,
-        MatSortModule,
-        TranslateModule.forRoot(),
-      ],
-      declarations: [TableItemSizeDirective],
-    })
-      .overrideComponent(TableComponent, {
-        set: { changeDetection: ChangeDetectionStrategy.Default },
-      })
-      .compileComponents()
-  })
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TableComponent)
-    component = fixture.componentInstance
-    component.data = tableItemFixture()
-  })
-
-  it('should create', () => {
-    fixture.detectChanges()
-    expect(component).toBeTruthy()
-  })
-
-  it('computes data properties', () => {
-    fixture.detectChanges()
-    expect(component.properties).toEqual(['name', 'id', 'age'])
-  })
-
-  it('displays the amount of objects in the dataset', () => {
-    fixture.detectChanges()
-    const countEl = fixture.debugElement.query(By.css('.count')).nativeElement
-    expect(countEl.textContent).toEqual('3')
-  })
-
-  describe('input data change', () => {
-    let previousDataSource
-    beforeEach(() => {
-      previousDataSource = component.dataSource
-      component.data = someHabTableItemFixture()
-      fixture.detectChanges()
-    })
-    it('updates the internal data source', () => {
-      expect(component.dataSource).not.toBe(previousDataSource)
-    })
-    it('recomputes the data properties', () => {
-      expect(component.properties).toEqual(['name', 'id', 'pop'])
-    })
-  })
-})
diff --git a/libs/ui/dataviz/src/lib/table/table.component.stories.ts b/libs/ui/dataviz/src/lib/table/table.component.stories.ts
deleted file mode 100644
index 7145886238..0000000000
--- a/libs/ui/dataviz/src/lib/table/table.component.stories.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { HttpClientModule } from '@angular/common/http'
-import { TranslateModule } from '@ngx-translate/core'
-import {
-  applicationConfig,
-  componentWrapperDecorator,
-  Meta,
-  StoryObj,
-} from '@storybook/angular'
-import {
-  TRANSLATE_DEFAULT_CONFIG,
-  UtilI18nModule,
-} from '@geonetwork-ui/util/i18n'
-import { TableComponent } from './table.component'
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { UiDatavizModule } from '../ui-dataviz.module'
-import { importProvidersFrom } from '@angular/core'
-
-export default {
-  title: 'Dataviz/TableComponent',
-  component: TableComponent,
-  decorators: [
-    applicationConfig({
-      providers: [
-        importProvidersFrom(UiDatavizModule),
-        importProvidersFrom(BrowserAnimationsModule),
-        importProvidersFrom(HttpClientModule),
-        importProvidersFrom(UtilI18nModule),
-        importProvidersFrom(TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG)),
-      ],
-    }),
-    componentWrapperDecorator(
-      (story) => `<div style="max-width: 700px; height: 400px">${story}</div>`
-    ),
-  ],
-} as Meta<TableComponent>
-
-export const Primary: StoryObj<TableComponent> = {
-  args: {
-    data: [
-      {
-        id: '0001',
-        firstName: 'John',
-        lastName: 'Lennon',
-      },
-      {
-        id: '0002',
-        firstName: 'Ozzy',
-        lastName: 'Osbourne',
-      },
-      {
-        id: '0003',
-        firstName: 'Claude',
-        lastName: 'François',
-      },
-    ],
-  },
-}
diff --git a/libs/ui/dataviz/src/lib/table/table.component.ts b/libs/ui/dataviz/src/lib/table/table.component.ts
deleted file mode 100644
index a7b360ea06..0000000000
--- a/libs/ui/dataviz/src/lib/table/table.component.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { ScrollingModule } from '@angular/cdk/scrolling'
-import { NgForOf } from '@angular/common'
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core'
-import { MatSort, MatSortModule } from '@angular/material/sort'
-import { MatTableModule } from '@angular/material/table'
-import {
-  TableVirtualScrollDataSource,
-  TableVirtualScrollModule,
-} from 'ng-table-virtual-scroll'
-import { TranslateModule } from '@ngx-translate/core'
-
-const rowIdPrefix = 'table-item-'
-
-export type TableItemId = string | number
-type TableItemType = string | number | Date
-
-export interface TableItemModel {
-  id: TableItemId
-  [key: string]: TableItemType
-}
-
-@Component({
-  standalone: true,
-  imports: [
-    MatTableModule,
-    MatSortModule,
-    TableVirtualScrollModule,
-    ScrollingModule,
-    NgForOf,
-    TranslateModule,
-  ],
-  selector: 'gn-ui-table',
-  templateUrl: './table.component.html',
-  styleUrls: ['./table.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TableComponent implements AfterViewInit {
-  @Input() set data(value: TableItemModel[]) {
-    this.dataSource = new TableVirtualScrollDataSource(value)
-    this.dataSource.sort = this.sort
-    this.properties =
-      Array.isArray(value) && value.length ? Object.keys(value[0]) : []
-    this.count = value.length
-  }
-  @Input() activeId: TableItemId
-  @Output() selected = new EventEmitter<any>()
-
-  @ViewChild(MatSort, { static: true }) sort: MatSort
-  properties: string[]
-  dataSource: TableVirtualScrollDataSource<any>
-  headerHeight: number
-  count: number
-
-  constructor(private eltRef: ElementRef) {}
-
-  ngAfterViewInit() {
-    this.headerHeight =
-      this.eltRef.nativeElement.querySelector('thead').offsetHeight
-  }
-
-  scrollToItem(itemId: TableItemId): void {
-    const row = this.eltRef.nativeElement.querySelector(
-      `#${this.getRowEltId(itemId)}`
-    )
-    this.eltRef.nativeElement.scrollTop = row.offsetTop - this.headerHeight
-  }
-
-  public getRowEltId(id: TableItemId): string {
-    return rowIdPrefix + id
-  }
-}
diff --git a/libs/ui/dataviz/src/lib/table/table.fixtures.ts b/libs/ui/dataviz/src/lib/table/table.fixtures.ts
deleted file mode 100644
index 00f276f09f..0000000000
--- a/libs/ui/dataviz/src/lib/table/table.fixtures.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export const tableItemFixture = () => [
-  {
-    name: 'name 1',
-    id: 'id 1',
-    age: 15,
-  },
-  {
-    name: 'name 2',
-    id: 'id 2',
-    age: 10,
-  },
-  {
-    name: 'name 3',
-    id: 'id 3',
-    age: 55,
-  },
-]
-
-export const someHabTableItemFixture = () => [
-  {
-    name: 'France',
-    id: '1',
-    pop: 50500000,
-  },
-  {
-    name: 'Italy',
-    id: '2',
-    pop: 155878789655,
-  },
-  {
-    name: 'UK',
-    id: '3',
-    pop: 31522456,
-  },
-  {
-    name: 'US',
-    id: '4',
-    pop: 3215448888,
-  },
-]
diff --git a/libs/util/data-fetcher/project.json b/libs/util/data-fetcher/project.json
index 95de500b48..22d48a1f6a 100644
--- a/libs/util/data-fetcher/project.json
+++ b/libs/util/data-fetcher/project.json
@@ -3,7 +3,7 @@
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "libs/util/data-fetcher/src",
   "projectType": "library",
-  "tags": ["type:util"],
+  "tags": ["type:util", "scope:shared"],
   "targets": {
     "build": {
       "executor": "@nx/js:tsc",
diff --git a/libs/util/data-fetcher/src/index.ts b/libs/util/data-fetcher/src/index.ts
index deef8a82be..975fb02e58 100644
--- a/libs/util/data-fetcher/src/index.ts
+++ b/libs/util/data-fetcher/src/index.ts
@@ -5,6 +5,9 @@ export {
   DataItem,
   FetchError,
   FieldAggregation,
+  PropertyInfo,
 } from './lib/model'
 export { getJsonDataItemsProxy } from './lib/utils'
 export { BaseReader } from './lib/readers/base'
+export { BaseFileReader } from './lib/readers/base-file'
+export { GeojsonReader } from './lib/readers/geojson'
diff --git a/libs/util/data-fetcher/src/lib/model.ts b/libs/util/data-fetcher/src/lib/model.ts
index 1a6831a037..2196ccb314 100644
--- a/libs/util/data-fetcher/src/lib/model.ts
+++ b/libs/util/data-fetcher/src/lib/model.ts
@@ -13,8 +13,12 @@ export class FetchError {
   ) {
     this.message = `An error happened in the data fetcher, type: ${type}, info: ${info}`
   }
-  static http(code: number) {
-    return new FetchError('http', '', code)
+  static http(code: number, body?: string) {
+    const info = body
+      ? `Error ${code}
+${body}`
+      : `${code}`
+    return new FetchError('http', info, code)
   }
   static corsOrNetwork(message: string) {
     return new FetchError('network', message, 0)
diff --git a/libs/util/data-fetcher/src/lib/readers/wfs.spec.ts b/libs/util/data-fetcher/src/lib/readers/wfs.spec.ts
index 09911ede58..7e7bdaefba 100644
--- a/libs/util/data-fetcher/src/lib/readers/wfs.spec.ts
+++ b/libs/util/data-fetcher/src/lib/readers/wfs.spec.ts
@@ -52,8 +52,70 @@ jest.mock('@camptocamp/ogc-client', () => ({
       return `${this.url}?1=1&STARTINDEX=${options.startIndex}&MAXFEATURES=${options.maxFeatures}`
     }
     getFeatureTypeFull() {
+      let properties
+      if (this.url === urlGml) {
+        properties = {
+          boundedBy: 'string',
+          id_map: 'float',
+          id_mat: 'float',
+          code_icpe: 'string',
+          id_parc: 'string',
+          nom_parc: 'string',
+          id_pc: 'string',
+          operateur: 'string',
+          exploitant: 'string',
+          date_crea: 'string',
+          id_eolienn: 'string',
+          x_rgf93: 'float',
+          y_rgf93: 'float',
+          x_pc: 'float',
+          y_pc: 'float',
+          sys_coord: 'string',
+          alt_base: 'integer',
+          n_parcel: 'string',
+          puissanc_2: 'integer',
+          code_com: 'integer',
+          nom_commun: 'string',
+          code_arron: 'integer',
+          departemen: 'string',
+          secteur: 'string',
+          id_sre: 'string',
+          ht_max: 'integer',
+          ht_mat: 'integer',
+          ht_nacelle: 'integer',
+          diam_rotor: 'integer',
+          gardesol: 'number',
+          type_proce: 'string',
+          etat_proce: 'string',
+          date_depot: 'string',
+          date_decis: 'date',
+          contentieu: 'number',
+          etat_mat: 'string',
+          date_real: 'string',
+          date_prod: 'string',
+          en_service: 'string',
+          etat_eolie: 'string',
+          date_maj: 'date',
+          srce_geom: 'string',
+          precis_pos: 'string',
+        }
+      } else {
+        properties = {
+          code_epci: 'integer',
+          code_region: 'string',
+          objectid: 'integer',
+          nom_region: 'string',
+          geo_point_2d: 'string',
+          nom_dep: 'string',
+          st_area_shape: 'float',
+          st_perimeter_shape: 'float',
+          code_dep: 'string',
+          nom_epci: 'string',
+        }
+      }
       return Promise.resolve({
         objectCount: 442,
+        properties,
       })
     }
     supportsJson() {
@@ -100,6 +162,7 @@ describe('WfsReader', () => {
     })
     afterEach(() => {
       fetchMock.reset()
+      jest.clearAllMocks()
     })
     describe('#info', () => {
       it('returns dataset info', async () => {
@@ -201,6 +264,17 @@ describe('WfsReader', () => {
           maxFeatures: 42,
         })
       })
+
+      it('reads data with only certain fields', async () => {
+        const getFeatureUrlSpy = jest.spyOn(wfsEndpoint, 'getFeatureUrl')
+        reader.select('code_dep', 'nom_epci')
+        await reader.read()
+        expect(getFeatureUrlSpy).toHaveBeenCalledWith('epci', {
+          asJson: true,
+          outputCrs: 'EPSG:4326',
+          attributes: ['code_dep', 'nom_epci'],
+        })
+      })
     })
     describe('When adding limits and sorting to the reader', () => {
       it('calls the Wfs api with the right startIndex, maxFeatures and sortby', async () => {
diff --git a/libs/util/data-fetcher/src/lib/readers/wfs.ts b/libs/util/data-fetcher/src/lib/readers/wfs.ts
index 9e344f5576..7ef3df74ad 100644
--- a/libs/util/data-fetcher/src/lib/readers/wfs.ts
+++ b/libs/util/data-fetcher/src/lib/readers/wfs.ts
@@ -4,6 +4,7 @@ import { fetchDataAsText } from '../utils'
 import { BaseReader } from './base'
 import { GmlReader, parseGml } from './gml'
 import { GeojsonReader, parseGeojson } from './geojson'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
 export class WfsReader extends BaseReader {
   endpoint: WfsEndpoint
@@ -18,7 +19,22 @@ export class WfsReader extends BaseReader {
   }
 
   get properties(): Promise<PropertyInfo[]> {
-    return this.getData().then((result) => result.properties)
+    return this.endpoint
+      .getFeatureTypeFull(this.featureTypeName)
+      .then((featureType) =>
+        Object.keys(featureType.properties).map((prop) => {
+          const originalType = featureType.properties[prop]
+          const type =
+            originalType === 'float' || originalType === 'integer'
+              ? 'number'
+              : (originalType as PropertyInfo['type']) // FIXME: ogc-client typing is incorrect, should be a string union
+          return {
+            name: prop,
+            label: prop,
+            type,
+          }
+        })
+      )
   }
 
   get info(): Promise<DatasetInfo> {
@@ -75,12 +91,18 @@ export class WfsReader extends BaseReader {
   }
 
   protected getData() {
+    if (this.aggregations || this.groupedBy) {
+      throw new Error(marker('wfs.aggregations.notsupported'))
+    }
+
     const asJson = this.endpoint.supportsJson(this.featureTypeName)
+    const attributes = this.selected ?? undefined
     let url = this.endpoint.getFeatureUrl(this.featureTypeName, {
       ...(this.startIndex !== null && { startIndex: this.startIndex }),
       ...(this.count !== null && { maxFeatures: this.count }),
       asJson,
       outputCrs: 'EPSG:4326',
+      attributes,
       // sortBy: this.sort // TODO: no sort in ogc-client?
     })
 
diff --git a/libs/util/data-fetcher/src/lib/utils.ts b/libs/util/data-fetcher/src/lib/utils.ts
index 6d6e16cd49..4ef38cc663 100644
--- a/libs/util/data-fetcher/src/lib/utils.ts
+++ b/libs/util/data-fetcher/src/lib/utils.ts
@@ -60,7 +60,7 @@ export function fetchDataAsText(url: string): Promise<string> {
         })
         .then(async (response) => {
           if (!response.ok) {
-            throw FetchError.http(response.status)
+            throw FetchError.http(response.status, await response.text())
           }
           return response.text()
         }),
@@ -77,7 +77,7 @@ export function fetchDataAsArrayBuffer(url: string): Promise<ArrayBuffer> {
         })
         .then(async (response) => {
           if (!response.ok) {
-            throw FetchError.http(response.status)
+            throw FetchError.http(response.status, await response.text())
           }
           // convert to a numeric array so that we can store the response in cache
           return Array.from(new Uint8Array(await response.arrayBuffer()))
diff --git a/translations/de.json b/translations/de.json
index 0f61067168..0d54d1f2d5 100644
--- a/translations/de.json
+++ b/translations/de.json
@@ -589,6 +589,12 @@
   "share.tab.webComponent": "Integrieren",
   "table.loading.data": "Daten werden geladen...",
   "table.object.count": "Objekte in diesem Datensatz",
+  "table.paginator.firstPage": "Erste Seite",
+  "table.paginator.itemsPerPage": "Elemente pro Seite",
+  "table.paginator.lastPage": "Letzte Seite",
+  "table.paginator.nextPage": "Nächste Seite",
+  "table.paginator.previousPage": "Vorherige Seite",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} von {length}",
   "table.select.data": "Datenquelle",
   "tooltip.html.copy": "HTML kopieren",
   "tooltip.id.copy": "Eindeutige Kennung kopieren",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "URL öffnen",
   "ui.readLess": "Weniger lesen",
   "ui.readMore": "Weiterlesen",
+  "wfs.aggregations.notsupported": "",
   "wfs.feature.limit": "Zu viele Features, um den WFS-Layer anzuzeigen!",
   "wfs.featuretype.notfound": "Kein passender Feature-Typ wurde im Dienst gefunden",
   "wfs.geojsongml.notsupported": "Dieser Dienst unterstützt das GeoJSON- oder GML-Format nicht",
diff --git a/translations/en.json b/translations/en.json
index fcc79f6901..4306923813 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -589,6 +589,12 @@
   "share.tab.webComponent": "Integrate",
   "table.loading.data": "Loading data...",
   "table.object.count": "Objects in this dataset",
+  "table.paginator.firstPage": "First page",
+  "table.paginator.itemsPerPage": "Items per page",
+  "table.paginator.lastPage": "Last page",
+  "table.paginator.nextPage": "Next page",
+  "table.paginator.previousPage": "Previous page",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} of {length}",
   "table.select.data": "Data source",
   "tooltip.html.copy": "Copy HTML",
   "tooltip.id.copy": "Copy unique identifier",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "Open URL",
   "ui.readLess": "Read less",
   "ui.readMore": "Read more",
+  "wfs.aggregations.notsupported": "Aggregations are currently not supported for WFS services",
   "wfs.feature.limit": "Too many features to display the WFS layer!",
   "wfs.featuretype.notfound": "No matching feature type was found in the service",
   "wfs.geojsongml.notsupported": "This service does not support the GeoJSON or GML format",
diff --git a/translations/es.json b/translations/es.json
index 169ebb7f30..7f8d8527d8 100644
--- a/translations/es.json
+++ b/translations/es.json
@@ -589,6 +589,12 @@
   "share.tab.webComponent": "",
   "table.loading.data": "",
   "table.object.count": "",
+  "table.paginator.firstPage": "Primera página",
+  "table.paginator.itemsPerPage": "Elementos por página",
+  "table.paginator.lastPage": "Última página",
+  "table.paginator.nextPage": "Página siguiente",
+  "table.paginator.previousPage": "Página anterior",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} de {length}",
   "table.select.data": "",
   "tooltip.html.copy": "",
   "tooltip.id.copy": "",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "",
   "ui.readLess": "",
   "ui.readMore": "",
+  "wfs.aggregations.notsupported": "",
   "wfs.feature.limit": "",
   "wfs.featuretype.notfound": "",
   "wfs.geojsongml.notsupported": "",
diff --git a/translations/fr.json b/translations/fr.json
index 0b22d3068c..2737c193ad 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -589,6 +589,12 @@
   "share.tab.webComponent": "Intégrer",
   "table.loading.data": "Chargement des données...",
   "table.object.count": "enregistrements dans ces données",
+  "table.paginator.firstPage": "Première page",
+  "table.paginator.itemsPerPage": "Éléments par page",
+  "table.paginator.lastPage": "Dernière page",
+  "table.paginator.nextPage": "Page suivante",
+  "table.paginator.previousPage": "Page précédente",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} sur {length}",
   "table.select.data": "Source de données",
   "tooltip.html.copy": "Copier le HTML",
   "tooltip.id.copy": "Copier l'identifiant unique",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "Ouvrir l'URL",
   "ui.readLess": "Réduire",
   "ui.readMore": "Lire la suite",
+  "wfs.aggregations.notsupported": "Agrégations non supportées pour les services WFS",
   "wfs.feature.limit": "Trop d'objets pour afficher la couche WFS !",
   "wfs.featuretype.notfound": "La classe d'objets n'a pas été trouvée dans le service",
   "wfs.geojsongml.notsupported": "Le service ne supporte pas le format GeoJSON ou GML",
diff --git a/translations/it.json b/translations/it.json
index 5d3dbecf05..2b9d750b9c 100644
--- a/translations/it.json
+++ b/translations/it.json
@@ -589,6 +589,12 @@
   "share.tab.webComponent": "Incorporare",
   "table.loading.data": "Caricamento dei dati...",
   "table.object.count": "record in questi dati",
+  "table.paginator.firstPage": "Prima pagina",
+  "table.paginator.itemsPerPage": "Elementi per pagina",
+  "table.paginator.lastPage": "Ultima pagina",
+  "table.paginator.nextPage": "Pagina successiva",
+  "table.paginator.previousPage": "Pagina precedente",
+  "table.paginator.rangeLabel": "{startIndex} - {endIndex} di {total}",
   "table.select.data": "Sorgente dati",
   "tooltip.html.copy": "Copiare il HTML",
   "tooltip.id.copy": "Copiare l'identificatore unico",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "Aprire l'URL",
   "ui.readLess": "Ridurre",
   "ui.readMore": "Leggere di più",
+  "wfs.aggregations.notsupported": "",
   "wfs.feature.limit": "Troppi oggetti per visualizzare il WFS layer!",
   "wfs.featuretype.notfound": "La classe di oggetto non è stata trovata nel servizio",
   "wfs.geojsongml.notsupported": "Il servizio non supporta il formato GeoJSON o GML",
diff --git a/translations/nl.json b/translations/nl.json
index d6e37daa52..6b3abf0110 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -589,6 +589,12 @@
   "share.tab.webComponent": "",
   "table.loading.data": "",
   "table.object.count": "",
+  "table.paginator.firstPage": "",
+  "table.paginator.itemsPerPage": "",
+  "table.paginator.lastPage": "",
+  "table.paginator.nextPage": "",
+  "table.paginator.previousPage": "",
+  "table.paginator.rangeLabel": "",
   "table.select.data": "",
   "tooltip.html.copy": "",
   "tooltip.id.copy": "",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "",
   "ui.readLess": "",
   "ui.readMore": "",
+  "wfs.aggregations.notsupported": "",
   "wfs.feature.limit": "",
   "wfs.featuretype.notfound": "",
   "wfs.geojsongml.notsupported": "",
diff --git a/translations/pt.json b/translations/pt.json
index fd9c57ca4b..2b81de8b3d 100644
--- a/translations/pt.json
+++ b/translations/pt.json
@@ -589,6 +589,12 @@
   "share.tab.webComponent": "",
   "table.loading.data": "",
   "table.object.count": "",
+  "table.paginator.firstPage": "",
+  "table.paginator.itemsPerPage": "",
+  "table.paginator.lastPage": "",
+  "table.paginator.nextPage": "",
+  "table.paginator.previousPage": "",
+  "table.paginator.rangeLabel": "",
   "table.select.data": "",
   "tooltip.html.copy": "",
   "tooltip.id.copy": "",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "",
   "ui.readLess": "",
   "ui.readMore": "",
+  "wfs.aggregations.notsupported": "",
   "wfs.feature.limit": "",
   "wfs.featuretype.notfound": "",
   "wfs.geojsongml.notsupported": "",
diff --git a/translations/sk.json b/translations/sk.json
index fadf9441f3..e837e9210d 100644
--- a/translations/sk.json
+++ b/translations/sk.json
@@ -589,6 +589,12 @@
   "share.tab.webComponent": "Integrovať",
   "table.loading.data": "Načítanie údajov...",
   "table.object.count": "objekty v tomto súbore údajov",
+  "table.paginator.firstPage": "",
+  "table.paginator.itemsPerPage": "",
+  "table.paginator.lastPage": "",
+  "table.paginator.nextPage": "",
+  "table.paginator.previousPage": "",
+  "table.paginator.rangeLabel": "",
   "table.select.data": "Zdroj údajov",
   "tooltip.html.copy": "Kopírovať HTML",
   "tooltip.id.copy": "Kopírovať jedinečný identifikátor",
@@ -596,6 +602,7 @@
   "tooltip.url.open": "Otvoriť URL",
   "ui.readLess": "Čítať menej",
   "ui.readMore": "Čítať viac",
+  "wfs.aggregations.notsupported": "",
   "wfs.feature.limit": "",
   "wfs.featuretype.notfound": "V službe nebol nájdený žiadny zodpovedajúci typ funkcie",
   "wfs.geojsongml.notsupported": "Táto služba nepodporuje formát GeoJSON alebo GML",