feat(VirtualTable): enable columns resize

[artemmufazalov]

Add resize for "Version" column in Nodes table - little native resize triangle near right bottom corner.

The table could be reviewed in UI here: https://nda.ya.ru/t/aL9co3Y674WeyY

To enable VirtualTable turn on "Use table with data load on scroll for Nodes and Storage tabs " experiment in settings.

[artemmufazalov]

Currently only Version column is resizeable, because proper resize also requires update for components used inside cells.

For example, NodesHostWrapper has fixed 330px width, resize makes no sense for such component.

Other columns will be added further step by step, if needed

[Raubzeug]

It seems it would be better not to pass resizeObserver, but make a component with forwardRef and do all observe staff here.

[artemmufazalov]

I intentionally created TableHeadCell component to observe and unobserve <div> on mount and unmount in useEffect. The reason - it's very important to correctly unobserve <div> on unmount, otherwise some odd values could be stored as column width.

In case with forwardRef, it's needed to store some reference to initial divs, to manually unobserve them on their unmount. So with removing useEffect construction from HeadCell some more complex construction will appear in TableHead

[Raubzeug]

Nonetheless, it's not correct to pass ref.current as property, because React doesn't guarantee to rerender children if ref.current will change.
So, as for me, array with refs is better solution. You may pass unsubscribe method to all ths.

[artemmufazalov]

Always forget about this issue with useRef.

Replaced it with useState, now it should rerender properly.

As for the array of refs option, it won't be just array of refs, because there are cases, where columns could be unmounted one by one. Examples: tables with conditional columns - Storage, where degraded columns is shown only with specific filters setup, Partitions, where some columns appear, if consumer is selected; tables with columns setup - you can hide and show specific columns. So it either would be some additional events handlers, or some logic, to process this array to subscribe new columns and unsubscribe disappeared.

[Raubzeug]

What if we create functions in TableHead and pass it to all cells? Or this logic may be moved to custom hook.

const observedCells = React.useRef({})

const {observeCell, unobserveCell} = React.useMemo(() => {
  const resizeObserver = new ResizeObserver(......)

  const unobserveCell = (cellId) => {
  const cellRef = observedCells.current.cellId
  if (cellRef) {
    resizeObserver.unobserve(cellRef)
    delete observedCells.current.cellId
  }
}
const observeCell = (cellId, cellRef) => {
  unobserveCell(cellId)
  resizeObserver.unobserve(cellRef)
  observedCells.current.cellId = cellRef
}

  return {observeCell, unobserveCell}

}, [onColumnsResize, isTableResizeable])

[sareyu]

add min-width for column and overflow: ellipsys for cells plz

[sareyu]

overflow works only with block elements, afaik
try this hack with max-width plz to avoid extra element, looks like it suits our scenario

[sareyu]

it's not cell, it's cell-content

[sareyu]

you read resized width only once so maybe you can split this hook in two to avoid passing onColumnsResize callback through two levels (minor, don`t insist)

[artemmufazalov]

I created it as a hook (not some prop inside VirtualTable) to reuse it with react-data-table (I assume onTableResize will be a callback from outside)

[Raubzeug]

Nonetheless, it's not correct to pass ref.current as property, because React doesn't guarantee to rerender children if ref.current will change.
So, as for me, array with refs is better solution. You may pass unsubscribe method to all ths.