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

Code before:
      selectedFilters,
      groups,
      expandedRefs,
      selection,
      sort,
      isMultiple,
      setFiltersInBulk
    }), [filteredItems, groups, expandedRefs, isMultiple, items, m, onFilterChange, selectedFilters, selection, sort, setFiltersInBulk])

    return (
      <div data-test={m.name} style={{ position: 'relative', height: computeHeight()  }}>
        <Fluent.Stack horizontal horizontalAlign='space-between' verticalAlign="end"  >
           <Fluent.Stack.Item align='start' styles={{ root: { width: '50%', maxWidth: 500, margin: "28px 0 0 0"} }}>
          {!!searchableKeys.length && <Fluent.SearchBox data-test='search' placeholder='Search' onChange={onSearchChange} value={searchStr} /> }
           </Fluent.Stack.Item>
          
          <Fluent.Stack.Item align='end' styles={{ root: { width:300,}}}  >
          {groupable && !m.pagination && <Fluent.Dropdown data-test='groupby' label='Group by' selectedKey={groupByKey} onChange={onGroupByChange} options={groupByOptions}/>}
           </Fluent.Stack.Item>
       </Fluent.Stack >
        <Fluent.ScrollablePane
          componentRef={contentRef}
          scrollbarVisibility={Fluent.ScrollbarVisibility.auto}
          styles={{
            /* root: { top: groupable || searchableKeys.length ? (groupable ? 74 : 48) : 0, bottom: shouldShowFooter ? 46 : 0 },*/
            root: { top: groupable || searchableKeys.length ? (groupable ? 120 : 100) : 0, bottom: shouldShowFooter ? 46 : 0 },
            stickyAbove: { right: important('12px'), border: border(2, 'transparent'), zIndex: 2 },
            contentContainer: { border: border(2, cssVar('$neutralLight')), borderRadius: '4px 4px 0 0' }
          }}>
          {
            isMultiple
              ? <Fluent.MarqueeSelection selection={selection}><DataTable ref={tableRef} {...dataTableProps} /></Fluent.MarqueeSelection>
              : <DataTable ref={tableRef} {...dataTableProps} />
          }
        </Fluent.ScrollablePane>
        {shouldShowFooter && (
          <Footer
            m={m}
            currentPage={currentPage}
            onPageChange={onPageChange}
            isSearchable={isSearchable}
            isFilterable={isFilterable}
            displayedRows={`${formatNum(filteredItems.length)} of ${formatNum(items.length)}`}
            reset={reset}
          />
        )}
      </div >
    )
  }


Review comment (suggestion):
This seems to add a lot of unnecessary space between search/groupby and table. Let's go with the previous values (`groupable ? 74 : 48`).

Code after:
      selectedFilters,
      groups,
      expandedRefs,
      selection,
      sort,
      isMultiple,
      setFiltersInBulk
    }), [filteredItems, groups, expandedRefs, isMultiple, items, m, onFilterChange, selectedFilters, selection, sort, setFiltersInBulk])

    return (
      <div data-test={m.name} style={{ position: 'relative', height: computeHeight() }}>
        <Fluent.Stack horizontal>
          {
            groupable && !m.pagination && (
              <Fluent.Dropdown
                data-test='groupby'
                label='Group by'
                selectedKey={groupByKey}
                onChange={onGroupByChange}
                options={groupByOptions}
                styles={{ root: { width: 300, marginRight: 'auto' } }}
              />
            )
          }
          {
            !!searchableKeys.length && (
              <Fluent.SearchBox
                data-test='search'
                placeholder='Search'
                onChange={onSearchChange}
                value={searchStr}
                styles={{ root: { width: '50%', maxWidth: 500, marginLeft: 'auto', alignSelf: 'flex-end' } }}
              />
            )
          }
        </Fluent.Stack >
        <Fluent.ScrollablePane
          componentRef={contentRef}
          scrollbarVisibility={Fluent.ScrollbarVisibility.auto}
          styles={{
            root: { top: groupable || searchableKeys.length ? (groupable ? 74 : 48) : 0, bottom: shouldShowFooter ? 46 : 0 },
            stickyAbove: { right: important('12px'), border: border(2, 'transparent'), zIndex: 2 },
            contentContainer: { border: border(2, cssVar('$neutralLight')), borderRadius: '4px 4px 0 0' }
          }}>
          {
            isMultiple
              ? <Fluent.MarqueeSelection selection={selection}><DataTable ref={tableRef} {...dataTableProps} /></Fluent.MarqueeSelection>
              : <DataTable ref={tableRef} {...dataTableProps} />
          }
        </Fluent.ScrollablePane>
        {shouldShowFooter && (