table: make columns resizable

function createResizableTableHead(columns, options = {}) {  const {    // settings for individual column's min width    columnsMinWidth,    // settings for individual column's label     // e.g. the column key from database is firstName    // but we won't show that directly to end user    // so we make a mapping like 'firstName' -> 'first name'    columnsLabel = {}  } = options  const thead = document.createElement('thead')  const tr = document.createElement('tr')  columns.forEach(columnKey => {    const th = document.createElement('th')    // save column name on the element,    // so we know which column a element represents    th.dataset.columnKey = columnKey    // set display: flex; on `th` would break    // the table layout algorithm    // so we need a wrapper `div` to do that    const wrapper = document.createElement('div')    wrapper.classList.add('resizable-column-wrapper')    th.appendChild(wrapper)    const content = document.createElement('div')    const resizeHandle = document.createElement('div')    content.classList.add('resizable-column-content')    resizeHandle.classList.add('resizable-column-handle')    // here we simply add text to a div    // but we can also make a column formatter    // similar to what we did for `createTableRow`    // if we need more complex markup    content.textContent = columnsLabel[columnKey] || columnKey    wrapper.append(content, resizeHandle)    tr.appendChild(th)  });  makeColumnsResizable(tr, { columnsMinWidth })  thead.appendChild(tr)  return thead}

function makeColumnsResizable(columnsContainer, options = {}) {  const {    // elements to resize together with the target column    elementsToPatch = [],    // setting of each column min width    columnsMinWidth = {},    // default value of each column min width    DEFAULT_MIN_COLUMN_WIDTH = 100  } = options  columnsContainer.classList.add('resizable-columns-container')  const _elementsToPatch = [columnsContainer, ...elementsToPatch]  const columnElements = [...columnsContainer.children]  columnElements.forEach((column) => {    column.classList.add('resizable-column')    const minWidthSetting = columnsMinWidth[column.dataset.columnKey]    if (minWidthSetting) {      // set width does not work on table because      // it has built-in layout algorithm      column.style.minWidth = minWidthSetting + 'px'      // we are still setting width because      // `makeColumnsResizable` is not made specifically for table      column.style.width = minWidthSetting + 'px'    }  })  columnsContainer.addEventListener('pointerdown', e => {    // because we use event delegation pattern,    // `e.target` could be other irrelevant elements    // so we need to make sure that the event    // is triggered by a resize handle    const resizeHandle = e.target.closest('.resizable-column-handle')    if (!resizeHandle)      return    // stop event propagation so we don't trigger resize    // and swap at the same time. this is used with    // { capture: true } to make sure this event handler has     // higher priority and don't propagate to others.    // it is also possible to use e.stopImmediatePropagation()    // in this case because this event listener of 'pointerdown'    // is added before the one from `makeColumnsSwappable`    e.stopPropagation()    const column = e.target.closest('.resizable-column')    const indexOfColumn = [...columnsContainer.children].indexOf(column)    const minColumnWidth = columnsMinWidth[column.dataset.columnKey] || DEFAULT_MIN_COLUMN_WIDTH    // prevent text selection when moving columns    document.addEventListener('selectstart', preventDefault)    const initialColumnWidth = parseFloat(getComputedStyle(column).width)    const initialCursorX = e.clientX    // elements that are in the same column    const elementsToResize = _elementsToPatch.map((columnsContainer) => {      return columnsContainer.children[indexOfColumn]    })    // calculate how much to resize    function handleMove(e) {      const newCursorX = e.clientX      const moveDistance = newCursorX - initialCursorX      let newColumnWidth = initialColumnWidth + moveDistance      // we don't want to resize column width below its      // minimal value so if `newColumnWidth` is lower than      // `minColumnWidth` we want to use `minColumnWidth`, which       // value would be the "bigger" one of Math.max()      newColumnWidth = Math.max(newColumnWidth, minColumnWidth)      // if we need to frequently update UI, use      // `requestAnimationFrame` to make it optimal      requestAnimationFrame(() => {        elementsToResize.forEach((element) => {          element.style.minWidth = newColumnWidth + 'px'          element.style.width = newColumnWidth + 'px'        })      })    }    document.addEventListener('pointermove', handleMove)    // clean up event listeners    document.addEventListener('pointerup', e => {      document.removeEventListener('pointermove', handleMove)      document.removeEventListener('selectstart', preventDefault)      // this clean up listener only needs to run once      // after 'pointerdown'    }, { once: true })    // capture of 'pointerdown' is used with e.preventDefault()    // as mentioned above  }, { capture: true })}

.resizable-column-wrapper {  /* make its content layout horizontally */  display: flex;}.resizable-column-content {  /* makes this element can grow and shrink      within the free space of flexbox */  flex: 1;  text-align: left;  padding: 8px;}.resizable-column-handle {  width: 20px;  background: rgba(255, 0, 0, 0.154);  cursor: col-resize;  /* makes this element not to shrink */  flex-shrink: 0;}

import { makeColumnsResizable } from "./makeColumnsResizable.js"import { makeColumnsSwappable } from "./makeColumnsSwappable.js"export function createTable(columns, dataList, options = {}) {  const {    columnFormatter = {},    resizeOptions = {},    swapOptions = {},  } = options  const table = document.createElement('table')  // create resizable structure if resize option is enable  const thead = resizeOptions.enable    ? createResizableTableHead(columns, resizeOptions)    : createTableHead(columns)  const tbody = createTableBody(columns, dataList, columnFormatter)  table.append(thead, tbody)  // make columns swappable if swap option is enable  if (swapOptions.enable) {    const columnsContainer = table.querySelector('thead').firstElementChild    const elementsToPatch = table.querySelectorAll('tbody > tr')    makeColumnsSwappable(columnsContainer, elementsToPatch)  }  return table}

// const users = [...]// const nameOfDefaultColumns = [...]// const columnFormatter = [...]createTable(nameOfDefaultColumns, users, {  columnFormatter,  resizeOptions: {    enable: true,    columnsMinWidth: {      id: 50    }  },  swapOptions: {    enable: true,  },})

function getGhostBoundary() {...}

function getScrollContainerFunc() {...}

function moveGhost() {...}

function handleSwap() {...}

// inside `startScroll` const event = new CustomEvent('custom:autoscroll', {  detail: {    direction,    predicateGhostEdgeX  }})ghost.dispatchEvent(event)

// inside `makeColumnsSwappable`ghost.element.addEventListener('custom:autoscroll', (e) => {  const { direction, predicateGhostEdgeX } = e.detail  handleSwap({    isMoveToLeft: direction === 'left',    isMoveToRight: direction === 'right',    ghostLeft: predicateGhostEdgeX.left,    ghostRight: predicateGhostEdgeX.right  })})