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

Code before:
        }

        filter(null)
        search()
      }, [filter, initGroups, m.events, m.groups, m.name, m.pagination, search]),
      selection = React.useMemo(() => new Fluent.Selection({
        onSelectionChanged: () => {
          const selectedItemKeys = selection.getSelection().map(item => item.key as S)
          wave.args[m.name] = selectedItemKeys
          if (m.events?.includes('select')) wave.emit(m.name, 'select', selectedItemKeys)
        }
      }), [m.name, m.events]),
      computeHeight = () => {
        if (m.height) return m.height
        if (items.length > 10) return 500

        const
          topToolbarHeight = searchableKeys.length || groupable ? (groupable ? 74 : 48) : 0,
          headerHeight = 50,
          rowHeight = m.columns.some(c => c.cell_type?.progress) ? 76 : 48,
          footerHeight = m.downloadable || m.resettable || searchableKeys.length || m.columns.some(c => c.filterable) ? 46 : 0,
          bottomBorder = 2

        return topToolbarHeight + headerHeight + (items.length * rowHeight) + footerHeight + bottomBorder
      },
      computeWidth = () => {
        if (m.width) return m.width
        const
          columnsWidth = m.columns.reduce((acc, col) => acc + 20 + parseInt(col.min_width || '150'), 0),
          selectionWidth = (isSingle || isMultiple ? 48 : 0),
          cellSizerWidth = 12
        return columnsWidth + selectionWidth + cellSizerWidth
      },
      sort = React.useCallback((column: WaveColumn, sortAsc: B) => {
        if (m.pagination && m.events?.includes('sort')) {
          wave.emit(m.name, 'sort', { [column.fieldName || column.name]: sortAsc })
          setCurrentPage(1)
          return
        }
        setGroups(groups => {
          if (groups) {
            setFilteredItems(filteredItems => [...groups]
              // sorts groups by startIndex to match its order in filteredItems
              .sort((group1, group2) => group1.startIndex - group2.startIndex)
              .reduce((acc, group) => [...acc, ...filteredItems.slice(group.startIndex, acc.length + group.count).sort(sortingF(column, sortAsc))],
                [] as any[]) || [])
          }
          else setFilteredItems(filteredItems => [...filteredItems].sort(sortingF(column, sortAsc)))
          return groups
        })
      }, [m.events, m.name, m.pagination]),

Review comment (suggestion):
Let's go for a default width instead rather than such computations. Also IIUC, this computation is run everytime and overridden by `minWidth: 100%` if possible. A better solution would be to apply the default width only when needed.

Code after:
        }

        filter(null)
        search()
      }, [filter, initGroups, m.events, m.groups, m.name, m.pagination, search]),
      selection = React.useMemo(() => new Fluent.Selection({
        onSelectionChanged: () => {
          const selectedItemKeys = selection.getSelection().map(item => item.key as S)
          wave.args[m.name] = selectedItemKeys
          if (m.events?.includes('select')) wave.emit(m.name, 'select', selectedItemKeys)
        }
      }), [m.name, m.events]),
      computeHeight = () => {
        if (m.height) return m.height
        if (items.length > 10) return 500

        const
          topToolbarHeight = searchableKeys.length || groupable ? (groupable ? 74 : 48) : 0,
          headerHeight = 50,
          rowHeight = m.columns.some(c => c.cell_type?.progress) ? 76 : 48,
          footerHeight = m.downloadable || m.resettable || searchableKeys.length || m.columns.some(c => c.filterable) ? 46 : 0,
          bottomBorder = 2

        return topToolbarHeight + headerHeight + (items.length * rowHeight) + footerHeight + bottomBorder
      },
      sort = React.useCallback((column: WaveColumn, sortAsc: B) => {
        if (m.pagination && m.events?.includes('sort')) {
          wave.emit(m.name, 'sort', { [column.fieldName || column.name]: sortAsc })
          setCurrentPage(1)
          return
        }
        setGroups(groups => {
          if (groups) {
            setFilteredItems(filteredItems => [...groups]
              // sorts groups by startIndex to match its order in filteredItems
              .sort((group1, group2) => group1.startIndex - group2.startIndex)
              .reduce((acc, group) => [...acc, ...filteredItems.slice(group.startIndex, acc.length + group.count).sort(sortingF(column, sortAsc))],
                [] as any[]) || [])
          }
          else setFilteredItems(filteredItems => [...filteredItems].sort(sortingF(column, sortAsc)))
          return groups
        })
      }, [m.events, m.name, m.pagination]),
      setFiltersInBulk = React.useCallback((colKey: S, filters: S[]) => {
        setSelectedFilters(selectedFilters => {
          const newFilters = {
            ...selectedFilters,
            [colKey]: filters
          }
          if (m.pagination && m.events?.includes('filter')) {
            wave.emit(m.name, 'filter', newFilters)