WCMS-21743: Expand the Dataset Columns to 100% (#238)

GetDKAN · Aug 14, 2024 · 72d722d · 72d722d
1 parent d6ddf15
commit 72d722d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 19 deletions.
diff --git a/src/components/Datatable/Datatable.jsx b/src/components/Datatable/Datatable.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useRef } from "react";
 import {
   useReactTable,
   flexRender,
@@ -25,6 +25,7 @@ const DataTable = ({
 }) => {
   const [ sorting, setSorting ] = React.useState([])
   const [ariaLiveFeedback, setAriaLiveFeedback] = useState('')
+  const dataTableWrapperElement = useRef(null)
   const columnHelper = createColumnHelper()
   const table_columns = columns.map((col) => {
     if (col.cell) {
@@ -88,6 +89,14 @@ const DataTable = ({
     setSort(normalizedSort);
   }, [sorting]);
 
+  const tableWrapperWidth = () => {
+    if (dataTableWrapperElement.current) {
+      return dataTableWrapperElement.current.offsetWidth;
+    }
+
+    return 'auto';
+  };
+
   const defaultColumnOrder = useMemo(() => table_columns.map(column => {
     return column.accessorKey
   }));
@@ -106,11 +115,12 @@ const DataTable = ({
           />
         </div>
       )}
-      <div className="dc-c-datatable-wrapper" tabIndex={0}>
+      <div className="dc-c-datatable-wrapper" tabIndex={0} ref={dataTableWrapperElement}>
         <table
           {...{
             style: {
               width: canResize ? table.getCenterTotalSize() : "100%",
+              minWidth: tableWrapperWidth()
             },
           }}
           className="dc-c-datatable"

diff --git a/src/components/Datatable/HeaderResizeElement.tsx b/src/components/Datatable/HeaderResizeElement.tsx
@@ -16,14 +16,16 @@ const HeaderResizeElement = ({table, header, sortElement, setAriaLiveFeedback} :
     className="ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold"
     >
       <div className="ds-u-display--flex">
-        <span style={{maxWidth: header.getSize() - 16}} title={typeof(header.column.columnDef.header) === "string" ? header.column.columnDef.header : ''}>
-          {header.isPlaceholder
-            ? null
-            : flexRender(
-                header.column.columnDef.header,
-                header.getContext()
-            ) as React.ReactNode}
-        </span>
+        <div>
+          <span title={typeof(header.column.columnDef.header) === "string" ? header.column.columnDef.header : ''}>
+            {header.isPlaceholder
+              ? null
+              : flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+              ) as React.ReactNode}
+          </span>
+        </div>
         {sortElement && (
         <button
           onClick={header.column.getToggleSortingHandler()}

diff --git a/src/components/Datatable/datatable.scss b/src/components/Datatable/datatable.scss
@@ -51,15 +51,29 @@
   }
 }
 
-.dc-thead--truncated {
-  th > div > span {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: inline-block;
-    .ds-c-tooltip__container {
-      white-space: wrap;
-      font-weight: normal;
+thead.dc-thead--truncated {
+  th > div {
+    align-items: stretch; 
+
+    > div {
+      overflow: hidden;
+      flex: 1 1 auto;
+      position: relative;
+
+      > span {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: inline-block;
+        overflow: hidden;
+        position: absolute;
+        left: 0;
+        width: 100%;
+
+        .ds-c-tooltip__container {
+          white-space: wrap;
+          font-weight: normal;
+        }
+      }
     }
   }
   th p {