(feature) Reset column widths via the headers context menu

src/ui/DataTable/DataTable.js

@@ -4,14 +4,16 @@ import React, {
   useMemo,
   useState,
   useEffect,
+  useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { Menu } from '@blueprintjs/core'
+import { Menu, MenuItem } from '@blueprintjs/core'
 import {
   Column,
+  ColumnHeaderCell,
   CopyCellsMenuItem,
   Table,
 } from '@blueprintjs/table'
@@ -84,6 +86,27 @@ const DataTable = ({
 
   const getCellData = (rowIndex, columnIndex) => tableColumns[columnIndex]?.copyText(rowIndex)
 
+  const columnWidthReset = useCallback(() => {
+    setUseCustomColsWidth(false)
+    dispatch(setColumnsWidth({ section }))
+  }, [dispatch])
+
+  const columnHeaderCellRenderer = (name) => {
+    const menuRenderer = () => (
+      <>
+        {enableColumnResizing && (
+          <Menu>
+            <MenuItem
+              onClick={columnWidthReset}
+              text={t('column.defaultWidth')}
+            />
+          </Menu>
+        )}
+      </>
+    )
+    return <ColumnHeaderCell name={name} menuRenderer={menuRenderer} />
+  }
+
   const renderBodyContextMenu = (context) => {
     const isSingleColumnSelected = singleColumnSelectedCheck(context)
     const hasNumericValue = columnHasNumericValueCheck(context, tableColumns)
@@ -99,11 +122,6 @@ const DataTable = ({
       }
     }
 
-    const columnWidthReset = () => {
-      setUseCustomColsWidth(false)
-      dispatch(setColumnsWidth({ section }))
-    }
-
     return (
       <Menu>
         <CopyCellsMenuItem
@@ -249,6 +267,7 @@ const DataTable = ({
             cellRenderer={column.renderer}
             className={column?.className ?? 'align-right'}
             name={column.nameStr ? column.nameStr : t(column.name)}
+            columnHeaderCellRenderer={() => columnHeaderCellRenderer(column?.nameStr ?? t(column.name))}
           />
         ))}
       </Table>

src/ui/DataTable/_DataTable.scss

@@ -63,6 +63,16 @@
   .cell-no-data {
     color: var(--color2);
   }
+
+  .bp3-table-thead {
+    .bp3-table-header {
+      .bp3-table-column-name {
+        .bp3-table-th-menu-container{
+          display: none;
+        }
+      }
+    }
+  }
 }
 
 .bp3-table {