function TableHeadColumn()

in desktop/flipper-plugin/src/ui/data-table/TableHead.tsx [133:233]
92 lines of code
12 McCabe index (conditional complexity)

function TableHeadColumn({
  column,
  isResizable,
  sorted,
  dispatch,
}: {
  column: DataTableColumn<any>;
  sorted: SortDirection;
  isResizable: boolean;
  dispatch: DataTableDispatch;
}) {
  const ref = useRef<HTMLDivElement | null>(null);

  const onResize = (newWidth: number) => {
    if (!isResizable) {
      return;
    }

    let normalizedWidth: number | Percentage = newWidth;

    // normalise number to a percentage if we were originally passed a percentage
    if (isPercentage(column.width) && ref.current) {
      const {parentElement} = ref.current;
      const parentWidth = parentElement!.clientWidth;
      const {childNodes} = parentElement!;

      const lastElem = childNodes[childNodes.length - 1];
      const right =
        lastElem instanceof HTMLElement
          ? lastElem.offsetLeft + lastElem.clientWidth + 1
          : 0;

      if (right < parentWidth) {
        normalizedWidth = calculatePercentage(parentWidth, newWidth);
      }
    }

    dispatch({
      type: 'resizeColumn',
      column: column.key,
      width: normalizedWidth,
    });
  };

  let children = (
    <Layout.Right center>
      <div
        onClick={(e) => {
          e.stopPropagation();
          const newDirection =
            sorted === undefined
              ? 'asc'
              : sorted === 'asc'
              ? 'desc'
              : undefined;
          dispatch({
            type: 'sortColumn',
            column: column.key,
            direction: newDirection,
          });
        }}
        role="button"
        tabIndex={0}>
        <Text type="secondary">
          {column.title === undefined ? (
            toFirstUpper(column.key)
          ) : column.title === '' ? (
            <>&nbsp;</>
          ) : (
            column.title
          )}
          <SortIcons
            direction={sorted}
            onSort={(dir) =>
              dispatch({type: 'sortColumn', column: column.key, direction: dir})
            }
          />
        </Text>
      </div>
      <FilterIcon column={column} dispatch={dispatch} />
    </Layout.Right>
  );

  if (isResizable) {
    children = (
      <TableHeaderColumnInteractive
        grow
        resizable={RIGHT_RESIZABLE}
        onResize={onResize}
        minWidth={20}>
        {children}
      </TableHeaderColumnInteractive>
    );
  }

  return (
    <TableHeadColumnContainer width={column.width} ref={ref}>
      {children}
    </TableHeadColumnContainer>
  );
}