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

Code before:
                                  />
              }
              let filterCountField = undefined
              const filterCount = selectedFilters?.[props.column.key]?.length || 0
              if (filterCount > 0){
                filterCountField = 
                  <span data-test='filter-count' className={css.filterCount}>
                    {`${filterCount > 9 ? '9+' : filterCount}`}
                  </span>
              }
              return <div style={{ display: 'flex', alignItems: 'center'}}>{props.column.name}
              {sortIcon ? sortIcon : null}

              {c.filterable ? (
                    <Fluent.Icon iconName='ChevronDown' 
                                onClick={(ev: React.MouseEvent<HTMLElement>) => {
                                    ev.stopPropagation()
                                    onColumnContextMenu(props.column, ev)
                                }}
                                className={css.filterIcon}
                    />
                ) : null
              }
              {filterCountField ? filterCountField : null}
              </div> 
            } else return null
          },
          onColumnClick,
          columnActionsMode: Fluent.ColumnActionsMode.clickable,
          cellType: c.cell_type,
          dataType: c.data_type,
          align: c.align,
          isSortable: c.sortable,
          cellOverflow: c.cell_overflow,
          styles: { root: { height: 48 }, cellName: { color: cssVar('$neutralPrimary') } },
          isResizable: true,
          isMultiline: c.cell_overflow === 'wrap',
          filters: c.filterable ? c.filters : undefined,
        }
      }, [onColumnClick, onColumnContextMenu, selectedFilters, sortCols]),
      [columns, setColumns] = React.useState(m.columns.map(tableToWaveColumn)),
      primaryColumnKey = m.columns.find(c => c.link)?.name || (m.columns[0].link === false ? undefined : m.columns[0].name),
      onRenderDetailsHeader = React.useCallback((props?: Fluent.IDetailsHeaderProps) => {
        if (!props) return <span />

        return (
          <Fluent.Sticky stickyPosition={Fluent.StickyPositionType.Header} isScrollSynced>
            <Fluent.DetailsHeader
              {...props}
              isAllCollapsed={groups?.every(group => group.isCollapsed)}
              styles={{

Review comment (refactor):
Tried to simplify a bit. Let me know if this would work.

```suggestion
            if (!props) return null

            const filterCount = selectedFilters?.[props.column.key]?.length || 0
            const sortIconName = sortCols && sortCols[props.column.key] ? 'Sort' + sortCols[props.column.key] : 'Sort'

            return (
              <div style={{ display: 'flex', alignItems: 'center' }}>{props.column.name}
                {c.sortable && (
                  <Fluent.Icon iconName={sortIconName}
                    className={css.sortingIcon}
                    style={{ visibility: sortIconName === 'Sort' ? 'hidden' : 'visible' }}
                  />
                )}

                {c.filterable && (
                  <Fluent.Icon iconName='ChevronDown'
                    onClick={ev => {
                      ev.stopPropagation()
                      onColumnContextMenu(props.column, ev)
                    }}
                    className={css.filterIcon}
                  />
                )}

                {filterCount > 0 && (
                  <span data-test='filter-count' className={css.filterCount}>
                    {filterCount > 9 ? '9+' : filterCount}
                  </span>
                )}
              </div>
            )
```

Code after:
                  <Fluent.Icon iconName={sortIconName}
                    className={css.sortingIcon}
                    style={{ visibility: `${sortIconName === 'Sort' ? 'hidden' : 'visible'}` }}
                  />
                )}

                {c.filterable && (
                  <Fluent.Icon iconName='ChevronDown'
                    onClick={(ev: React.MouseEvent<HTMLElement>) => {
                      ev.stopPropagation()
                      onColumnContextMenu(props.column, ev)
                    }}
                    className={css.filterIcon}
                  />
                )}

                {filterCount > 0 && (
                  <span data-test='filter-count' className={`${css.filterCount} wave-s11 wave-w5`}>
                    {`${filterCount > 9 ? '9+' : filterCount}`}
                  </span>
                )}
              </div>
            )
          },
          onColumnClick,
          columnActionsMode: Fluent.ColumnActionsMode.clickable,
          cellType: c.cell_type,
          dataType: c.data_type,
          align: c.align,
          isSortable: c.sortable,
          cellOverflow: c.cell_overflow,
          styles: { root: { height: 48 }, cellName: { color: cssVar('$neutralPrimary') } },
          isResizable: true,
          isMultiline: c.cell_overflow === 'wrap',
          filters: c.filterable ? c.filters : undefined,
        }
      }, [onColumnClick, onColumnContextMenu, selectedFilters, sortCols]),
      [columns, setColumns] = React.useState(m.columns.map(tableToWaveColumn)),
      primaryColumnKey = m.columns.find(c => c.link)?.name || (m.columns[0].link === false ? undefined : m.columns[0].name),
      onRenderDetailsHeader = React.useCallback((props?: Fluent.IDetailsHeaderProps) => {
        if (!props) return <span />

        return (
          <Fluent.Sticky stickyPosition={Fluent.StickyPositionType.Header} isScrollSynced>
            <Fluent.DetailsHeader
              {...props}
              isAllCollapsed={groups?.every(group => group.isCollapsed)}
              styles={{
                ...props.styles,
                root: {
                  padding: 0,