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

Code before:
      skipNextEventEmit = React.useRef<B>(false),
      groupByOptions: Fluent.IDropdownOption[] = React.useMemo(() =>
        groupable ? [{ key: '*', text: '(No Grouping)' }, ...m.columns.map(col => ({ key: col.name, text: col.label }))] : [], [m.columns, groupable]
      ),
      filter = React.useCallback((selectedFilters: Dict<S[]> | null) => {
        // If we have filters, check if any of the data-item's props (filter's keys) equals to any of its filter values.
        setFilteredItems(selectedFilters
          ? items.filter(item => Object.keys(selectedFilters)
            .every(filterKey => !selectedFilters[filterKey].length || selectedFilters[filterKey].some(filterVal => String(item[filterKey]).includes(filterVal)))
          )
          : items
        )
      }, [items]),
      getIsCollapsed = (key: S, expandedRefs: { [key: S]: B } | null) => {
        if (expandedRefs === null) return false
        const expandedRef = expandedRefs[key]
        return expandedRef === undefined || expandedRef
      },
      initialGroups = React.useMemo(() => {
        return m.groups
          ? m.groups.reduce((acc, { label }) => {
            acc[label] = ({ key: label, name: label, startIndex: 0, count: 0 })
            return acc
          }, {} as Dict<Fluent.IGroup>)
          : groupByKey !== '*'
            ? items.reduce((acc, item) => {
              const group = (item as Fluent.IObjectWithKey & Dict<any>)[groupByKey]
              if (!acc[group]) acc[group] = ({ key: group, name: group, startIndex: 0, count: 0 })
              return acc
            }, {} as Dict<Fluent.IGroup>)
            : {}
      }, [m.groups, groupByKey, items]),
      makeGroups = React.useCallback((groupByKey: S, filteredItems: (Fluent.IObjectWithKey & Dict<any>)[]) => {
        const allGroups: Dict<Fluent.IGroup> = { ...initialGroups }
        let
          groups: Fluent.IGroup[],
          groupedBy: Dict<any> = []

        if (m.groups) {
          filteredItems.forEach(({ group }, idx) => {
            allGroups[group].count === 0
              ? allGroups[group] = ({ key: group, name: group, startIndex: idx, count: 1, isCollapsed: getIsCollapsed(group, expandedRefs.current) })
              : allGroups[group].count++
          })
          groups = Object.values(allGroups)
        } else {
          let prevSum = 0
          groupedBy = groupByF(filteredItems, groupByKey)
          const
            groupedByKeys = Object.keys(groupedBy),
            groupByColType = m.columns.find(c => c.name === groupByKey)?.data_type

Review comment (suggestion):
Wouldn't keeping group names only be enough?

```suggestion
      groupNames = React.useMemo(() => {
        return m.groups
          ? m.groups.reduce((acc, { label }) => acc.add(label), new Set<S>())
          : groupByKey !== '*'
            ? (items as Dict<S>[]).reduce((acc, item) => acc.add(item[groupByKey]), new Set<S>())
            : new Set<S>()
      }, [m.groups, groupByKey, items]),
```

Code after:
      tableRef = React.useRef<{ resetSortIcons: () => void } | null>(null),
      skipNextEventEmit = React.useRef<B>(false),
      groupByOptions: Fluent.IDropdownOption[] = React.useMemo(() =>
        groupable ? [{ key: '*', text: '(No Grouping)' }, ...m.columns.map(col => ({ key: col.name, text: col.label }))] : [], [m.columns, groupable]
      ),
      filter = React.useCallback((selectedFilters: Dict<S[]> | null) => {
        // If we have filters, check if any of the data-item's props (filter's keys) equals to any of its filter values.
        setFilteredItems(selectedFilters
          ? items.filter(item => Object.keys(selectedFilters)
            .every(filterKey => !selectedFilters[filterKey].length || selectedFilters[filterKey].some(filterVal => String(item[filterKey]).includes(filterVal)))
          )
          : items
        )
      }, [items]),
      getIsCollapsed = (key: S, expandedRefs: { [key: S]: B } | null) => {
        if (expandedRefs === null) return false
        const expandedRef = expandedRefs[key]
        return expandedRef === undefined || expandedRef
      },
      groupNames = React.useMemo(() => {
        return m.groups
          ? m.groups.reduce((acc, { label }) => acc.add(label), new Set<S>())
          : groupByKey !== '*'
            ? (items as Dict<S>[]).reduce((acc, item) => acc.add(item[groupByKey]), new Set<S>())
            : new Set<S>()
      }, [m.groups, groupByKey, items]),
      makeGroups = React.useCallback((groupByKey: S, filteredItems: (Fluent.IObjectWithKey & Dict<any>)[]) => {
        const allGroups = [...groupNames].reduce((acc, groupName) => {
          acc[groupName] = { key: groupName, name: groupName, startIndex: 0, count: 0, isCollapsed: getIsCollapsed(groupName, expandedRefs.current) }
          return acc
        }, {} as Dict<Fluent.IGroup>)
        let
          groups: Fluent.IGroup[],
          groupedBy: Dict<any> = []

        if (m.groups) {
          filteredItems.forEach(({ group }, idx) => {
            allGroups[group].count === 0
              ? allGroups[group] = { ...allGroups[group], startIndex: idx, count: 1 }
              : allGroups[group].count++
          })
          groups = Object.values(allGroups)
        } else {
          let prevSum = 0
          groupedBy = groupByF(filteredItems, groupByKey)
          const
            groupedByKeys = Object.keys(groupedBy),
            groupByColType = m.columns.find(c => c.name === groupByKey)?.data_type

          groupedByKeys.forEach((key, i) => {
            if (i !== 0) {