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

Code before:
        expandedRefs.current = m.groups?.reduce((acc, { label, collapsed = true }) => {
          if (!collapsed) acc[label] = false
          return acc
        }, {} as { [key: S]: B })
        initGroups()
      }
    }, [initGroups, m.groups])

    const dataTableProps: DataTable = React.useMemo(() => ({
      model: m,
      onFilterChange,
      items,
      filteredItems,
      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}

Review comment (suggestion):
I guess the `align` should be `end` here instead of `start` since we use horizontal Stack and according to the Fluent align docs:

_Defines how to align the StackItem along the x-axis (for vertical Stacks) or the y-axis (for horizontal Stacks)._

Also, what is the extra margin for?

```suggestion
           <Fluent.Stack.Item align='end' styles={{ root: { width: '50%', maxWidth: 500} }}>
```

Code after:
        expandedRefs.current = m.groups?.reduce((acc, { label, collapsed = true }) => {
          if (!collapsed) acc[label] = false
          return acc
        }, {} as { [key: S]: B })
        initGroups()
      }
    }, [initGroups, m.groups])

    const dataTableProps: DataTable = React.useMemo(() => ({
      model: m,
      onFilterChange,
      items,
      filteredItems,
      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}