WCMS-21326 and 21322: Adjust horizontal scroll class override, and fix loading screen and no results display on horizontally scrolled table

src/components/DatasetTableTab/index.tsx

@@ -52,7 +52,7 @@ const DatasetTable = ({ id, distribution, resource, rootUrl, customColumns = [],
       <>
         <QueryBuilder resource={resource} id={distribution.identifier} customColumns={customColumnHeaders} />
         {<DataTableHeader resource={resource} downloadURL={downloadURL} unfilteredDownloadURL={distribution.data.downloadURL} jsonUrl={jsonUrl} /> }
-        <div className="ds-u-overflow--auto ds-u-border-x--1 ds-u-border-bottom--1">
+        <div className="ds-u-border-x--1 ds-u-border-bottom--1">
           <DataTable
             data={resource.values}
             canResize={true}

src/components/Datatable/Datatable.jsx

@@ -71,62 +71,61 @@ const DataTable = ({
   }, [sorting]);
 
   return(
-    <div>
-      <table
-        tabIndex={0}
-        {...{
-          style: {
-            width: canResize ? table.getCenterTotalSize() : "100%",
-          },
-        }}
-        className="dc-c-datatable"
-      >
-        {canResize
-          ? <TruncatedResizeableTHead table={table} sortElement={sortElement} setAriaLiveFeedback={setAriaLiveFeedback} />
-          : <FixedSizeTHead table={table} sortElement={sortElement} />
-        }
-        {loading ? (
-          <tbody>
-            <tr>
-              <td colSpan={columns.length}>
-                <Spinner aria-valuetext="Dataset loading" role="status" className="ds-u-margin--3" />
-              </td>
-            </tr>
-          </tbody>
-        ) : (
-          <tbody>
-          {table.getRowModel().rows.map((row, index) => {
-            const even = (index + 1) % 2 === 0;
-            return(
-              <tr key={row.id} className={`${even ? "dc-c-datatable--even-row" : ""}`}>
-                {row.getVisibleCells().map((cell) => {
-                  let classList = "dc-truncate ds-u-padding-x--1"
-                  return (
-                    <td
-                      {...{
-                        key: cell.id,
-                        style: {
-                          maxWidth: cell.column.getSize(),
-                        },
-                      }}
-                      className={`${classList} ${tablePadding}`}
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </td>
-                  );
-                })}
-              </tr>
-            )
-            })
+    <>
+      <div className="dc-c-datatable-wrapper">
+        <table
+          tabIndex={0}
+          {...{
+            style: {
+              width: canResize ? table.getCenterTotalSize() : "100%",
+            },
+          }}
+          className="dc-c-datatable"
+        >
+          {canResize
+            ? <TruncatedResizeableTHead table={table} sortElement={sortElement} setAriaLiveFeedback={setAriaLiveFeedback} />
+            : <FixedSizeTHead table={table} sortElement={sortElement} />
           }
-          </tbody>
-        )}
+          {loading ? (
+            <tbody></tbody>
+          ) : (
+            <tbody>
+            {table.getRowModel().rows.map((row, index) => {
+              const even = (index + 1) % 2 === 0;
+              return(
+                <tr key={row.id} className={`${even ? "dc-c-datatable--even-row" : ""}`}>
+                  {row.getVisibleCells().map((cell) => {
+                    let classList = "dc-truncate ds-u-padding-x--1"
+                    return (
+                      <td
+                        {...{
+                          key: cell.id,
+                          style: {
+                            maxWidth: cell.column.getSize(),
+                          },
+                        }}
+                        className={`${classList} ${tablePadding}`}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </td>
+                    );
+                  })}
+                </tr>
+              )
+              })
+            }
+            </tbody>
+          )}
         </table>
         <div className='sr-only' aria-live='assertive' aria-atomic='true'>{ariaLiveFeedback}</div>
-        {!loading && table.getRowModel().rows.length === 0 && (
-          <Alert variation="warn">No results found for the current filters</Alert>
-        )}
-    </div>
+      </div>
+      {loading && (
+        <Spinner aria-valuetext="Dataset loading" role="status" className="ds-u-margin--3" />
+      )}
+      {!loading && table.getRowModel().rows.length === 0 && (
+        <Alert variation="warn">No results found for the current filters</Alert>
+      )}
+    </>
   )
 }
 

src/components/Datatable/datatable.scss

@@ -12,6 +12,10 @@
   }
 }
 
+.dc-c-datatable-wrapper {
+  overflow: auto;
+}
+
 .dc-thead--fixed-size th {
   border-left: 2px solid var(--color-border);
 }
@@ -89,14 +93,3 @@
 .dc-c-sort--desc::after {
   content: '\f0dd';
 }
-
-
-// @media (hover: hover) {
-//   .resizer {
-//     opacity: 0;
-//   }
-
-//   *:hover > .resizer {
-//     opacity: 1;
-//   }
-// }