diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx
index cf32bf0455a1b..dad0f0e5ee282 100644
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx
@@ -4,31 +4,30 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { MouseEventHandler, FC, useContext, useState } from 'react';
+import React, { MouseEventHandler, FC, useContext, useEffect, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
 import {
-  Direction,
-  EuiBadge,
+  EuiBasicTable,
+  EuiBasicTableProps,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiCallOut,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiInMemoryTable,
-  EuiSearchBarProps,
+  EuiSearchBar,
+  EuiSpacer,
   EuiPopover,
   EuiTitle,
 } from '@elastic/eui';
 
-import { TransformId, TRANSFORM_STATE } from '../../../../../../common';
+import { TransformId } from '../../../../../../common';
 
 import {
   useRefreshTransformList,
   TransformListRow,
-  TRANSFORM_MODE,
   TRANSFORM_LIST_COLUMN,
 } from '../../../../common';
 import { useStopTransforms } from '../../../../hooks';
@@ -45,9 +44,11 @@ import {
 import { useStartAction, StartActionName, StartActionModal } from '../action_start';
 import { StopActionName } from '../action_stop';
 
-import { ItemIdToExpandedRowMap, Clause, TermClause, FieldClause, Value } from './common';
-import { getTaskStateBadge, useColumns } from './use_columns';
+import { ItemIdToExpandedRowMap } from './common';
+import { useColumns } from './use_columns';
 import { ExpandedRow } from './expanded_row';
+import { TransformSearchBar, filterTransforms } from './transform_search_bar';
+import { useTableSettings } from './use_table_settings';
 
 function getItemIdToExpandedRowMap(
   itemIds: TransformId[],
@@ -62,14 +63,6 @@ function getItemIdToExpandedRowMap(
   }, {} as ItemIdToExpandedRowMap);
 }
 
-function stringMatch(str: string | undefined, substr: any) {
-  return (
-    typeof str === 'string' &&
-    typeof substr === 'string' &&
-    (str.toLowerCase().match(substr.toLowerCase()) === null) === false
-  );
-}
-
 interface Props {
   errorMessage: any;
   isInitialized: boolean;
@@ -88,24 +81,14 @@ export const TransformList: FC<Props> = ({
   const [isLoading, setIsLoading] = useState(false);
   const { refresh } = useRefreshTransformList({ isLoading: setIsLoading });
 
-  const [filterActive, setFilterActive] = useState(false);
-
+  const [searchQueryText, setSearchQueryText] = useState<string>('');
   const [filteredTransforms, setFilteredTransforms] = useState<TransformListRow[]>([]);
   const [expandedRowItemIds, setExpandedRowItemIds] = useState<TransformId[]>([]);
-
   const [transformSelection, setTransformSelection] = useState<TransformListRow[]>([]);
   const [isActionsMenuOpen, setIsActionsMenuOpen] = useState(false);
   const bulkStartAction = useStartAction(false);
   const bulkDeleteAction = useDeleteAction(false);
 
-  const [searchError, setSearchError] = useState<any>(undefined);
-
-  const [pageIndex, setPageIndex] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
-
-  const [sortField, setSortField] = useState<string>(TRANSFORM_LIST_COLUMN.ID);
-  const [sortDirection, setSortDirection] = useState<Direction>('asc');
-
   const stopTransforms = useStopTransforms();
 
   const { capabilities } = useContext(AuthorizationContext);
@@ -114,90 +97,41 @@ export const TransformList: FC<Props> = ({
     !capabilities.canPreviewTransform ||
     !capabilities.canStartStopTransform;
 
-  const onQueryChange = ({
-    query,
-    error,
-  }: Parameters<NonNullable<EuiSearchBarProps['onChange']>>[0]) => {
-    if (error) {
-      setSearchError(error.message);
+  const { columns, modals: singleActionModals } = useColumns(
+    expandedRowItemIds,
+    setExpandedRowItemIds,
+    transformSelection
+  );
+
+  const updateFilteredItems = (queryClauses: any) => {
+    if (queryClauses.length) {
+      const filtered = filterTransforms(transforms, queryClauses);
+      setFilteredTransforms(filtered);
     } else {
-      let clauses: Clause[] = [];
-      if (query && query.ast !== undefined && query.ast.clauses !== undefined) {
-        clauses = query.ast.clauses;
-      }
-      if (clauses.length > 0) {
-        setFilterActive(true);
-        filterTransforms(clauses as Array<TermClause | FieldClause>);
-      } else {
-        setFilterActive(false);
-      }
-      setSearchError(undefined);
+      setFilteredTransforms(transforms);
     }
   };
 
-  const filterTransforms = (clauses: Array<TermClause | FieldClause>) => {
-    setIsLoading(true);
-    // keep count of the number of matches we make as we're looping over the clauses
-    // we only want to return transforms which match all clauses, i.e. each search term is ANDed
-    // { transform-one:  { transform: { id: transform-one, config: {}, state: {}, ... }, count: 0 }, transform-two: {...} }
-    const matches: Record<string, any> = transforms.reduce((p: Record<string, any>, c) => {
-      p[c.id] = {
-        transform: c,
-        count: 0,
-      };
-      return p;
-    }, {});
-
-    clauses.forEach((c) => {
-      // the search term could be negated with a minus, e.g. -bananas
-      const bool = c.match === 'must';
-      let ts = [];
-
-      if (c.type === 'term') {
-        // filter term based clauses, e.g. bananas
-        // match on ID and description
-        // if the term has been negated, AND the matches
-        if (bool === true) {
-          ts = transforms.filter(
-            (transform) =>
-              stringMatch(transform.id, c.value) === bool ||
-              stringMatch(transform.config.description, c.value) === bool
-          );
-        } else {
-          ts = transforms.filter(
-            (transform) =>
-              stringMatch(transform.id, c.value) === bool &&
-              stringMatch(transform.config.description, c.value) === bool
-          );
+  useEffect(() => {
+    const filterList = () => {
+      if (searchQueryText !== '') {
+        const query = EuiSearchBar.Query.parse(searchQueryText);
+        let clauses: any = [];
+        if (query && query.ast !== undefined && query.ast.clauses !== undefined) {
+          clauses = query.ast.clauses;
         }
+        updateFilteredItems(clauses);
       } else {
-        // filter other clauses, i.e. the mode and status filters
-        if (Array.isArray(c.value)) {
-          // the status value is an array of string(s) e.g. ['failed', 'stopped']
-          ts = transforms.filter((transform) =>
-            (c.value as Value[]).includes(transform.stats.state)
-          );
-        } else {
-          ts = transforms.filter((transform) => transform.mode === c.value);
-        }
+        updateFilteredItems([]);
       }
-
-      ts.forEach((t) => matches[t.id].count++);
-    });
-
-    // loop through the matches and return only transforms which have match all the clauses
-    const filtered = Object.values(matches)
-      .filter((m) => (m && m.count) >= clauses.length)
-      .map((m) => m.transform);
-
-    setFilteredTransforms(filtered);
-    setIsLoading(false);
-  };
-
-  const { columns, modals: singleActionModals } = useColumns(
-    expandedRowItemIds,
-    setExpandedRowItemIds,
-    transformSelection
+    };
+    filterList();
+    // eslint-disable-next-line
+  }, [searchQueryText, transforms]); // missing dependency updateFilteredItems
+
+  const { onTableChange, pageOfItems, pagination, sorting } = useTableSettings<TransformListRow>(
+    TRANSFORM_LIST_COLUMN.ID,
+    filteredTransforms
   );
 
   // Before the transforms have been loaded for the first time, display the loading indicator only.
@@ -246,23 +180,8 @@ export const TransformList: FC<Props> = ({
     );
   }
 
-  const sorting = {
-    sort: {
-      field: sortField,
-      direction: sortDirection,
-    },
-  };
-
   const itemIdToExpandedRowMap = getItemIdToExpandedRowMap(expandedRowItemIds, transforms);
 
-  const pagination = {
-    initialPageIndex: pageIndex,
-    initialPageSize: pageSize,
-    totalItemCount: transforms.length,
-    pageSizeOptions: [10, 20, 50],
-    hidePerPageOptions: false,
-  };
-
   const bulkActionMenuItems = [
     <div key="startAction" className="transform__BulkActionItem">
       <EuiButtonEmpty onClick={() => bulkStartAction.openModal(transformSelection)}>
@@ -331,7 +250,7 @@ export const TransformList: FC<Props> = ({
     ];
   };
 
-  const renderToolsRight = () => (
+  const toolsRight = (
     <EuiFlexGroup gutterSize="m" justifyContent="spaceAround">
       <EuiFlexItem>
         <RefreshTransformListButton onClick={refresh} isLoading={isLoading} />
@@ -342,56 +261,6 @@ export const TransformList: FC<Props> = ({
     </EuiFlexGroup>
   );
 
-  const search = {
-    toolsLeft: transformSelection.length > 0 ? renderToolsLeft() : undefined,
-    toolsRight: renderToolsRight(),
-    onChange: onQueryChange,
-    box: {
-      incremental: true,
-    },
-    filters: [
-      {
-        type: 'field_value_selection' as const,
-        field: 'state.state',
-        name: i18n.translate('xpack.transform.statusFilter', { defaultMessage: 'Status' }),
-        multiSelect: 'or' as const,
-        options: Object.values(TRANSFORM_STATE).map((val) => ({
-          value: val,
-          name: val,
-          view: getTaskStateBadge(val),
-        })),
-      },
-      {
-        type: 'field_value_selection' as const,
-        field: 'mode',
-        name: i18n.translate('xpack.transform.modeFilter', { defaultMessage: 'Mode' }),
-        multiSelect: false,
-        options: Object.values(TRANSFORM_MODE).map((val) => ({
-          value: val,
-          name: val,
-          view: (
-            <EuiBadge className="transform__TaskModeBadge" color="hollow">
-              {val}
-            </EuiBadge>
-          ),
-        })),
-      },
-    ],
-  };
-
-  const onTableChange = ({
-    page = { index: 0, size: 10 },
-    sort = { field: TRANSFORM_LIST_COLUMN.ID as string, direction: 'asc' },
-  }) => {
-    const { index, size } = page;
-    setPageIndex(index);
-    setPageSize(size);
-
-    const { field, direction } = sort;
-    setSortField(field as string);
-    setSortDirection(direction as Direction);
-  };
-
   const selection = {
     onSelectionChange: (selected: TransformListRow[]) => setTransformSelection(selected),
   };
@@ -404,30 +273,38 @@ export const TransformList: FC<Props> = ({
 
       {/* Single Action Modals */}
       {singleActionModals}
-
-      <EuiInMemoryTable
-        allowNeutralSort={false}
-        className="transform__TransformTable"
+      <EuiFlexGroup alignItems="center">
+        {transformSelection.length > 0 ? (
+          <EuiFlexItem grow={false}>{renderToolsLeft()}</EuiFlexItem>
+        ) : null}
+        <EuiFlexItem>
+          <TransformSearchBar
+            searchQueryText={searchQueryText}
+            setSearchQueryText={setSearchQueryText}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{toolsRight}</EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="l" />
+      <EuiBasicTable<TransformListRow>
         columns={columns}
-        error={searchError}
         hasActions={false}
         isExpandable={true}
         isSelectable={false}
-        items={filterActive ? filteredTransforms : transforms}
+        items={pageOfItems as TransformListRow[]}
         itemId={TRANSFORM_LIST_COLUMN.ID}
         itemIdToExpandedRowMap={itemIdToExpandedRowMap}
         loading={isLoading || transformsLoading}
-        onTableChange={onTableChange}
-        pagination={pagination}
-        rowProps={(item) => ({
-          'data-test-subj': `transformListRow row-${item.id}`,
-        })}
+        onChange={onTableChange as EuiBasicTableProps<TransformListRow>['onChange']}
         selection={selection}
+        pagination={pagination!}
         sorting={sorting}
-        search={search}
         data-test-subj={`transformListTable ${
           isLoading || transformsLoading ? 'loading' : 'loaded'
         }`}
+        rowProps={(item) => ({
+          'data-test-subj': `transformListRow row-${item.id}`,
+        })}
       />
     </div>
   );
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar.tsx
new file mode 100644
index 0000000000000..fab591f881310
--- /dev/null
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_search_bar.tsx
@@ -0,0 +1,181 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Dispatch, SetStateAction, FC, Fragment, useState } from 'react';
+import {
+  EuiBadge,
+  EuiSearchBar,
+  EuiSearchBarProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  SearchFilterConfig,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { TermClause, FieldClause, Value } from './common';
+import { TRANSFORM_STATE } from '../../../../../../common';
+import { TRANSFORM_MODE, TransformListRow } from '../../../../common';
+import { getTaskStateBadge } from './use_columns';
+
+const filters: SearchFilterConfig[] = [
+  {
+    type: 'field_value_selection',
+    field: 'state.state',
+    name: i18n.translate('xpack.transform.statusFilter', { defaultMessage: 'Status' }),
+    multiSelect: 'or',
+    options: Object.values(TRANSFORM_STATE).map((val) => ({
+      value: val,
+      name: val,
+      view: getTaskStateBadge(val),
+    })),
+  },
+  {
+    type: 'field_value_selection',
+    field: 'mode',
+    name: i18n.translate('xpack.transform.modeFilter', { defaultMessage: 'Mode' }),
+    multiSelect: false,
+    options: Object.values(TRANSFORM_MODE).map((val) => ({
+      value: val,
+      name: val,
+      view: (
+        <EuiBadge className="transform__TaskModeBadge" color="hollow">
+          {val}
+        </EuiBadge>
+      ),
+    })),
+  },
+];
+
+function stringMatch(str: string | undefined, substr: any) {
+  return (
+    typeof str === 'string' &&
+    typeof substr === 'string' &&
+    (str.toLowerCase().match(substr.toLowerCase()) === null) === false
+  );
+}
+
+export const filterTransforms = (
+  transforms: TransformListRow[],
+  clauses: Array<TermClause | FieldClause>
+) => {
+  // keep count of the number of matches we make as we're looping over the clauses
+  // we only want to return transforms which match all clauses, i.e. each search term is ANDed
+  // { transform-one:  { transform: { id: transform-one, config: {}, state: {}, ... }, count: 0 }, transform-two: {...} }
+  const matches: Record<string, any> = transforms.reduce((p: Record<string, any>, c) => {
+    p[c.id] = {
+      transform: c,
+      count: 0,
+    };
+    return p;
+  }, {});
+
+  clauses.forEach((c) => {
+    // the search term could be negated with a minus, e.g. -bananas
+    const bool = c.match === 'must';
+    let ts = [];
+
+    if (c.type === 'term') {
+      // filter term based clauses, e.g. bananas
+      // match on ID and description
+      // if the term has been negated, AND the matches
+      if (bool === true) {
+        ts = transforms.filter(
+          (transform) =>
+            stringMatch(transform.id, c.value) === bool ||
+            stringMatch(transform.config.description, c.value) === bool
+        );
+      } else {
+        ts = transforms.filter(
+          (transform) =>
+            stringMatch(transform.id, c.value) === bool &&
+            stringMatch(transform.config.description, c.value) === bool
+        );
+      }
+    } else {
+      // filter other clauses, i.e. the mode and status filters
+      if (Array.isArray(c.value)) {
+        // the status value is an array of string(s) e.g. ['failed', 'stopped']
+        ts = transforms.filter((transform) => (c.value as Value[]).includes(transform.stats.state));
+      } else {
+        ts = transforms.filter((transform) => transform.mode === c.value);
+      }
+    }
+
+    ts.forEach((t) => matches[t.id].count++);
+  });
+
+  // loop through the matches and return only transforms which have match all the clauses
+  const filtered = Object.values(matches)
+    .filter((m) => (m && m.count) >= clauses.length)
+    .map((m) => m.transform);
+
+  return filtered;
+};
+
+function getError(errorMessage: string | null) {
+  if (errorMessage) {
+    return i18n.translate('xpack.transform.transformList.searchBar.invalidSearchErrorMessage', {
+      defaultMessage: 'Invalid search: {errorMessage}',
+      values: { errorMessage },
+    });
+  }
+
+  return '';
+}
+
+interface Props {
+  searchQueryText: string;
+  setSearchQueryText: Dispatch<SetStateAction<string>>;
+}
+
+export const TransformSearchBar: FC<Props> = ({ searchQueryText, setSearchQueryText }) => {
+  const [errorMessage, setErrorMessage] = useState<null | string>(null);
+
+  const onChange: EuiSearchBarProps['onChange'] = ({ query, error }) => {
+    if (error) {
+      setErrorMessage(error.message);
+    } else if (query !== null && query.text !== undefined) {
+      setSearchQueryText(query.text);
+      setErrorMessage(null);
+    }
+  };
+
+  return (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem data-test-subj="transformSearchBar" grow={false}>
+        {searchQueryText === undefined && (
+          <EuiSearchBar
+            box={{
+              incremental: true,
+            }}
+            filters={filters}
+            onChange={onChange}
+            className="transformSearchBar"
+          />
+        )}
+        {searchQueryText !== undefined && (
+          <EuiSearchBar
+            box={{
+              incremental: true,
+            }}
+            defaultQuery={searchQueryText}
+            filters={filters}
+            onChange={onChange}
+            className="transformSearchBar"
+          />
+        )}
+        <EuiFormRow
+          fullWidth
+          isInvalid={errorMessage !== null}
+          error={getError(errorMessage)}
+          style={{ maxHeight: '0px' }}
+        >
+          <Fragment />
+        </EuiFormRow>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_table_settings.ts b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_table_settings.ts
new file mode 100644
index 0000000000000..ad40a3f8103b9
--- /dev/null
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_table_settings.ts
@@ -0,0 +1,135 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useState } from 'react';
+import { Direction, EuiBasicTableProps, EuiTableSortingType } from '@elastic/eui';
+import sortBy from 'lodash/sortBy';
+import get from 'lodash/get';
+
+const PAGE_SIZE = 10;
+const PAGE_SIZE_OPTIONS = [10, 25, 50];
+
+const propertyMap = {
+  Mode: 'mode',
+};
+
+// Copying from EUI EuiBasicTable types as type is not correctly picked up for table's onChange
+// Can be removed when https://github.com/elastic/eui/issues/4011 is addressed in EUI
+export interface Criteria<T> {
+  page?: {
+    index: number;
+    size: number;
+  };
+  sort?: {
+    field: keyof T;
+    direction: Direction;
+  };
+}
+export interface CriteriaWithPagination<T> extends Criteria<T> {
+  page: {
+    index: number;
+    size: number;
+  };
+}
+
+interface AnalyticsBasicTableSettings<T> {
+  pageIndex: number;
+  pageSize: number;
+  totalItemCount: number;
+  hidePerPageOptions: boolean;
+  sortField: keyof T;
+  sortDirection: Direction;
+}
+
+interface UseTableSettingsReturnValue<T> {
+  onTableChange: EuiBasicTableProps<T>['onChange'];
+  pageOfItems: T[];
+  pagination: EuiBasicTableProps<T>['pagination'];
+  sorting: EuiTableSortingType<any>;
+}
+
+export function useTableSettings<TypeOfItem>(
+  sortByField: keyof TypeOfItem,
+  items: TypeOfItem[]
+): UseTableSettingsReturnValue<TypeOfItem> {
+  const [tableSettings, setTableSettings] = useState<AnalyticsBasicTableSettings<TypeOfItem>>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+    totalItemCount: 0,
+    hidePerPageOptions: false,
+    sortField: sortByField,
+    sortDirection: 'asc',
+  });
+
+  const getPageOfItems = (
+    list: TypeOfItem[],
+    index: number,
+    size: number,
+    sortField: keyof TypeOfItem,
+    sortDirection: Direction
+  ) => {
+    list = sortBy(list, (item) =>
+      get(item, propertyMap[sortField as keyof typeof propertyMap] || sortField)
+    );
+    list = sortDirection === 'asc' ? list : list.reverse();
+    const listLength = list.length;
+
+    let pageStart = index * size;
+    if (pageStart >= listLength && listLength !== 0) {
+      // if the page start is larger than the number of items due to
+      // filters being applied or items being deleted, calculate a new page start
+      pageStart = Math.floor((listLength - 1) / size) * size;
+
+      setTableSettings({ ...tableSettings, pageIndex: pageStart / size });
+    }
+    return {
+      pageOfItems: list.slice(pageStart, pageStart + size),
+      totalItemCount: listLength,
+    };
+  };
+
+  const onTableChange: EuiBasicTableProps<TypeOfItem>['onChange'] = ({
+    page = { index: 0, size: PAGE_SIZE },
+    sort = { field: sortByField, direction: 'asc' },
+  }: CriteriaWithPagination<TypeOfItem>) => {
+    const { index, size } = page;
+    const { field, direction } = sort;
+
+    setTableSettings({
+      ...tableSettings,
+      pageIndex: index,
+      pageSize: size,
+      sortField: field,
+      sortDirection: direction,
+    });
+  };
+
+  const { pageIndex, pageSize, sortField, sortDirection } = tableSettings;
+
+  const { pageOfItems, totalItemCount } = getPageOfItems(
+    items,
+    pageIndex,
+    pageSize,
+    sortField,
+    sortDirection
+  );
+
+  const pagination = {
+    pageIndex,
+    pageSize,
+    totalItemCount,
+    pageSizeOptions: PAGE_SIZE_OPTIONS,
+  };
+
+  const sorting = {
+    sort: {
+      field: sortField,
+      direction: sortDirection,
+    },
+  };
+
+  return { onTableChange, pageOfItems, pagination, sorting };
+}