Repository: h2oai/wave
File: ui/src/table.tsx (TypeScript)

Code before:

        if (col.key === primaryColumnKey) {
          const onClick = () => {
            wave.args[m.name] = [item.key as S]
            wave.push()
          }
          const align = col.align || 'left'
          return (
            <Fluent.Link onClick={onClick}>
              <div style={{ display: 'flex', justifyContent: align, textAlign: align }}>
                <TooltipWrapper>{v}</TooltipWrapper>
              </div>
            </Fluent.Link>)
        }

        return <TooltipWrapper>{v}</TooltipWrapper>
      },
      onRenderItemColumn = (item?: Fluent.IObjectWithKey & Dict<any>, _idx?: U, col?: WaveColumn) => {
        if (!item || !col) return <span />

        const AlignmentWrapper = ({ children }: { children: any }) => {
          const align = col.align || 'left'
          return <div style={{ display: 'flex', justifyContent: align, textAlign: align }}>{children}</div>
        }

        return <AlignmentWrapper>{getItemColumnStyle(item, _idx, col)}</AlignmentWrapper>
      },
      // HACK: fixed jumping scrollbar issue when scrolling into the end of list with all groups expanded - https://github.com/microsoft/fluentui/pull/5204 
      getGroupHeight = (group: Fluent.IGroup) => {
        const
          rowHeight = m.columns.some(c => c.cell_type?.progress) ? 76 : 48,
          groupHeaderHeight = 48
        return groupHeaderHeight + (group.isCollapsed ? 0 : rowHeight * group.count)
      }

    // HACK: React stale closures - https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function
    // TODO: Find a reasonable way of doing this.
    React.useEffect(() => { { selectedFiltersRef.current = selectedFilters } }, [selectedFilters])
    React.useImperativeHandle(ref, () => ({
      resetSortIcons: () => {
        setColumns(columns.map(col => {
          if (col.iconName) col.iconName = undefined
          return col
        }))
      }
    }))

    return (
      <>
        <Fluent.DetailsList
          styles={styles}

Review comment (suggestion):
Almost there, no need for separate component if it's used just once anyway. The simpler the code the better.

```suggestion
        const align = col.align || 'left'
        return <div style={{ display: 'flex', justifyContent: align, textAlign: align }}>{getItemColumnStyle(item, _idx, col)}</div>
```

Code after:
        if (col.key === primaryColumnKey) {
          const onClick = () => {
            wave.args[m.name] = [item.key as S]
            wave.push()
          }
          return <TooltipWrapper><Fluent.Link onClick={onClick} styles={{ root: { textAlign: col?.align || 'left' } }}>{v}</Fluent.Link></TooltipWrapper>
        }

        return <TooltipWrapper>{v}</TooltipWrapper>
      },
      onRenderItemColumn = (item?: Fluent.IObjectWithKey & Dict<any>, _idx?: U, col?: WaveColumn) => {
        const align = col?.align || 'left'
        return <div style={{ display: 'flex', justifyContent: align, textAlign: align }}>{getCellComponent(item, _idx, col)}</div>
      },
      // HACK: fixed jumping scrollbar issue when scrolling into the end of list with all groups expanded - https://github.com/microsoft/fluentui/pull/5204 
      getGroupHeight = (group: Fluent.IGroup) => {
        const
          rowHeight = m.columns.some(c => c.cell_type?.progress) ? 76 : 48,
          groupHeaderHeight = 48
        return groupHeaderHeight + (group.isCollapsed ? 0 : rowHeight * group.count)
      }

    // HACK: React stale closures - https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function
    // TODO: Find a reasonable way of doing this.
    React.useEffect(() => { { selectedFiltersRef.current = selectedFilters } }, [selectedFilters])
    React.useImperativeHandle(ref, () => ({
      resetSortIcons: () => {
        setColumns(columns.map(col => {
          if (col.iconName) col.iconName = undefined
          return col
        }))
      }
    }))

    return (
      <>
        <Fluent.DetailsList
          styles={styles}
          items={filteredItems}
          columns={columns}
          constrainMode={Fluent.ConstrainMode.unconstrained}
          layoutMode={Fluent.DetailsListLayoutMode.fixedColumns}
          groups={groups}
          groupProps={{
            onToggleCollapseAll,
            onRenderHeader: onRenderGroupHeader,
            headerProps: { onToggleCollapse },
            isAllGroupsCollapsed: m.groups?.every(({ collapsed = true }) => collapsed)
          }}
          getGroupHeight={getGroupHeight}
          selection={selection}