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

Code before:
                cellIsGroupExpander: {
                  // HACK: fixed size of expand/collapse button in column header
                  height: 48
                }
              }}
            />
          </Fluent.Sticky>
        )
      }, [groups]),
      onRenderGroupHeader = React.useCallback((props?: Fluent.IDetailsGroupDividerProps) => {
        if (!props) return <span />

        return (
          <Fluent.GroupHeader
            {...props}
            styles={stylesProps => ({
              root: [
                {
                  position: 'sticky',
                  top: 48,
                  backgroundColor: cssVar('$card'),
                  zIndex: 1
                },
                stylesProps.selected
                  ? {
                    background: `${cssVar('$neutralLight')} !important`,
                    '.ms-GroupHeader-check': { opacity: 1 }
                  }
                  : undefined
              ]
            })
            } />
        )
      }, []),
      onToggleCollapseAll = (isAllCollapsed: B) => expandedRefs.current = isAllCollapsed ? {} : null,
      onToggleCollapse = ({ key, isCollapsed }: Fluent.IGroup) => {
        if (expandedRefs.current) {
          isCollapsed
            ? expandedRefs.current[key] = false
            : delete expandedRefs.current[key]
        } else {
          expandedRefs.current = { [key]: false }
        }
      },
      onRenderRow = (props?: Fluent.IDetailsRowProps) => props
        ? <Fluent.DetailsRow {...props} styles={styleProps =>
        ({
          cell: { alignSelf: 'center', fontSize: 14, lineHeight: 20, color: cssVar('$text9') },
          checkCell: { display: 'flex', alignItems: 'center' },
          root: [
            {

Review comment (suggestion):
nit
```suggestion
                    background: important(cssVar('$neutralLight')),
```

Code after:
                cellIsGroupExpander: {
                  // HACK: fixed size of expand/collapse button in column header
                  height: 48
                }
              }}
            />
          </Fluent.Sticky>
        )
      }, [groups]),
      onRenderGroupHeader = React.useCallback((props?: Fluent.IDetailsGroupDividerProps) => {
        if (!props) return <span />

        return (
          <Fluent.GroupHeader
            {...props}
            styles={stylesProps => ({
              root: [
                {
                  position: 'sticky',
                  top: 48,
                  backgroundColor: cssVar('$card'),
                  zIndex: 1
                },
                stylesProps.selected
                  ? {
                    background: important(cssVar('$neutralLighter')),
                    '.ms-GroupHeader-check': { opacity: 1 }
                  }
                  : undefined
              ]
            })
            } />
        )
      }, []),
      onToggleCollapseAll = (isAllCollapsed: B) => expandedRefs.current = isAllCollapsed ? {} : null,
      onToggleCollapse = ({ key, isCollapsed }: Fluent.IGroup) => {
        if (expandedRefs.current) {
          isCollapsed
            ? expandedRefs.current[key] = false
            : delete expandedRefs.current[key]
        } else {
          expandedRefs.current = { [key]: false }
        }
      },
      onRenderRow = (props?: Fluent.IDetailsRowProps) => props
        ? <Fluent.DetailsRow {...props} styles={styleProps =>
        ({
          cell: { alignSelf: 'center', fontSize: 14, lineHeight: 20, color: cssVar('$text9') },
          checkCell: { display: 'flex', alignItems: 'center' },
          root: [
            {