From a107a3b40f288e5fa02a4d360c18cedfdc792cb1 Mon Sep 17 00:00:00 2001
From: Nick Zelei <2420177+nickzelei@users.noreply.github.com>
Date: Tue, 7 Jan 2025 11:02:08 -0800
Subject: [PATCH] NEOS-1630: Updates Subset Table to be more performant (#3099)

---
 .../[id]/subsets/components/SubsetCard.tsx    | 205 ++++++++---------
 .../[account]/new/job/job-form-validations.ts |   5 +-
 .../(mgmt)/[account]/new/job/subset/page.tsx  | 216 ++++++++----------
 .../web/components/FastTable/FastTable.tsx    | 117 ++++++++++
 .../web/components/FastTable/MemoizedCell.tsx |  35 +++
 .../web/components/FastTable/MemoizedRow.tsx  |  92 ++++++++
 .../jobs/JobMappingTable/JobMappingTable.tsx  | 182 +--------------
 .../web/components/jobs/subsets/EditItem.tsx  | 108 ++++-----
 .../jobs/subsets/EditItemDialog.tsx           |  50 ++++
 .../jobs/subsets/SubsetTable/ActionsCell.tsx  |  74 ++++++
 .../jobs/subsets/SubsetTable/Columns.tsx      | 118 ++++++++++
 .../subsets/SubsetTable/RootTableCell.tsx     |  35 +++
 .../jobs/subsets/SubsetTable/SubsetTable.tsx  |  77 +++++++
 .../jobs/subsets/subset-table/SubsetTable.tsx |  19 --
 .../jobs/subsets/subset-table/column.tsx      | 189 ---------------
 .../subset-table/data-table-column-header.tsx |  74 ------
 .../jobs/subsets/subset-table/data-table.tsx  | 163 -------------
 .../apps/web/components/jobs/subsets/utils.ts |  28 +--
 18 files changed, 866 insertions(+), 921 deletions(-)
 create mode 100644 frontend/apps/web/components/FastTable/FastTable.tsx
 create mode 100644 frontend/apps/web/components/FastTable/MemoizedCell.tsx
 create mode 100644 frontend/apps/web/components/FastTable/MemoizedRow.tsx
 create mode 100644 frontend/apps/web/components/jobs/subsets/EditItemDialog.tsx
 create mode 100644 frontend/apps/web/components/jobs/subsets/SubsetTable/ActionsCell.tsx
 create mode 100644 frontend/apps/web/components/jobs/subsets/SubsetTable/Columns.tsx
 create mode 100644 frontend/apps/web/components/jobs/subsets/SubsetTable/RootTableCell.tsx
 create mode 100644 frontend/apps/web/components/jobs/subsets/SubsetTable/SubsetTable.tsx
 delete mode 100644 frontend/apps/web/components/jobs/subsets/subset-table/SubsetTable.tsx
 delete mode 100644 frontend/apps/web/components/jobs/subsets/subset-table/column.tsx
 delete mode 100644 frontend/apps/web/components/jobs/subsets/subset-table/data-table-column-header.tsx
 delete mode 100644 frontend/apps/web/components/jobs/subsets/subset-table/data-table.tsx

diff --git a/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/subsets/components/SubsetCard.tsx b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/subsets/components/SubsetCard.tsx
index 2fc74cd66b..f5994573ba 100644
--- a/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/subsets/components/SubsetCard.tsx
+++ b/frontend/apps/web/app/(mgmt)/[account]/jobs/[id]/subsets/components/SubsetCard.tsx
@@ -5,26 +5,21 @@ import {
 import { SubsetFormValues } from '@/app/(mgmt)/[account]/new/job/job-form-validations';
 import SubsetOptionsForm from '@/components/jobs/Form/SubsetOptionsForm';
 import EditItem from '@/components/jobs/subsets/EditItem';
-import SubsetTable from '@/components/jobs/subsets/subset-table/SubsetTable';
-import { TableRow } from '@/components/jobs/subsets/subset-table/column';
+import EditItemDialog from '@/components/jobs/subsets/EditItemDialog';
+import {
+  SUBSET_TABLE_COLUMNS,
+  SubsetTableRow,
+} from '@/components/jobs/subsets/SubsetTable/Columns';
+import SubsetTable from '@/components/jobs/subsets/SubsetTable/SubsetTable';
 import {
-  GetColumnsForSqlAutocomplete,
   buildRowKey,
   buildTableRowData,
+  getColumnsForSqlAutocomplete,
   isValidSubsetType,
 } from '@/components/jobs/subsets/utils';
-import LearnMoreLink from '@/components/labels/LearnMoreLink';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { Form } from '@/components/ui/form';
-import { Separator } from '@/components/ui/separator';
 import { getErrorMessage } from '@/util/util';
 import { create } from '@bufbuild/protobuf';
 import {
@@ -43,8 +38,8 @@ import {
 } from '@neosync/sdk';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useQueryClient } from '@tanstack/react-query';
-import { ReactElement, useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { ReactElement, useEffect, useMemo, useState } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { toJobSourceSqlSubsetSchemas } from '../../../util';
 import { getConnectionIdFromSource } from '../../source/components/util';
@@ -86,13 +81,14 @@ export default function SubsetCard(props: Props): ReactElement {
 
   useEffect(() => {
     if (!isTableConstraintsValidating && fkConstraints) {
+      const newRootTables = new Set(rootTables);
       data?.job?.mappings.forEach((m) => {
         const tn = `${m.schema}.${m.table}`;
         if (!fkConstraints[tn]) {
-          rootTables.add(tn);
-          setRootTables(rootTables);
+          newRootTables.add(tn);
         }
       });
+      setRootTables(newRootTables);
     }
   }, [fkConstraints, isTableConstraintsValidating]);
 
@@ -103,17 +99,34 @@ export default function SubsetCard(props: Props): ReactElement {
     values: formValues,
   });
 
-  const tableRowData = buildTableRowData(
-    data?.job?.mappings ?? [],
-    rootTables,
-    form.watch().subsets // ensures that all form changes cause a re-render since stuff happens outside of the form that depends on the form values
-  );
-  const [itemToEdit, setItemToEdit] = useState<TableRow | undefined>();
+  const formSubsets = form.watch().subsets; // ensures that all form changes cause a re-render since stuff happens outside of the form that depends on the form values
+  const { update: updateSubsetsFormValues, append: addSubsetsFormValues } =
+    useFieldArray({
+      control: form.control,
+      name: 'subsets',
+    });
+
+  const tableRowData = useMemo(() => {
+    return buildTableRowData(
+      data?.job?.mappings ?? [],
+      rootTables,
+      formSubsets
+    );
+  }, [data?.job?.mappings, rootTables, formSubsets]);
+  const [itemToEdit, setItemToEdit] = useState<SubsetTableRow | undefined>();
 
   const formValuesMap = new Map(
     formValues.subsets.map((ss) => [buildRowKey(ss.schema, ss.table), ss])
   );
 
+  const sqlAutocompleteColumns = useMemo(() => {
+    return getColumnsForSqlAutocomplete(
+      data?.job?.mappings ?? [],
+      itemToEdit?.schema ?? '',
+      itemToEdit?.table ?? ''
+    );
+  }, [data?.job?.mappings, itemToEdit?.schema, itemToEdit?.table]);
+
   if (isJobLoading) {
     return (
       <div className="space-y-10">
@@ -169,7 +182,11 @@ export default function SubsetCard(props: Props): ReactElement {
     }
   }
 
-  function hasLocalChange(schema: string, table: string): boolean {
+  function hasLocalChange(
+    _rowIdx: number,
+    schema: string,
+    table: string
+  ): boolean {
     const key = buildRowKey(schema, table);
     const trData = tableRowData[key];
 
@@ -182,7 +199,11 @@ export default function SubsetCard(props: Props): ReactElement {
     return trData.where !== svrData?.whereClause;
   }
 
-  function onLocalRowReset(schema: string, table: string): void {
+  function onLocalRowReset(
+    _rowIdx: number,
+    schema: string,
+    table: string
+  ): void {
     const key = buildRowKey(schema, table);
     const idx = form
       .getValues()
@@ -191,7 +212,7 @@ export default function SubsetCard(props: Props): ReactElement {
       );
     if (idx >= 0) {
       const svrData = formValuesMap.get(key);
-      form.setValue(`subsets.${idx}`, {
+      updateSubsetsFormValues(idx, {
         schema: schema,
         table: table,
         whereClause: svrData?.whereClause ?? undefined,
@@ -210,7 +231,8 @@ export default function SubsetCard(props: Props): ReactElement {
             <div>
               <SubsetTable
                 data={Object.values(tableRowData)}
-                onEdit={(schema, table) => {
+                columns={SUBSET_TABLE_COLUMNS}
+                onEdit={(_rowIdx, schema, table) => {
                   setIsDialogOpen(true);
                   const key = buildRowKey(schema, table);
                   if (tableRowData[key]) {
@@ -223,90 +245,53 @@ export default function SubsetCard(props: Props): ReactElement {
                 onReset={onLocalRowReset}
               />
             </div>
-            <div
-              // this prevents the tooltips inside of the dialog from automatically opening when the dialog opens since it stops the focus from being set in the dialog component
-              onFocusCapture={(e) => {
-                e.stopPropagation();
-              }}
-            >
-              <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-                <DialogContent
-                  className="max-w-5xl"
-                  onPointerDownOutside={(e) => e.preventDefault()}
-                  onEscapeKeyDown={(e) => e.preventDefault()}
-                >
-                  <DialogHeader>
-                    <div className="flex flex-row w-full">
-                      <div className="flex flex-col space-y-2 w-full">
-                        <div className="flex flex-row justify-between items-center">
-                          <div className="flex flex-row gap-4">
-                            <DialogTitle className="text-xl">
-                              Subset Query
-                            </DialogTitle>
-                          </div>
-                        </div>
-                        <div className="flex flex-row items-center gap-2">
-                          <DialogDescription>
-                            Subset your data using SQL expressions.{' '}
-                            <LearnMoreLink href="https://docs.neosync.dev/table-constraints/subsetting" />
-                          </DialogDescription>
-                        </div>
-                      </div>
-                    </div>
-                    <Separator />
-                  </DialogHeader>
-                  <div className="pt-4">
-                    <EditItem
-                      connectionId={sourceConnectionId ?? ''}
-                      item={itemToEdit}
-                      onItem={setItemToEdit}
-                      onCancel={() => {
-                        setItemToEdit(undefined);
-                        setIsDialogOpen(false);
-                      }}
-                      columns={GetColumnsForSqlAutocomplete(
-                        data?.job?.mappings ?? [],
-                        itemToEdit
-                      )}
-                      onSave={() => {
-                        if (!itemToEdit) {
-                          return;
-                        }
-                        const key = buildRowKey(
-                          itemToEdit.schema,
-                          itemToEdit.table
-                        );
-                        const idx = form
-                          .getValues()
-                          .subsets.findIndex(
-                            (item) =>
-                              buildRowKey(item.schema, item.table) === key
-                          );
-                        if (idx >= 0) {
-                          form.setValue(`subsets.${idx}`, {
-                            schema: itemToEdit.schema,
-                            table: itemToEdit.table,
-                            whereClause: itemToEdit.where,
-                          });
-                        } else {
-                          form.setValue(
-                            `subsets`,
-                            form.getValues().subsets.concat({
-                              schema: itemToEdit.schema,
-                              table: itemToEdit.table,
-                              whereClause: itemToEdit.where,
-                            })
-                          );
-                        }
-                        setItemToEdit(undefined);
-                        setIsDialogOpen(false);
-                      }}
-                      connectionType={connectionType}
-                    />
-                  </div>
-                </DialogContent>
-              </Dialog>
-            </div>
+
+            <EditItemDialog
+              open={isDialogOpen}
+              onOpenChange={setIsDialogOpen}
+              body={
+                <EditItem
+                  connectionId={sourceConnectionId ?? ''}
+                  item={itemToEdit}
+                  onItem={setItemToEdit}
+                  onCancel={() => {
+                    setItemToEdit(undefined);
+                    setIsDialogOpen(false);
+                  }}
+                  columns={sqlAutocompleteColumns}
+                  onSave={() => {
+                    if (!itemToEdit) {
+                      return;
+                    }
+                    const key = buildRowKey(
+                      itemToEdit.schema,
+                      itemToEdit.table
+                    );
+                    const idx = form
+                      .getValues()
+                      .subsets.findIndex(
+                        (item) => buildRowKey(item.schema, item.table) === key
+                      );
+                    if (idx >= 0) {
+                      updateSubsetsFormValues(idx, {
+                        schema: itemToEdit.schema,
+                        table: itemToEdit.table,
+                        whereClause: itemToEdit.where,
+                      });
+                    } else {
+                      addSubsetsFormValues({
+                        schema: itemToEdit.schema,
+                        table: itemToEdit.table,
+                        whereClause: itemToEdit.where,
+                      });
+                    }
+                    setItemToEdit(undefined);
+                    setIsDialogOpen(false);
+                  }}
+                  connectionType={connectionType}
+                />
+              }
+            />
             <div className="flex flex-row pt-10 justify-end">
               <Button key="submit" type="submit">
                 Save
diff --git a/frontend/apps/web/app/(mgmt)/[account]/new/job/job-form-validations.ts b/frontend/apps/web/app/(mgmt)/[account]/new/job/job-form-validations.ts
index 8b171a7b78..e5b268a7cd 100644
--- a/frontend/apps/web/app/(mgmt)/[account]/new/job/job-form-validations.ts
+++ b/frontend/apps/web/app/(mgmt)/[account]/new/job/job-form-validations.ts
@@ -283,11 +283,12 @@ function getErrorConnectionTypes(
   return '';
 }
 
-const SINGLE_SUBSET_FORM_SCHEMA = Yup.object({
+const SingleSubsetFormValue = Yup.object({
   schema: Yup.string().trim().required('A schema is required'),
   table: Yup.string().trim().required('A table is required'),
   whereClause: Yup.string().trim().optional(),
 });
+type SingleSubsetFormValue = Yup.InferType<typeof SingleSubsetFormValue>;
 
 export const SingleTableConnectFormValues = Yup.object({
   fkSourceConnectionId: Yup.string().required('Connection is required').uuid(),
@@ -411,7 +412,7 @@ export type SingleTableEditSourceFormValues = Yup.InferType<
 >;
 
 export const SubsetFormValues = Yup.object({
-  subsets: Yup.array(SINGLE_SUBSET_FORM_SCHEMA).required('Subset is required.'),
+  subsets: Yup.array(SingleSubsetFormValue).required('Subset is required.'),
   subsetOptions: Yup.object({
     subsetByForeignKeyConstraints: Yup.boolean().default(true),
   }),
diff --git a/frontend/apps/web/app/(mgmt)/[account]/new/job/subset/page.tsx b/frontend/apps/web/app/(mgmt)/[account]/new/job/subset/page.tsx
index 42ac047095..bae564b019 100644
--- a/frontend/apps/web/app/(mgmt)/[account]/new/job/subset/page.tsx
+++ b/frontend/apps/web/app/(mgmt)/[account]/new/job/subset/page.tsx
@@ -5,28 +5,23 @@ import OverviewContainer from '@/components/containers/OverviewContainer';
 import PageHeader from '@/components/headers/PageHeader';
 import SubsetOptionsForm from '@/components/jobs/Form/SubsetOptionsForm';
 import EditItem from '@/components/jobs/subsets/EditItem';
-import { TableRow } from '@/components/jobs/subsets/subset-table/column';
-import SubsetTable from '@/components/jobs/subsets/subset-table/SubsetTable';
+import EditItemDialog from '@/components/jobs/subsets/EditItemDialog';
+import {
+  SUBSET_TABLE_COLUMNS,
+  SubsetTableRow,
+} from '@/components/jobs/subsets/SubsetTable/Columns';
+import SubsetTable from '@/components/jobs/subsets/SubsetTable/SubsetTable';
 import {
   buildRowKey,
   buildTableRowData,
-  GetColumnsForSqlAutocomplete,
+  getColumnsForSqlAutocomplete,
   isValidSubsetType,
 } from '@/components/jobs/subsets/utils';
-import LearnMoreLink from '@/components/labels/LearnMoreLink';
 import { useAccount } from '@/components/providers/account-provider';
 import { PageProps } from '@/components/types';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { Form } from '@/components/ui/form';
-import { Separator } from '@/components/ui/separator';
 import { getSingleOrUndefined } from '@/libs/utils';
 import { getErrorMessage } from '@/util/util';
 import { SchemaFormValues } from '@/yup-validations/jobs';
@@ -37,14 +32,13 @@ import {
   ConnectionConfigSchema,
   ConnectionDataService,
   ConnectionService,
-  JobMappingSchema,
   JobService,
 } from '@neosync/sdk';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useRouter } from 'next/navigation';
 import { usePostHog } from 'posthog-js/react';
-import { ReactElement, useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { ReactElement, useEffect, useMemo, useState } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { useSessionStorage } from 'usehooks-ts';
 import { getConnectionType } from '../../../connections/util';
@@ -134,13 +128,14 @@ export default function Page({ searchParams }: PageProps): ReactElement {
   const [rootTables, setRootTables] = useState<Set<string>>(new Set());
   useEffect(() => {
     if (!isTableConstraintsValidating && fkConstraints) {
+      const newRootTables = new Set(rootTables);
       schemaFormValues.mappings.forEach((m) => {
         const tn = `${m.schema}.${m.table}`;
         if (!fkConstraints[tn]) {
-          rootTables.add(tn);
-          setRootTables(rootTables);
+          newRootTables.add(tn);
         }
       });
+      setRootTables(newRootTables);
     }
   }, [fkConstraints, isTableConstraintsValidating]);
 
@@ -149,7 +144,7 @@ export default function Page({ searchParams }: PageProps): ReactElement {
     defaultValues: subsetFormValues,
   });
 
-  const [itemToEdit, setItemToEdit] = useState<TableRow | undefined>();
+  const [itemToEdit, setItemToEdit] = useState<SubsetTableRow | undefined>();
 
   const connection = connections.find(
     (item) => item.id == connectFormValues.sourceId
@@ -197,13 +192,34 @@ export default function Page({ searchParams }: PageProps): ReactElement {
     }
   }
 
-  const tableRowData = buildTableRowData(
-    schemaFormValues.mappings,
-    rootTables,
-    form.watch().subsets
-  );
+  const formSubsets = form.watch().subsets; // ensures that all form changes cause a re-render since stuff happens outside of the form that depends on the form values
+  const { update: updateSubsetsFormValues, append: addSubsetsFormValues } =
+    useFieldArray({
+      control: form.control,
+      name: 'subsets',
+    });
+
+  const tableRowData = useMemo(() => {
+    return buildTableRowData(
+      schemaFormValues.mappings,
+      rootTables,
+      formSubsets
+    );
+  }, [schemaFormValues.mappings, rootTables, formSubsets]);
 
-  function hasLocalChange(schema: string, table: string): boolean {
+  const sqlAutocompleteColumns = useMemo(() => {
+    return getColumnsForSqlAutocomplete(
+      schemaFormValues?.mappings ?? [],
+      itemToEdit?.schema ?? '',
+      itemToEdit?.table ?? ''
+    );
+  }, [schemaFormValues?.mappings, itemToEdit?.schema, itemToEdit?.table]);
+
+  function hasLocalChange(
+    _rowIdx: number,
+    schema: string,
+    table: string
+  ): boolean {
     const key = buildRowKey(schema, table);
     const trData = tableRowData[key];
     const svrData = subsetFormValues.subsets.find(
@@ -215,7 +231,11 @@ export default function Page({ searchParams }: PageProps): ReactElement {
     return trData.where !== svrData?.whereClause;
   }
 
-  function onLocalRowReset(schema: string, table: string): void {
+  function onLocalRowReset(
+    _rowIdx: number,
+    schema: string,
+    table: string
+  ): void {
     const key = buildRowKey(schema, table);
     const idx = form
       .getValues()
@@ -226,15 +246,14 @@ export default function Page({ searchParams }: PageProps): ReactElement {
       const svrData = subsetFormValues.subsets.find(
         (ss) => buildRowKey(ss.schema, ss.table) === key
       );
-
-      form.setValue(`subsets.${idx}`, {
+      updateSubsetsFormValues(idx, {
         schema: schema,
         table: table,
         whereClause: svrData?.whereClause ?? undefined,
       });
+      form.trigger();
     }
   }
-
   return (
     <div className="px-12 md:px-24 lg:px-32 flex flex-col gap-5">
       <FormPersist formKey={formKey} form={form} />
@@ -282,11 +301,11 @@ export default function Page({ searchParams }: PageProps): ReactElement {
                 <div>
                   <SubsetTable
                     data={Object.values(tableRowData)}
-                    onEdit={(schema, table) => {
+                    columns={SUBSET_TABLE_COLUMNS}
+                    onEdit={(_rowIdx, schema, table) => {
                       setIsDialogOpen(true);
                       const key = buildRowKey(schema, table);
                       if (tableRowData[key]) {
-                        // make copy so as to not edit in place
                         setItemToEdit({
                           ...tableRowData[key],
                         });
@@ -296,96 +315,53 @@ export default function Page({ searchParams }: PageProps): ReactElement {
                     onReset={onLocalRowReset}
                   />
                 </div>
-                <div
-                  // this prevents the tooltips inside of the dialog from automatically opening when the dialog opens since it stops the focus from being set in the dialog component
-                  onFocusCapture={(e) => {
-                    e.stopPropagation();
-                  }}
-                >
-                  <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-                    <DialogContent
-                      className="max-w-5xl"
-                      onPointerDownOutside={(e) => e.preventDefault()}
-                      onEscapeKeyDown={(e) => e.preventDefault()}
-                    >
-                      <DialogHeader>
-                        <div className="flex flex-row w-full">
-                          <div className="flex flex-col space-y-2 w-full">
-                            <div className="flex flex-row justify-between items-center">
-                              <div className="flex flex-row gap-4">
-                                <DialogTitle className="text-xl">
-                                  Subset Query
-                                </DialogTitle>
-                              </div>
-                            </div>
-                            <div className="flex flex-row items-center gap-2">
-                              <DialogDescription>
-                                Subset your data using SQL expressions.{' '}
-                                <LearnMoreLink href="https://docs.neosync.dev/table-constraints/subsetting" />
-                              </DialogDescription>
-                            </div>
-                          </div>
-                        </div>
-                        <Separator />
-                      </DialogHeader>
-                      <div className="pt-4">
-                        <EditItem
-                          connectionId={connectFormValues.sourceId}
-                          item={itemToEdit}
-                          onItem={setItemToEdit}
-                          onCancel={() => {
-                            setItemToEdit(undefined);
-                            setIsDialogOpen(false);
-                          }}
-                          columns={GetColumnsForSqlAutocomplete(
-                            schemaFormValues?.mappings.map((row) => {
-                              return create(JobMappingSchema, {
-                                schema: row.schema,
-                                table: row.table,
-                                column: row.column,
-                              });
-                            }),
-                            itemToEdit
-                          )}
-                          onSave={() => {
-                            if (!itemToEdit) {
-                              return;
-                            }
-                            const key = buildRowKey(
-                              itemToEdit.schema,
-                              itemToEdit.table
-                            );
-                            const idx = form
-                              .getValues()
-                              .subsets.findIndex(
-                                (item) =>
-                                  buildRowKey(item.schema, item.table) === key
-                              );
-                            if (idx >= 0) {
-                              form.setValue(`subsets.${idx}`, {
-                                schema: itemToEdit.schema,
-                                table: itemToEdit.table,
-                                whereClause: itemToEdit.where,
-                              });
-                            } else {
-                              form.setValue(
-                                `subsets`,
-                                form.getValues().subsets.concat({
-                                  schema: itemToEdit.schema,
-                                  table: itemToEdit.table,
-                                  whereClause: itemToEdit.where,
-                                })
-                              );
-                            }
-                            setItemToEdit(undefined);
-                            setIsDialogOpen(false);
-                          }}
-                          connectionType={connectionType}
-                        />
-                      </div>
-                    </DialogContent>
-                  </Dialog>
-                </div>
+                <EditItemDialog
+                  open={isDialogOpen}
+                  onOpenChange={setIsDialogOpen}
+                  body={
+                    <EditItem
+                      connectionId={connectFormValues.sourceId}
+                      item={itemToEdit}
+                      onItem={setItemToEdit}
+                      onCancel={() => {
+                        setItemToEdit(undefined);
+                        setIsDialogOpen(false);
+                      }}
+                      columns={sqlAutocompleteColumns}
+                      onSave={() => {
+                        if (!itemToEdit) {
+                          return;
+                        }
+                        const key = buildRowKey(
+                          itemToEdit.schema,
+                          itemToEdit.table
+                        );
+                        const idx = form
+                          .getValues()
+                          .subsets.findIndex(
+                            (item) =>
+                              buildRowKey(item.schema, item.table) === key
+                          );
+                        if (idx >= 0) {
+                          updateSubsetsFormValues(idx, {
+                            schema: itemToEdit.schema,
+                            table: itemToEdit.table,
+                            whereClause: itemToEdit.where,
+                          });
+                        } else {
+                          addSubsetsFormValues({
+                            schema: itemToEdit.schema,
+                            table: itemToEdit.table,
+                            whereClause: itemToEdit.where,
+                          });
+                        }
+                        setItemToEdit(undefined);
+                        setIsDialogOpen(false);
+                      }}
+                      connectionType={connectionType}
+                    />
+                  }
+                />
                 <div className="flex flex-row gap-1 justify-between pt-10">
                   <Button
                     key="back"
diff --git a/frontend/apps/web/components/FastTable/FastTable.tsx b/frontend/apps/web/components/FastTable/FastTable.tsx
new file mode 100644
index 0000000000..4445d1e993
--- /dev/null
+++ b/frontend/apps/web/components/FastTable/FastTable.tsx
@@ -0,0 +1,117 @@
+import { cn } from '@/libs/utils';
+import { flexRender, Table } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ReactElement, useRef } from 'react';
+import {
+  StickyHeaderTable,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/table';
+import MemoizedRow from './MemoizedRow';
+
+interface Props<TData> {
+  /**
+   * The table instance to render.
+   */
+  table: Table<TData>;
+  /**
+   * This function is used to estimate the height of each row.
+   * It should be the height of your row including padding and any other styling.
+   * This is used to calculate the total height of the table and to smooth out scrolling.
+   * If this is not set, it will default to 53px which is the height of the default row.
+   */
+  estimateRowSize?(): number;
+  /**
+   * This is the number of rows to render above and below the visible rows to help with smooth scrolling.
+   * This should be set to a value that is a multiple of your estimateRowSize.
+   * This is a trade off between performance and CPU.
+   */
+  rowOverscan?: number;
+}
+
+/**
+ * This table uses memoized rows and cells to improve performance ontop of a scroll virtualizer for infinite scrolling of large datasets.
+ * Depending on your column makeup, the memoized cells may need updated to handle your specific display column.
+ * It's also very impportant to memoize the table dataset so that it is stable and only changes when needed.
+ * This will maximize performance of the table.
+ *
+ * It's also very important to set your estimateRowSize function to be the correct height of your row. Otherwise it is a guess and will have to be re-calculated, which hurts performance.
+ * Configuring the overscan helps smooth out scrolling, but will increase CPU. For fast systems this is very noticeable and helps with reducing white flashing during quick scrolls.
+ */
+export default function FastTable<TData>(props: Props<TData>): ReactElement {
+  const { table, estimateRowSize = () => 53, rowOverscan = 50 } = props;
+
+  const { rows } = table.getRowModel();
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement() {
+      return tableContainerRef.current;
+    },
+    estimateSize: estimateRowSize,
+    overscan: rowOverscan,
+  });
+
+  return (
+    <div
+      className={cn(
+        'rounded-md border min-h-[145px] max-h-[1000px] relative border-gray-300 dark:border-gray-700 overflow-hidden',
+        rows.length > 0 && 'overflow-auto'
+      )}
+      ref={tableContainerRef}
+    >
+      <StickyHeaderTable>
+        <TableHeader className="bg-gray-100 dark:bg-gray-800 sticky top-0 z-10 px-2 grid">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow
+              key={headerGroup.id}
+              className="flex flex-row items-center justify-between"
+            >
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead
+                    key={header.id}
+                    style={{
+                      width:
+                        header.column.columnDef.id != 'isSelected'
+                          ? '187px'
+                          : '20px',
+                    }}
+                    colSpan={header.colSpan}
+                    className="flex items-center"
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody
+          className="grid relative"
+          style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            return (
+              <MemoizedRow
+                key={row.id}
+                row={row}
+                virtualRow={virtualRow}
+                selected={row.getIsSelected()} // must be memoized here since row.getIsSelected() changes in place
+              />
+            );
+          })}
+        </TableBody>
+      </StickyHeaderTable>
+    </div>
+  );
+}
diff --git a/frontend/apps/web/components/FastTable/MemoizedCell.tsx b/frontend/apps/web/components/FastTable/MemoizedCell.tsx
new file mode 100644
index 0000000000..b121a7fd51
--- /dev/null
+++ b/frontend/apps/web/components/FastTable/MemoizedCell.tsx
@@ -0,0 +1,35 @@
+import { Cell, flexRender } from '@tanstack/react-table';
+import { memo, ReactNode } from 'react';
+
+interface Props<TData> {
+  cell: Cell<TData, unknown>;
+}
+
+function InnerCell<TData>(props: Props<TData>): ReactNode {
+  const { cell } = props;
+  return flexRender(cell.column.columnDef.cell, cell.getContext());
+}
+
+function shouldReRender<TData>(
+  prev: Props<TData>,
+  next: Props<TData>
+): boolean {
+  const prevValue = prev.cell.getValue();
+  const nextValue = next.cell.getValue();
+
+  if (
+    // todo: maybe these should be passed in as props so they are configurable by the caller
+    prev.cell.column.id === 'isSelected' ||
+    prev.cell.column.id === 'actions'
+  ) {
+    // Always re-render checkbox cells as getIsSelected() is always the same for both
+    return false;
+  }
+
+  // For other columns, just compare the values
+  return prevValue === nextValue;
+}
+
+const MemoizedCell = memo(InnerCell, shouldReRender);
+MemoizedCell.displayName = 'MemoizedCell';
+export default MemoizedCell;
diff --git a/frontend/apps/web/components/FastTable/MemoizedRow.tsx b/frontend/apps/web/components/FastTable/MemoizedRow.tsx
new file mode 100644
index 0000000000..70c10822ab
--- /dev/null
+++ b/frontend/apps/web/components/FastTable/MemoizedRow.tsx
@@ -0,0 +1,92 @@
+import { Cell, Row } from '@tanstack/react-table';
+import { VirtualItem } from '@tanstack/react-virtual';
+import { memo, ReactNode } from 'react';
+import { TableRow } from '../ui/table';
+import MemoizedCell from './MemoizedCell';
+
+interface Props<TData> {
+  row: Row<TData>;
+  virtualRow: VirtualItem;
+  selected: boolean;
+}
+
+function InnerRow<TData>(props: Props<TData>): ReactNode {
+  const { row, virtualRow } = props;
+  return (
+    <TableRow
+      key={row.id}
+      style={{
+        transform: `translateY(${virtualRow.start}px)`,
+        height: `${virtualRow.size}px`,
+      }}
+      className="items-center flex absolute w-full justify-between px-2 gap-0 space-x-0"
+    >
+      {row.getVisibleCells().map((cell) => (
+        <td
+          key={cell.id}
+          className="py-2"
+          style={{
+            minWidth: cell.column.getSize(),
+            width: cell.column.columnDef.id != 'isSelected' ? '187px' : '20px',
+          }}
+        >
+          {/* For some reason TS can't figure out how to type the incoming cell dynamically as Cell<TData, unknown>
+              so we have to cast it here */}
+          <MemoizedCell cell={cell as Cell<unknown, unknown>} />
+        </td>
+      ))}
+    </TableRow>
+  );
+}
+
+function shouldReRender<TData>(
+  prev: Props<TData>,
+  next: Props<TData>
+): boolean {
+  // Compare virtualRow properties
+  if (
+    prev.virtualRow.start !== next.virtualRow.start ||
+    prev.virtualRow.size !== next.virtualRow.size
+  ) {
+    return false;
+  }
+
+  // Compare row.id
+  if (prev.row.id !== next.row.id) {
+    return false;
+  }
+
+  // Check row selection state for "isSelected"
+  if (prev.selected !== next.selected) {
+    return false;
+  }
+
+  // Check if visible cells or their values have changed
+  const prevCells = prev.row.getVisibleCells();
+  const nextCells = next.row.getVisibleCells();
+
+  if (prevCells.length !== nextCells.length) {
+    return false;
+  }
+
+  for (let i = 0; i < prevCells.length; i++) {
+    const prevCell = prevCells[i];
+    const nextCell = nextCells[i];
+
+    if (prevCell.id !== nextCell.id) {
+      return false;
+    }
+
+    // For accessor columns, compare values
+    if (prevCell.getValue() !== nextCell.getValue()) {
+      return false;
+    }
+  }
+
+  // If no differences are found, skip re-render
+  return true;
+}
+
+const MemoizedRow = memo(InnerRow, shouldReRender);
+MemoizedRow.displayName = 'MemoizedRow';
+export default MemoizedRow;
diff --git a/frontend/apps/web/components/jobs/JobMappingTable/JobMappingTable.tsx b/frontend/apps/web/components/jobs/JobMappingTable/JobMappingTable.tsx
index 9780fc9e1e..d61a961ecd 100644
--- a/frontend/apps/web/components/jobs/JobMappingTable/JobMappingTable.tsx
+++ b/frontend/apps/web/components/jobs/JobMappingTable/JobMappingTable.tsx
@@ -1,19 +1,10 @@
+import FastTable from '@/components/FastTable/FastTable';
 import { CardDescription, CardTitle } from '@/components/ui/card';
-import {
-  StickyHeaderTable,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { cn } from '@/libs/utils';
 import { Transformer } from '@/shared/transformers';
 import { JobMappingTransformerForm } from '@/yup-validations/jobs';
 import { JobMapping } from '@neosync/sdk';
 import {
-  Cell,
   ColumnDef,
-  flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getSortedRowModel,
@@ -21,8 +12,7 @@ import {
   RowData,
   useReactTable,
 } from '@tanstack/react-table';
-import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual';
-import { memo, ReactElement, useRef } from 'react';
+import { ReactElement } from 'react';
 import { GoWorkflow } from 'react-icons/go';
 import { ImportMappingsConfig } from '../SchemaTable/ImportJobMappingsButton';
 import { SchemaTableToolbar } from '../SchemaTable/SchemaTableToolBar';
@@ -121,21 +111,6 @@ export default function JobMappingTable<TData, TValue>(
     },
   });
 
-  const { rows } = table.getRowModel();
-
-  const tableContainerRef = useRef<HTMLDivElement>(null);
-
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    estimateSize() {
-      return 53;
-    },
-    getScrollElement() {
-      return tableContainerRef.current;
-    },
-    overscan: 50,
-  });
-
   return (
     <div>
       <div className="flex flex-row items-center gap-2 pt-4 ">
@@ -166,63 +141,8 @@ export default function JobMappingTable<TData, TValue>(
         />
       </div>
 
-      <div
-        className={cn(
-          'rounded-md border min-h-[145px] max-h-[1000px] relative border-gray-300 dark:border-gray-700 overflow-hidden',
-          rows.length > 0 && 'overflow-auto'
-        )}
-        ref={tableContainerRef}
-      >
-        <StickyHeaderTable>
-          <TableHeader className="bg-gray-100 dark:bg-gray-800 sticky top-0 z-10 px-2 grid">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow
-                key={headerGroup.id}
-                className="flex flex-row items-center justify-between"
-              >
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead
-                      key={header.id}
-                      style={{
-                        width:
-                          header.column.columnDef.id != 'isSelected'
-                            ? '187px'
-                            : '20px',
-                      }}
-                      colSpan={header.colSpan}
-                      className="flex items-center"
-                    >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody
-            className="grid relative"
-            style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
-          >
-            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-              const row = rows[virtualRow.index];
-              return (
-                <MemoizedRow
-                  key={row.id}
-                  row={row}
-                  virtualRow={virtualRow}
-                  selected={row.getIsSelected()} // must be memoized here since row.getIsSelected() changes in place
-                />
-              );
-            })}
-          </TableBody>
-        </StickyHeaderTable>
-      </div>
+      <FastTable table={table} estimateRowSize={() => 53} rowOverscan={50} />
+
       <div className="text-xs text-gray-600 dark:text-gray-400 pt-4">
         Total rows: ({getFormattedCount(data.length)}) Rows visible: (
         {getFormattedCount(table.getRowModel().rows.length)})
@@ -235,97 +155,3 @@ const US_NUMBER_FORMAT = new Intl.NumberFormat('en-US');
 function getFormattedCount(count: number): string {
   return US_NUMBER_FORMAT.format(count);
 }
-
-const MemoizedRow = memo(
-  <TData,>({
-    row,
-    virtualRow,
-  }: {
-    row: Row<TData>;
-    virtualRow: VirtualItem;
-    selected: boolean;
-  }) => {
-    return (
-      <TableRow
-        key={row.id}
-        style={{
-          transform: `translateY(${virtualRow.start}px)`,
-          height: `${virtualRow.size}px`,
-        }}
-        className="items-center flex absolute w-full justify-between px-2 gap-0 space-x-0"
-      >
-        {row.getVisibleCells().map((cell) => (
-          <td
-            key={cell.id}
-            className="py-2"
-            style={{
-              minWidth: cell.column.getSize(),
-              width:
-                cell.column.columnDef.id != 'isSelected' ? '187px' : '20px',
-            }}
-          >
-            <MemoizedCell cell={cell as Cell<unknown, unknown>} />
-          </td>
-        ))}
-      </TableRow>
-    );
-  },
-  (prev, next) => {
-    // Compare virtualRow properties
-    if (
-      prev.virtualRow.start !== next.virtualRow.start ||
-      prev.virtualRow.size !== next.virtualRow.size
-    ) {
-      return false;
-    }
-
-    // Compare row.id
-    if (prev.row.id !== next.row.id) {
-      return false;
-    }
-
-    // Check row selection state for "isSelected"
-    if (prev.selected !== next.selected) {
-      return false;
-    }
-
-    // Check if visible cells or their values have changed
-    const prevCells = prev.row.getVisibleCells();
-    const nextCells = next.row.getVisibleCells();
-
-    if (prevCells.length !== nextCells.length) {
-      return false;
-    }
-
-    for (let i = 0; i < prevCells.length; i++) {
-      if (
-        prevCells[i].id !== nextCells[i].id ||
-        prevCells[i].getValue() !== nextCells[i].getValue()
-      ) {
-        return false;
-      }
-    }
-
-    // If no differences are found, skip re-render
-    return true;
-  }
-);
-MemoizedRow.displayName = 'MemoizedRow';
-
-const MemoizedCell = memo(
-  <TData,>({ cell }: { cell: Cell<TData, unknown> }) =>
-    flexRender(cell.column.columnDef.cell, cell.getContext()),
-  (prev, next) => {
-    const prevValue = prev.cell.getValue();
-    const nextValue = next.cell.getValue();
-
-    if (prev.cell.column.id === 'isSelected') {
-      // Always re-render checkbox cells as getIsSelected() is always the same for both
-      return false;
-    }
-
-    // For other columns, just compare the values
-    return prevValue === nextValue;
-  }
-);
-MemoizedCell.displayName = 'MemoizedCell';
diff --git a/frontend/apps/web/components/jobs/subsets/EditItem.tsx b/frontend/apps/web/components/jobs/subsets/EditItem.tsx
index 532a9ef174..e2804ceddc 100644
--- a/frontend/apps/web/components/jobs/subsets/EditItem.tsx
+++ b/frontend/apps/web/components/jobs/subsets/EditItem.tsx
@@ -25,8 +25,8 @@ import { editor } from 'monaco-editor';
 import { useTheme } from 'next-themes';
 import { ReactElement, useEffect, useRef, useState } from 'react';
 import ValidateQueryErrorAlert from './SubsetErrorAlert';
+import { SubsetTableRow } from './SubsetTable/Columns';
 import ValidateQueryBadge from './ValidateQueryBadge';
-import { TableRow } from './subset-table/column';
 import {
   isSubsetRowCountSupported,
   isSubsetValidationSupported,
@@ -34,8 +34,8 @@ import {
 } from './utils';
 
 interface Props {
-  item?: TableRow;
-  onItem(item?: TableRow): void;
+  item?: SubsetTableRow;
+  onItem(item?: SubsetTableRow): void;
   onSave(): void;
   onCancel(): void;
   connectionId: string;
@@ -243,7 +243,36 @@ export default function EditItem(props: Props): ReactElement {
             <ValidateQueryBadge resp={validateResp} />
           </div>
         </div>
-        <div className="flex flex-row gap-4">
+      </div>
+      <div className="flex flex-col items-center justify-between rounded-lg border dark:border-gray-700 p-3 shadow-sm">
+        <Editor
+          height="60px"
+          width="100%"
+          language="sql"
+          value={constructWhere(item?.where ?? '')}
+          theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
+          onChange={(e) => onWhereChange(e?.replace('WHERE ', '') ?? '')}
+          options={editorOptions}
+          onMount={(editor) => {
+            editorRef.current = editor;
+            editor.focus();
+          }}
+        />
+      </div>
+      <ValidateQueryErrorAlert
+        validateResp={validateResp}
+        rowCountError={rowCountError}
+      />
+      <div className="flex justify-between gap-4">
+        <Button
+          type="button"
+          variant="secondary"
+          disabled={!item}
+          onClick={() => onCancelClick()}
+        >
+          <ButtonText text="Cancel" />
+        </Button>
+        <div className="flex flex-row gap-2">
           {showRowCountButton && (
             <>
               <TooltipProvider>
@@ -303,56 +332,31 @@ export default function EditItem(props: Props): ReactElement {
               </Tooltip>
             </TooltipProvider>
           )}
+          <TooltipProvider>
+            <Tooltip delayDuration={200}>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  disabled={!item}
+                  onClick={() => {
+                    const editor = editorRef.current;
+                    editor?.setValue('');
+                    onSaveClick();
+                  }}
+                >
+                  <ButtonText text="Apply" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  Applies changes to table only, click Save below to fully
+                  submit changes
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
       </div>
-      <div className="flex flex-col items-center justify-between rounded-lg border dark:border-gray-700 p-3 shadow-sm">
-        <Editor
-          height="60px"
-          width="100%"
-          language="sql"
-          value={constructWhere(item?.where ?? '')}
-          theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
-          onChange={(e) => onWhereChange(e?.replace('WHERE ', '') ?? '')}
-          options={editorOptions}
-        />
-      </div>
-      <ValidateQueryErrorAlert
-        validateResp={validateResp}
-        rowCountError={rowCountError}
-      />
-      <div className="flex justify-between gap-4">
-        <Button
-          type="button"
-          variant="secondary"
-          disabled={!item}
-          onClick={() => onCancelClick()}
-        >
-          <ButtonText text="Cancel" />
-        </Button>
-        <TooltipProvider>
-          <Tooltip delayDuration={200}>
-            <TooltipTrigger asChild>
-              <Button
-                type="button"
-                disabled={!item}
-                onClick={() => {
-                  const editor = editorRef.current;
-                  editor?.setValue('');
-                  onSaveClick();
-                }}
-              >
-                <ButtonText text="Apply" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                Applies changes to table only, click Save below to fully submit
-                changes
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
     </div>
   );
 }
diff --git a/frontend/apps/web/components/jobs/subsets/EditItemDialog.tsx b/frontend/apps/web/components/jobs/subsets/EditItemDialog.tsx
new file mode 100644
index 0000000000..3732a0330f
--- /dev/null
+++ b/frontend/apps/web/components/jobs/subsets/EditItemDialog.tsx
@@ -0,0 +1,50 @@
+import LearnMoreLink from '@/components/labels/LearnMoreLink';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Separator } from '@/components/ui/separator';
+import { ReactElement } from 'react';
+
+interface Props {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+
+  body: ReactElement;
+}
+
+export default function EditItemDialog(props: Props): ReactElement {
+  const { open, onOpenChange, body } = props;
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-w-5xl"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <div className="flex flex-row w-full">
+            <div className="flex flex-col space-y-2 w-full">
+              <div className="flex flex-row justify-between items-center">
+                <div className="flex flex-row gap-4">
+                  <DialogTitle className="text-xl">Subset Query</DialogTitle>
+                </div>
+              </div>
+              <div className="flex flex-row items-center gap-2">
+                <DialogDescription>
+                  Subset your data using SQL expressions.{' '}
+                  <LearnMoreLink href="https://docs.neosync.dev/table-constraints/subsetting" />
+                </DialogDescription>
+              </div>
+            </div>
+          </div>
+          <Separator />
+        </DialogHeader>
+        <div className="pt-4">{body}</div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/apps/web/components/jobs/subsets/SubsetTable/ActionsCell.tsx b/frontend/apps/web/components/jobs/subsets/SubsetTable/ActionsCell.tsx
new file mode 100644
index 0000000000..45c3b4e44b
--- /dev/null
+++ b/frontend/apps/web/components/jobs/subsets/SubsetTable/ActionsCell.tsx
@@ -0,0 +1,74 @@
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { Pencil1Icon, ReloadIcon } from '@radix-ui/react-icons';
+import { ReactElement } from 'react';
+
+interface Props {
+  onEdit(): void;
+  onReset(): void;
+  isResetDisabled: boolean;
+}
+
+export default function ActionsCell(props: Props): ReactElement {
+  const { onEdit, onReset, isResetDisabled } = props;
+  return (
+    <div className="flex gap-2">
+      <EditAction onClick={() => onEdit()} />
+      <ResetAction onClick={() => onReset()} isDisabled={isResetDisabled} />
+    </div>
+  );
+}
+
+interface EditActionProps {
+  onClick(): void;
+}
+
+function EditAction(props: EditActionProps): ReactElement {
+  const { onClick } = props;
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="icon"
+      className="w-8 h-8"
+      onClick={() => onClick()}
+    >
+      <Pencil1Icon />
+    </Button>
+  );
+}
+
+interface ResetActionProps {
+  onClick(): void;
+  isDisabled: boolean;
+}
+
+function ResetAction(props: ResetActionProps): ReactElement {
+  const { onClick, isDisabled } = props;
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            className="scale-x-[-1] w-8 h-8"
+            variant="outline"
+            size="icon"
+            onClick={() => onClick()}
+            disabled={isDisabled}
+          >
+            <ReloadIcon />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Reset changes made locally to this row</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/frontend/apps/web/components/jobs/subsets/SubsetTable/Columns.tsx b/frontend/apps/web/components/jobs/subsets/SubsetTable/Columns.tsx
new file mode 100644
index 0000000000..b6373bda15
--- /dev/null
+++ b/frontend/apps/web/components/jobs/subsets/SubsetTable/Columns.tsx
@@ -0,0 +1,118 @@
+import TruncatedText from '@/components/TruncatedText';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
+import { SchemaColumnHeader } from '../../SchemaTable/SchemaColumnHeader';
+import ActionsCell from './ActionsCell';
+import RootTableCell from './RootTableCell';
+
+export interface SubsetTableRow {
+  schema: string;
+  table: string;
+  where?: string;
+  isRootTable: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ColumnTValue = any;
+
+function getColumns(): ColumnDef<SubsetTableRow, ColumnTValue>[] {
+  const columnHelper = createColumnHelper<SubsetTableRow>();
+
+  const schemaColumn = columnHelper.accessor('schema', {
+    header({ column }) {
+      return <SchemaColumnHeader column={column} title="Schema" />;
+    },
+    cell({ getValue }) {
+      return <TruncatedText text={getValue()} maxWidth={150} />;
+    },
+  });
+
+  const tableColumn = columnHelper.accessor('table', {
+    header({ column }) {
+      return <SchemaColumnHeader column={column} title="Table" />;
+    },
+    cell({ getValue }) {
+      return <TruncatedText text={getValue()} maxWidth={150} />;
+    },
+  });
+
+  const isRootTableColumn = columnHelper.accessor(
+    (row) => (row.isRootTable ? 'Root' : ''),
+    {
+      id: 'isRootTable',
+      header({ column }) {
+        return <SchemaColumnHeader column={column} title="Root Table" />;
+      },
+      cell({ getValue }) {
+        return <RootTableCell isRootTable={!!getValue()} />;
+      },
+    }
+  );
+
+  const whereColumn = columnHelper.accessor((row) => row.where ?? '', {
+    id: 'where',
+    header({ column }) {
+      return <SchemaColumnHeader column={column} title="Subset Filters" />;
+    },
+    cell({ getValue }) {
+      const whereValue = getValue();
+      return (
+        <div className="flex justify-center">
+          <span className="truncate font-medium max-w-[200px] inline-block">
+            {!!whereValue && (
+              <pre className="bg-gray-100 rounded border border-gray-300 text-xs px-2 dark:bg-transparent dark:border dark:border-gray-700 whitespace-nowrap overflow-hidden text-ellipsis max-w-[100%]">
+                {whereValue}
+              </pre>
+            )}
+          </span>
+        </div>
+      );
+    },
+    size: 250,
+  });
+
+  const actionsColumn = columnHelper.display({
+    id: 'actions',
+    enableSorting: false,
+    enableColumnFilter: false,
+    header: ({ column }) => (
+      <SchemaColumnHeader column={column} title="Actions" />
+    ),
+    cell: ({ row, table }) => {
+      const isResetDisabled = !table.options.meta?.subsetTable?.hasLocalChange(
+        row.index,
+        row.original.schema,
+        row.original.table
+      );
+
+      return (
+        <ActionsCell
+          onEdit={() =>
+            table.options.meta?.subsetTable?.onEdit(
+              row.index,
+              row.original.schema,
+              row.original.table
+            )
+          }
+          onReset={() =>
+            table.options.meta?.subsetTable?.onReset(
+              row.index,
+              row.original.schema,
+              row.original.table
+            )
+          }
+          isResetDisabled={isResetDisabled}
+        />
+      );
+    },
+  });
+
+  return [
+    schemaColumn,
+    tableColumn,
+    isRootTableColumn,
+    whereColumn,
+    actionsColumn,
+  ];
+}
+
+export const SUBSET_TABLE_COLUMNS = getColumns();
diff --git a/frontend/apps/web/components/jobs/subsets/SubsetTable/RootTableCell.tsx b/frontend/apps/web/components/jobs/subsets/SubsetTable/RootTableCell.tsx
new file mode 100644
index 0000000000..ea85eff0c4
--- /dev/null
+++ b/frontend/apps/web/components/jobs/subsets/SubsetTable/RootTableCell.tsx
@@ -0,0 +1,35 @@
+import { Badge } from '@/components/ui/badge';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { ReactElement } from 'react';
+
+interface Props {
+  isRootTable: boolean;
+}
+export default function RootTableCell(props: Props): ReactElement {
+  const { isRootTable } = props;
+  return (
+    <div className="flex justify-center pr-4">
+      {isRootTable && (
+        <TooltipProvider>
+          <Tooltip delayDuration={200}>
+            <TooltipTrigger asChild>
+              <div>
+                <Badge variant="outline">Root</Badge>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-xs px-2 text-center mx-auto">
+              This is a Root table that only has foreign key references to
+              children tables. Subsetting this table will subset all of
+              it&apos;s children tables.
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/apps/web/components/jobs/subsets/SubsetTable/SubsetTable.tsx b/frontend/apps/web/components/jobs/subsets/SubsetTable/SubsetTable.tsx
new file mode 100644
index 0000000000..8b1417f222
--- /dev/null
+++ b/frontend/apps/web/components/jobs/subsets/SubsetTable/SubsetTable.tsx
@@ -0,0 +1,77 @@
+import ButtonText from '@/components/ButtonText';
+import FastTable from '@/components/FastTable/FastTable';
+import { Button } from '@/components/ui/button';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  RowData,
+  useReactTable,
+} from '@tanstack/react-table';
+import { ReactElement } from 'react';
+
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface TableMeta<TData extends RowData> {
+    subsetTable?: {
+      onEdit(rowIndex: number, schema: string, table: string): void;
+      onReset(rowIndex: number, schema: string, table: string): void;
+      hasLocalChange(rowIndex: number, schema: string, table: string): boolean;
+    };
+  }
+}
+
+interface Props<TData, TValue> {
+  data: TData[];
+  columns: ColumnDef<TData, TValue>[];
+  onEdit(rowIndex: number, schema: string, table: string): void;
+  onReset(rowIndex: number, schema: string, table: string): void;
+  hasLocalChange(rowIndex: number, schema: string, table: string): boolean;
+}
+
+export default function SubsetTable<TData, TValue>(
+  props: Props<TData, TValue>
+): ReactElement {
+  const { data, columns, onEdit, onReset, hasLocalChange } = props;
+
+  const table = useReactTable({
+    data,
+    columns,
+    enableRowSelection: false,
+    initialState: {},
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    meta: {
+      subsetTable: {
+        onEdit,
+        onReset,
+        hasLocalChange,
+      },
+    },
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-row items-center gap-2 justify-end">
+        <div className="flex flex-row items-center gap-2">
+          <Button
+            disabled={table.getState().columnFilters.length === 0}
+            type="button"
+            variant="outline"
+            className="px-2 lg:px-3"
+            onClick={() => table.resetColumnFilters()}
+          >
+            <ButtonText
+              leftIcon={<Cross2Icon className="h-3 w-3" />}
+              text="Clear filters"
+            />
+          </Button>
+        </div>
+      </div>
+      <FastTable table={table} estimateRowSize={() => 33} rowOverscan={50} />
+    </div>
+  );
+}
diff --git a/frontend/apps/web/components/jobs/subsets/subset-table/SubsetTable.tsx b/frontend/apps/web/components/jobs/subsets/subset-table/SubsetTable.tsx
deleted file mode 100644
index b6ac7707f5..0000000000
--- a/frontend/apps/web/components/jobs/subsets/subset-table/SubsetTable.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-import { ReactElement } from 'react';
-import { TableRow, getColumns } from './column';
-import { DataTable } from './data-table';
-
-interface Props {
-  data: TableRow[];
-  onEdit(schema: string, table: string): void;
-  hasLocalChange(schema: string, table: string): boolean;
-  onReset(schema: string, table: string): void;
-}
-
-export default function SubsetTable(props: Props): ReactElement {
-  const { data, onEdit, hasLocalChange, onReset } = props;
-
-  const columns = getColumns({ onEdit, hasLocalChange, onReset });
-
-  return <DataTable columns={columns} data={data} />;
-}
diff --git a/frontend/apps/web/components/jobs/subsets/subset-table/column.tsx b/frontend/apps/web/components/jobs/subsets/subset-table/column.tsx
deleted file mode 100644
index f5a5bf0076..0000000000
--- a/frontend/apps/web/components/jobs/subsets/subset-table/column.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-'use client';
-
-import TruncatedText from '@/components/TruncatedText';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { Pencil1Icon, ReloadIcon } from '@radix-ui/react-icons';
-import { ColumnDef } from '@tanstack/react-table';
-import { ReactElement } from 'react';
-import { SchemaColumnHeader } from '../../SchemaTable/SchemaColumnHeader';
-import { DataTableColumnHeader } from './data-table-column-header';
-
-export interface TableRow {
-  schema: string;
-  table: string;
-  where?: string;
-  isRootTable?: boolean;
-}
-
-interface GetColumnsProps {
-  onEdit(schema: string, table: string): void;
-  hasLocalChange(schema: string, table: string): boolean;
-  onReset(schema: string, table: string): void;
-}
-
-export function getColumns(props: GetColumnsProps): ColumnDef<TableRow>[] {
-  const { onEdit, hasLocalChange, onReset } = props;
-  return [
-    {
-      accessorKey: 'schema',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Schema" />
-      ),
-      cell: ({ getValue }) => getValue<string>(),
-    },
-    {
-      accessorKey: 'table',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Table" />
-      ),
-      cell: ({ getValue }) => {
-        return (
-          <div className="flex space-x-2">
-            <span className="truncate font-medium">{getValue<string>()}</span>
-          </div>
-        );
-      },
-    },
-    {
-      accessorFn: (row) => `${row.schema}.${row.table}`,
-      id: 'schemaTable',
-      footer: (props) => props.column.id,
-      header: ({ column }) => (
-        <SchemaColumnHeader column={column} title={'Table'} />
-      ),
-      cell: ({ row }) => {
-        return (
-          <TruncatedText
-            text={`${row.original.schema}.${row.original.table}`}
-            maxWidth={250}
-          />
-        );
-      },
-      size: 250,
-    },
-    {
-      accessorKey: 'isRootTable',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Root Table" />
-      ),
-      cell: ({ getValue }) => {
-        return (
-          <div className="flex justify-center pr-4">
-            {getValue<boolean>() && (
-              <TooltipProvider>
-                <Tooltip delayDuration={200}>
-                  <TooltipTrigger asChild>
-                    <div>
-                      <Badge variant="outline">Root</Badge>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent className="max-w-xs px-2 text-center mx-auto">
-                    This is a Root table that only has foreign key references to
-                    children tables. Subsetting this table will subset all of
-                    it&apos;s children tables.
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            )}
-          </div>
-        );
-      },
-    },
-    {
-      accessorKey: 'where',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Subset Filters" />
-      ),
-      cell: ({ getValue }) => {
-        return (
-          <div className="flex justify-center">
-            <span className="truncate font-medium max-w-[200px] inline-block">
-              {getValue<boolean>() && (
-                <pre className="bg-gray-100 rounded border border-gray-300 text-xs px-2 dark:bg-transparent dark:border dark:border-gray-700 whitespace-nowrap overflow-hidden text-ellipsis max-w-[100%]">
-                  {getValue<boolean>()}
-                </pre>
-              )}
-            </span>
-          </div>
-        );
-      },
-      size: 250,
-    },
-    {
-      accessorKey: 'edit',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Actions" />
-      ),
-      cell: ({ row }) => {
-        const schema = row.getValue<string>('schema');
-        const table = row.getValue<string>('table');
-        return (
-          <div className="flex gap-2">
-            <EditAction onClick={() => onEdit(schema, table)} />
-            <ResetAction
-              onClick={() => onReset(schema, table)}
-              isDisabled={!hasLocalChange(schema, table)}
-            />
-          </div>
-        );
-      },
-      enableSorting: false,
-      enableColumnFilter: false,
-    },
-  ];
-}
-
-interface EditActionProps {
-  onClick(): void;
-}
-
-function EditAction(props: EditActionProps): ReactElement {
-  const { onClick } = props;
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      size="icon"
-      onClick={() => onClick()}
-    >
-      <Pencil1Icon />
-    </Button>
-  );
-}
-
-interface ResetActionProps {
-  onClick(): void;
-  isDisabled: boolean;
-}
-
-function ResetAction(props: ResetActionProps): ReactElement {
-  const { onClick, isDisabled } = props;
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            type="button"
-            className="scale-x-[-1]"
-            variant="outline"
-            size="icon"
-            onClick={() => onClick()}
-            disabled={isDisabled}
-          >
-            <ReloadIcon />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Reset changes made locally to this row</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
diff --git a/frontend/apps/web/components/jobs/subsets/subset-table/data-table-column-header.tsx b/frontend/apps/web/components/jobs/subsets/subset-table/data-table-column-header.tsx
deleted file mode 100644
index f1a9a535a7..0000000000
--- a/frontend/apps/web/components/jobs/subsets/subset-table/data-table-column-header.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Input } from '@/components/ui/input';
-import { cn } from '@/libs/utils';
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  MagnifyingGlassIcon,
-} from '@radix-ui/react-icons';
-import { Column } from '@tanstack/react-table';
-
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>;
-  title: string;
-}
-
-export function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className,
-}: DataTableColumnHeaderProps<TData, TValue>) {
-  return (
-    <div className={cn('flex items-center', className)}>
-      <div className="flex flex-row space-x-2 items-center">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="-ml-3 data-[state=open]:bg-accent hover:border hover:border-gray-400 text-nowrap"
-            >
-              <span>{title}</span>
-              {column.getIsSorted() === 'desc' ? (
-                <ArrowDownIcon className="ml-2 h-4 w-4" />
-              ) : column.getIsSorted() === 'asc' ? (
-                <ArrowUpIcon className="ml-2 h-4 w-4" />
-              ) : (
-                <MagnifyingGlassIcon className="ml-2 h-4 w-4" />
-              )}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <Input
-              type="text"
-              value={(column.getFilterValue() ?? '') as string}
-              onChange={(e) => column.setFilterValue(e.target.value)}
-              placeholder={`Search...`}
-              className="w-36 border rounded"
-            />
-            {column.getCanSort() && (
-              <>
-                <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-                  <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-                  Asc
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-                  <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-                  Desc
-                </DropdownMenuItem>
-              </>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/apps/web/components/jobs/subsets/subset-table/data-table.tsx b/frontend/apps/web/components/jobs/subsets/subset-table/data-table.tsx
deleted file mode 100644
index 858252de4d..0000000000
--- a/frontend/apps/web/components/jobs/subsets/subset-table/data-table.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-'use client';
-
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-
-import ButtonText from '@/components/ButtonText';
-import { Button } from '@/components/ui/button';
-import {
-  StickyHeaderTable,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { cn } from '@/libs/utils';
-import { Cross2Icon } from '@radix-ui/react-icons';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef } from 'react';
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-}: DataTableProps<TData, TValue>) {
-  const table = useReactTable({
-    data,
-    columns,
-    enableRowSelection: true,
-    initialState: {
-      columnVisibility: {
-        schema: false,
-        table: false,
-      },
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-  });
-
-  const { rows } = table.getRowModel();
-
-  const tableContainerRef = useRef<HTMLDivElement>(null);
-
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    estimateSize: () => 33,
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 5,
-  });
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-row items-center gap-2 justify-end">
-        <div className="flex flex-row items-center gap-2">
-          <Button
-            disabled={table.getState().columnFilters.length === 0}
-            type="button"
-            variant="outline"
-            className="px-2 lg:px-3"
-            onClick={() => table.resetColumnFilters()}
-          >
-            <ButtonText
-              leftIcon={<Cross2Icon className="h-3 w-3" />}
-              text="Clear filters"
-            />
-          </Button>
-        </div>
-      </div>
-      <div
-        className={cn(
-          'rounded-md border min-h-[145px] max-h-[500px] relative border-gray-300 dark:border-gray-700 overflow-hidden',
-          rows.length > 0 && 'overflow-auto'
-        )}
-        ref={tableContainerRef}
-      >
-        <StickyHeaderTable>
-          <TableHeader className="bg-gray-100 dark:bg-gray-800 sticky top-0 z-10 grid">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow
-                key={headerGroup.id}
-                className="flex flex-row items-center justify-between px-2"
-              >
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead
-                      key={header.id}
-                      style={{ minWidth: `${header.column.getSize()}px` }}
-                      colSpan={header.colSpan}
-                      className="flex items-center"
-                    >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody
-            className="grid"
-            style={{
-              height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
-            }}
-          >
-            {rows.length === 0 && (
-              <TableRow className="flex justify-center items-center py-10 text-gray-500">
-                <td>No schema(s) or table(s) found.</td>
-              </TableRow>
-            )}
-            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-              const row = rows[virtualRow.index];
-              return (
-                <TableRow
-                  data-index={virtualRow.index} //needed for dynamic row height measurement
-                  ref={(node) => rowVirtualizer.measureElement(node)} //measure dynamic row height
-                  key={row.id}
-                  style={{
-                    transform: `translateY(${virtualRow.start}px)`,
-                  }}
-                  className="items-center flex absolute w-full justify-between px-2"
-                >
-                  {row.getVisibleCells().map((cell) => {
-                    return (
-                      <td
-                        key={cell.id}
-                        className="py-2 items-center flex"
-                        style={{
-                          minWidth: cell.column.getSize(),
-                        }}
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </td>
-                    );
-                  })}
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </StickyHeaderTable>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/apps/web/components/jobs/subsets/utils.ts b/frontend/apps/web/components/jobs/subsets/utils.ts
index b364ed4664..a51433a9d3 100644
--- a/frontend/apps/web/components/jobs/subsets/utils.ts
+++ b/frontend/apps/web/components/jobs/subsets/utils.ts
@@ -1,7 +1,7 @@
 import { ConnectionConfigCase } from '@/app/(mgmt)/[account]/connections/util';
 import { SubsetFormValues } from '@/app/(mgmt)/[account]/new/job/job-form-validations';
 import { Job, JobMapping } from '@neosync/sdk';
-import { TableRow } from './subset-table/column';
+import { SubsetTableRow } from './SubsetTable/Columns';
 
 // Valid ConnectionConfigCase types. Using Extract here to ensure they stay consistent with what is available in ConnectionConfigCase
 export type ValidSubsetConnectionType = Extract<
@@ -18,8 +18,8 @@ export function buildTableRowData(
   dbCols: DbCol[],
   rootTables: Set<string>,
   existingSubsets: SubsetFormValues['subsets']
-): Record<string, TableRow> {
-  const tableMap: Record<string, TableRow> = {};
+): Record<string, SubsetTableRow> {
+  const tableMap: Record<string, SubsetTableRow> = {};
 
   dbCols.forEach((mapping) => {
     const key = buildRowKey(mapping.schema, mapping.table);
@@ -27,6 +27,7 @@ export function buildTableRowData(
       schema: mapping.schema,
       table: mapping.table,
       isRootTable: rootTables.has(key),
+      where: undefined,
     };
   });
   existingSubsets.forEach((subset) => {
@@ -43,18 +44,17 @@ export function buildRowKey(schema: string, table: string): string {
   return `${schema}.${table}`;
 }
 
-export function GetColumnsForSqlAutocomplete(
-  mappings: JobMapping[],
-  itemToEdit: TableRow | undefined
+export function getColumnsForSqlAutocomplete(
+  mappings: Pick<JobMapping, 'schema' | 'table' | 'column'>[],
+  schema: string,
+  table: string
 ): string[] {
-  let cols: string[] = [];
-  mappings.map((row) => {
-    if (row.schema == itemToEdit?.schema && row.table == itemToEdit.table) {
-      cols.push(row.column);
-    }
-  });
-
-  return cols;
+  if (!mappings) {
+    return [];
+  }
+  return mappings
+    .filter((row) => row.schema === schema && row.table === table)
+    .map((row) => row.column);
 }
 
 export function isJobSubsettable(job: Job): boolean {