columns resize

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -3,10 +3,12 @@ import styled from 'styled-components';
 import ColumnLabel from './ColumnLabel';
 import DropDownButton from '../widgets/DropDownButton';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
+import { useSplitterDrag } from '../widgets/Splitter';
 import { FontIcon } from '../icons';
 
 const HeaderDiv = styled.div`
   display: flex;
+  flex-wrap: nowrap;
 `;
 
 const LabelDiv = styled.div`
@@ -15,13 +17,22 @@ const LabelDiv = styled.div`
   // padding-left: 2px;
   padding: 2px;
   margin: auto;
+  white-space: nowrap;
 `;
 
 const IconWrapper = styled.span`
   margin-left: 3px;
 `;
 
-export default function ColumnHeaderControl({ column, setSort, order }) {
+const ResizeHandle = styled.div`
+  background-color: #ccc;
+  width: 2px;
+  cursor: col-resize;
+  z-index: 1;
+`;
+
+export default function ColumnHeaderControl({ column, setSort, onResize, order }) {
+  const onResizeDown = useSplitterDrag('clientX', onResize);
   return (
     <HeaderDiv>
       <LabelDiv>
@@ -43,6 +54,7 @@ export default function ColumnHeaderControl({ column, setSort, order }) {
           <DropDownMenuItem onClick={() => setSort('DESC')}>Sort descending</DropDownMenuItem>
         </DropDownButton>
       )}
+      <ResizeHandle className="resizeHandleControl" onMouseDown={onResizeDown} />
     </HeaderDiv>
   );
 }

packages/web/src/datagrid/ColumnLabel.js

@@ -6,6 +6,7 @@ import { SequenceIcon, ForeignKeyIcon } from '../icons';
 
 const Label = styled.span`
   font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
+  white-space: nowrap;
 `;
 
 /** @param column {import('@dbgate/datalib').DisplayColumn|import('@dbgate/types').ColumnInfo} */

packages/web/src/datagrid/DataGridCore.js

@@ -509,7 +509,9 @@ export default function DataGridCore(props) {
 
   function handleGridMouseDown(event) {
     if (event.target.closest('.buttonLike')) return;
+    if (event.target.closest('.resizeHandleControl')) return;
     if (event.target.closest('input')) return;
+
     // event.target.closest('table').focus();
     event.preventDefault();
     // @ts-ignore
@@ -1044,6 +1046,7 @@ export default function DataGridCore(props) {
                   column={col}
                   setSort={display.sortable ? (order) => display.setSort(col.uniqueName, order) : null}
                   order={display.getSortOrder(col.uniqueName)}
+                  onResize={(diff) => display.resizeColumn(col.uniqueName, col.widthNumber, diff)}
                 />
               </TableHeaderCell>
             ))}

packages/web/src/datagrid/gridutil.ts

@@ -1,8 +1,9 @@
 import _ from 'lodash';
 import { SeriesSizes } from './SeriesSizes';
 import { CellAddress } from './selection';
+import { GridDisplay } from '@dbgate/datalib';
 
-export function countColumnSizes(loadedRows, columns, containerWidth, display) {
+export function countColumnSizes(loadedRows, columns, containerWidth, display: GridDisplay) {
   const columnSizes = new SeriesSizes();
   if (!loadedRows || !columns) return columnSizes;
 
@@ -25,12 +26,17 @@ export function countColumnSizes(loadedRows, columns, containerWidth, display) {
     //this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
     const column = columns[colIndex];
 
+    if (display.config.columnWidths[column.uniqueName]) {
+      columnSizes.putSizeOverride(colIndex, display.config.columnWidths[column.uniqueName]);
+      continue;
+    }
+
     // if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
     // else context.font = "14px Helvetica";
     context.font = 'bold 14px Helvetica';
 
-    let text = column.headerText;
-    let headerWidth = context.measureText(text).width + 64;
+    const text = column.headerText;
+    const headerWidth = context.measureText(text).width + 64;
 
     // if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
     // if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
@@ -47,9 +53,14 @@ export function countColumnSizes(loadedRows, columns, containerWidth, display) {
   context.font = '14px Helvetica';
   for (let row of loadedRows.slice(0, 20)) {
     for (let colIndex = 0; colIndex < columns.length; colIndex++) {
-      let uqName = columns[colIndex].uniqueName;
-      let text = row[uqName];
-      let width = context.measureText(text).width + 8;
+      const uqName = columns[colIndex].uniqueName;
+
+      if (display.config.columnWidths[uqName]) {
+        continue;
+      }
+  
+      const text = row[uqName];
+      const width = context.measureText(text).width + 8;
       // console.log('colName', colName, text, width);
       columnSizes.putSizeOverride(colIndex, width);
       // let colName = this.columns[colIndex].uniquePath;
@@ -103,6 +114,7 @@ export function countVisibleRealColumns(columnSizes, firstVisibleColumnScrollInd
     realColumns.push({
       ...col,
       colIndex,
+      widthNumber,
       widthPx: `${widthNumber}px`,
     });
   }