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

Code before:
          expandedRefs.current = { [key]: false }
        }
      },
      onRenderRow = (props?: Fluent.IDetailsRowProps) => props
        ? <Fluent.DetailsRow {...props} styles={{
          cell: { alignSelf: 'center', fontSize: 14, lineHeight: 20, color: cssVar('$text9') },
          checkCell: { display: 'flex', alignItems: 'center' },
          root: {
            width: '100%',
            border: border(2, 'transparent'),
            borderTop: border(2, cssVar('$neutralLight')),
            background: cssVar('$card'),
            minHeight: 48,
            '&:hover': {
              background: cssVar('$neutralLight'),
              border: `${border(2, cssVar('$themePrimary'))} !important`,
            }
          }
        }} />
        : null,
      onItemInvoked = (item: Fluent.IObjectWithKey & Dict<any>) => {
        wave.args[m.name] = [item.key as S]
        wave.push()
      },
      getItemColumnStyle = (item?: Fluent.IObjectWithKey & Dict<any>, _idx?: U, col?: WaveColumn) => {
        if (!item || !col) return <span />

        const TooltipWrapper = ({ children }: { children: S }) => {
          const align = col.align || 'left'
          if (col.cellOverflow === 'tooltip') return (
            <Fluent.TooltipHost
              id={item.key as S}
              // HACK: prevent Safari from showing a default tooltip - https://github.com/microsoft/fluentui/issues/13868
              styles={{ root: { '::after': { content: '', display: 'block' }, display: 'flex', justifyContent: align, textAlign: align } }}
              content={children}
              overflowMode={Fluent.TooltipOverflowMode.Parent}
              title={children}
            >{children}</Fluent.TooltipHost>
          )
          return <>{children}</>
        }

        let v = item[col.fieldName as S]
        if (col.cellType?.progress) return <XProgressTableCellType model={col.cellType.progress} progress={item[col.key]} />
        if (col.cellType?.icon) return <XIconTableCellType model={col.cellType.icon} icon={item[col.key]} />
        if (col.cellType?.tag) return <XTagTableCellType model={col.cellType.tag} serializedTags={item[col.key]} />
        if (col.cellType?.menu) return <XMenuTableCellType model={{ ...col.cellType.menu, rowId: String(item.key) }} />
        if (col.cellType?.markdown) return <XMarkdownTableCellType model={{ ...col.cellType.markdown, content: item[col.key] }} />
        if (col.dataType === 'time') {
          const epoch = Number(v)
          v = new Date(isNaN(epoch) ? v : epoch).toLocaleString()

Review comment (suggestion):
We know that both `item` and `col` are truthy at this point thanks to a check in `onRenderItemColumn`. No need for an additional check.

Nit: Naming could be better since we are not returning the style but component.

```suggestion
      getCellComponent = (item: Fluent.IObjectWithKey & Dict<any>,col: WaveColumn,  _idx?: U) => {
```

Code after:
        } else {
          expandedRefs.current = { [key]: false }
        }
      },
      onRenderRow = (props?: Fluent.IDetailsRowProps) => props
        ? <Fluent.DetailsRow {...props} styles={{
          cell: { alignSelf: 'center', fontSize: 14, lineHeight: 20, color: cssVar('$text9') },
          checkCell: { display: 'flex', alignItems: 'center' },
          root: {
            width: '100%',
            border: border(2, 'transparent'),
            borderTop: border(2, cssVar('$neutralLight')),
            background: cssVar('$card'),
            minHeight: 48,
            '&:hover': {
              background: cssVar('$neutralLight'),
              border: `${border(2, cssVar('$themePrimary'))} !important`,
            }
          }
        }} />
        : null,
      onItemInvoked = (item: Fluent.IObjectWithKey & Dict<any>) => {
        wave.args[m.name] = [item.key as S]
        wave.push()
      },
      getCellComponent = (item?: Fluent.IObjectWithKey & Dict<any>, _idx?: U, col?: WaveColumn) => {
        if (!item || !col) return <span />

        const TooltipWrapper = ({ children }: { children: JSX.Element }) => {
          if (col.cellOverflow === 'tooltip') return (
            <Fluent.TooltipHost
              id={item.key as S}
              // HACK: prevent Safari from showing a default tooltip - https://github.com/microsoft/fluentui/issues/13868
              styles={{ root: { '::after': { content: '', display: 'block' } } }}
              content={children}
              overflowMode={Fluent.TooltipOverflowMode.Parent}
            >{children}</Fluent.TooltipHost>
          )
          return <>{children}</>
        }

        let v = item[col.fieldName as S]
        if (col.cellType?.progress) return <XProgressTableCellType model={col.cellType.progress} progress={item[col.key]} />
        if (col.cellType?.icon) return <XIconTableCellType model={col.cellType.icon} icon={item[col.key]} />
        if (col.cellType?.tag) return <XTagTableCellType model={col.cellType.tag} serializedTags={item[col.key]} />
        if (col.cellType?.menu) return <XMenuTableCellType model={{ ...col.cellType.menu, rowId: String(item.key) }} />
        if (col.cellType?.markdown) return <XMarkdownTableCellType model={{ ...col.cellType.markdown, content: item[col.key] }} />
        if (col.dataType === 'time') {
          const epoch = Number(v)
          v = new Date(isNaN(epoch) ? v : epoch).toLocaleString()
        }