Columns resizing

[nick-keller]

API

A resazableColumn: boolean prop

Behavior

• Column start off as they do today, respecting their given width, maxWidth, minWidth
• Once resized, a column becomes of fixed-width (width: '0 0 <width>px', and no min and max-width)

Questions

• How should other columns react when a column is being resized? Should they adjust in real-time or become fixed temporarily?
• The parent should handle the width change, but how would the API look like? onColumnWidthChange prop?

[himself65]

I think the example should be like

import { applyChange } from 'react-datasheet-grid'

const [columns, setColumns] = useState([])


return (<DynamicDataSheet
    columns={columns}
    onColumnsChange={changes => setColumns(cols => applyChange(cols, changes))}
    onColumnResize=(change => setColumns(cols => applyChange(cols, [change]))}
    ...
  />
)

How should other columns react when a column is being resized? Should they adjust in real-time or become fixed temporarily?

I think the resazableColumn prop is only allowed in the dynamic data table, and the right columns change in real-time

The parent should handle the width change, but how would the API look like? onColumnWidthChange prop?

how about onColumnResize()?

[mmasdivins]

Here we can an example on how to resize columns https://htmldom.dev/resize-columns-of-a-table/

We can add create a resizer compononent and add it to the HeaderRow:

const Resizer: FC<{
  column: Column<any, any, any>
}> = ({ column }) => {
  // Track the current position of mouse
  const [x, setX] = useState(0)
  const [w, setW] = useState(0)
  const resizerRef = useRef<any>()

  useEffect(() => {
    resizerRef.current.addEventListener('mousedown', mouseDownHandler)

    return () => {
      document.removeEventListener('mousemove', mouseMoveHandler)
      document.removeEventListener('mouseup', mouseUpHandler)
    }
  }, [])

  const mouseDownHandler = function (e: any) {
    // Get the current mouse position
    setX(e.clientX)

    setW(column.width)

    // Attach listeners for document's events
    document.addEventListener('mousemove', mouseMoveHandler)
    document.addEventListener('mouseup', mouseUpHandler)
  }

  const mouseMoveHandler = function (e: any) {
    // Determine how far the mouse has been moved
    const dx = e.clientX - x

    // Update the width of column
    column.width = `${w + dx}px`
  }

  // When user releases the mouse, remove the existing event listeners
  const mouseUpHandler = function () {
    document.removeEventListener('mousemove', mouseMoveHandler)
    document.removeEventListener('mouseup', mouseUpHandler)
  }

  return <div ref={resizerRef} className="dsg-resizer"></div>
}

export const HeaderRow = React.memo(() => {
  const {
    columns,
    contentWidth,
    height,
    hasStickyRightColumn,
    activeColMin,
    activeColMax,
  } = useContext(HeaderContext)

  return (
    <div
      className={cx('dsg-row', 'dsg-row-header')}
      style={{
        width: contentWidth ? contentWidth : '100%',
        height,
      }}
    >
      {columns.map((column, i) => (
        <Cell
          key={i}
          gutter={i === 0}
          stickyRight={hasStickyRightColumn && i === columns.length - 1}
          column={column}
          className={cx(
            'dsg-cell-header',
            activeColMin !== undefined &&
              activeColMax !== undefined &&
              activeColMin <= i - 1 &&
              activeColMax >= i - 1 &&
              'dsg-cell-header-active',
            column.headerClassName
          )}
        >
          <div className="dsg-cell-header-container">{column.title}</div>
          <Resizer column={column}/>
        </Cell>
      ))}
    </div>
  )
})

Now we need a method to change the property width of the column, I don't know if there is an already built in method to change it?
I haven't tried the code if I have time I will.

[mmasdivins]

I managed to get something done, but is far from perfect, also I don't like how I do it but I don't know better.
Here is a clip of what I've got:

React.App.-.Mozilla.Firefox.2022-02-14.14-39-46_Trim.mp4

On useColumn add a method to change the columsWidth:

import React, { useEffect, useMemo, useState } from 'react'
import { CellProps, Column, SimpleColumn } from '../types'

const defaultComponent = () => <></>
const defaultIsCellEmpty = () => false
const identityRow = <T extends any>({ rowData }: { rowData: T }) => rowData
const defaultCopyValue = () => null
const defaultGutterComponent = ({ rowIndex }: CellProps<any, any>) => (
  <>{rowIndex + 1}</>
)
const cellAlwaysEmpty = () => true
const defaultPrePasteValues = (values: string[]) => values

export const useColumns = <T extends any>(
  columns: Partial<Column<T, any, any>>[],
  gutterColumn?: SimpleColumn<T, any> | false,
  stickyRightColumn?: SimpleColumn<T, any>
): [
  Column<T, any, any>[],
  React.Dispatch<
    React.SetStateAction<
      {
        id?: string | undefined
        width: number
      }[]
    >
  >
] => {
  const [columnsWidth, setColumnsWidth] = useState<
    { id?: string; width: number }[]
  >(
    columns.map((column) => {
      let width = 1
      if (typeof column.width === 'string') {
        width = parseInt(column.width)
      }
      return { id: column.id, width: width }
    })
  )

  return [
    useMemo<Column<T, any, any>[]>(() => {
      console.log('UseColumns: ', columns)
      const partialColumns: Partial<Column<T, any, any>>[] = [
        gutterColumn === false
          ? {
              width: 0,
              minWidth: 0,
              // eslint-disable-next-line react/display-name
              component: () => <></>,
              headerClassName: 'dsg-hidden-cell',
              cellClassName: 'dsg-hidden-cell',
              isCellEmpty: cellAlwaysEmpty,
            }
          : {
              ...gutterColumn,
              width: gutterColumn?.width ?? '0 0 40px',
              minWidth: gutterColumn?.minWidth ?? 0,
              title: gutterColumn?.title ?? (
                <div className="dsg-corner-indicator" />
              ),
              component: gutterColumn?.component ?? defaultGutterComponent,
              isCellEmpty: cellAlwaysEmpty,
            },
        ...columns,
      ]

      if (stickyRightColumn) {
        partialColumns.push({
          ...stickyRightColumn,
          width: stickyRightColumn.width ?? '0 0 40px',
          minWidth: stickyRightColumn.minWidth ?? 0,
          isCellEmpty: cellAlwaysEmpty,
        })
      }

      return partialColumns.map<Column<T, any, any>>((column) => {
        let width = column.width ?? 1
        const col = columnsWidth?.find((x) => x.id === column.id)
        if (col && col.width) {
          width = `0 0 ${col?.width}px`
        }

        return {
          ...column,
          width: width,
          minWidth: column.minWidth ?? 100,
          renderWhenScrolling: column.renderWhenScrolling ?? true,
          component: column.component ?? defaultComponent,
          disableKeys: column.disableKeys ?? false,
          disabled: column.disabled ?? false,
          keepFocus: column.keepFocus ?? false,
          deleteValue: column.deleteValue ?? identityRow,
          copyValue: column.copyValue ?? defaultCopyValue,
          pasteValue: column.pasteValue ?? identityRow,
          prePasteValues: column.prePasteValues ?? defaultPrePasteValues,
          isCellEmpty: column.isCellEmpty ?? defaultIsCellEmpty,
        }
      })
    }, [gutterColumn, stickyRightColumn, columns, columnsWidth]),
    setColumnsWidth,
  ]
}

Add the setColumnsWith to the HeaderContextType:

export type HeaderContextType<T> = {
  columns: Column<T, any, string>[]
  setColumnsWidth: any
  contentWidth?: number
  hasStickyRightColumn: boolean
  height: number
  activeColMin?: number
  activeColMax?: number
}

On DataSheetGrid obtain the setColumsWidth and pass it to the header context:

      const [columns, setColumnsWidth] = useColumns(
        rawColumns,
        gutterColumn,
        stickyRightColumn
      )

...

      const headerContext = useMemoObject<HeaderContextType<T>>({
        hasStickyRightColumn,
        height: headerRowHeight,
        contentWidth: fullWidth ? undefined : contentWidth,
        columns,
        setColumnsWidth: setColumnsWidth,
        activeColMin: selection?.min.col ?? activeCell?.col,
        activeColMax: selection?.max.col ?? activeCell?.col,
      })

Finally create the Resizer component on the HeaderRow:

import React, { FC, useContext, useEffect, useRef, useState } from 'react'
import { HeaderContext } from '../contexts/HeaderContext'
import cx from 'classnames'
import { Cell } from './Cell'
import { Column } from '../types'

export const HeaderRow = React.memo(() => {
  const {
    columns,
    contentWidth,
    height,
    hasStickyRightColumn,
    activeColMin,
    activeColMax,
    setColumnsWidth,
  } = useContext(HeaderContext)

  return (
    <div
      className={cx('dsg-row', 'dsg-row-header')}
      style={{
        width: contentWidth ? contentWidth : '100%',
        height,
      }}
    >
      {columns.map((column, i) => (
        <Cell
          key={i}
          gutter={i === 0}
          stickyRight={hasStickyRightColumn && i === columns.length - 1}
          column={column}
          className={cx(
            'dsg-cell-header',
            activeColMin !== undefined &&
              activeColMax !== undefined &&
              activeColMin <= i - 1 &&
              activeColMax >= i - 1 &&
              'dsg-cell-header-active',
            column.headerClassName
          )}
        >
          <div className="dsg-cell-header-container">{column.title}</div>
          <Resizer column={column} setColumnWidth={setColumnsWidth} />
        </Cell>
      ))}
    </div>
  )
})

const Resizer: FC<{
  column: Column<any, any, any>
  setColumnWidth: any
}> = ({ column, setColumnWidth }) => {
  // Track the current position of mouse

  const x = useRef(0)
  const w = useRef(0)
  const resizerRef = useRef<any>()

  useEffect(() => {
    resizerRef.current.addEventListener('mousedown', mouseDownHandler)

    return () => {
      document.removeEventListener('mousemove', mouseMoveHandler)
      document.removeEventListener('mouseup', mouseUpHandler)
    }
  }, [])

  const mouseDownHandler = function (e: any) {
    // Get the current mouse position
    x.current = e.clientX

    const width = resizerRef.current.parentElement.clientWidth

    w.current = width

    // Attach listeners for document's events
    document.addEventListener('mousemove', mouseMoveHandler)
    document.addEventListener('mouseup', mouseUpHandler)
  }

  const mouseMoveHandler = function (e: any) {
    // Determine how far the mouse has been moved
    const dx = e.clientX - x.current

    // Update the width of column
    setColumnWidth((cols: any) =>
      cols.map((x: any) => {
        if (x.id === column.id) {
          x.width = w.current + dx
        }
        return x
      })
    )
  }

  // When user releases the mouse, remove the existing event listeners
  const mouseUpHandler = function () {
    document.removeEventListener('mousemove', mouseMoveHandler)
    document.removeEventListener('mouseup', mouseUpHandler)
  }

  return <div ref={resizerRef} className="dsg-resizer"></div>
}

HeaderRow.displayName = 'HeaderRow'

Since I use the property Id to identify a column, the columns that do not have Id can't be resized, for example the first column.
Also, there's probably a better way to change the column width than to create a method on the useColumns, but I didn't know how.

[nick-keller]

Thanks a lot for your contribution, it is just a lot to analyse, which is why I am taking my time on this one. But I'll get back to you ;)

[seriojca]

Any updates on this ?

[DorEliyahu176]

Thanks for the contribution! This looks good.
I had to make some adjustments locally to make it work.
Any updates on this feature?

[duongductrong]

Hi everyone, Have any updates on this feature?
I cannot find the resize columns feature on the document. Is it available?

[nick-keller]

Hello everyone,
Unfortunately I don't have the bandwidth to work on this, but I can support anyone willing to do it.

[mir4a]

Hey guys, I have a draft PR #350 and would like to hear your opinions