🪟 🔧 UI Table migration to v8

airbyte-webapp/src/components/EntityTable/ConnectionTable.module.scss

@@ -1,10 +1,11 @@
-.tableHeaderButton {
-  background-color: inherit;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  font-size: inherit;
-  font-weight: inherit;
-  text-transform: inherit;
-  white-space: nowrap;
+.thName {
+  width: 30%;
+}
+
+.thEnabled {
+  width: 1%;
+}
+
+.thConnectionId {
+  width: 1%;
 }

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -1,21 +1,23 @@
+import { CellContext, ColumnDef } from "@tanstack/react-table";
 import queryString from "query-string";
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { CellProps } from "react-table";
 
-import { Table, SortableTableHeader } from "components/ui/Table";
+import { SortableTableHeader } from "components/ui/Table";
 
-import { ConnectionScheduleType, SchemaChange } from "core/request/AirbyteClient";
+import { ConnectionScheduleData, ConnectionScheduleType, SchemaChange } from "core/request/AirbyteClient";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useQuery } from "hooks/useQuery";
 
+import { NextTable } from "../ui/NextTable";
 import ConnectionSettingsCell from "./components/ConnectionSettingsCell";
 import ConnectorCell from "./components/ConnectorCell";
 import FrequencyCell from "./components/FrequencyCell";
 import LastSyncCell from "./components/LastSyncCell";
 import NameCell from "./components/NameCell";
 import { StatusCell } from "./components/StatusCell";
+import styles from "./ConnectionTable.module.scss";
 import { ITableDataItem, SortOrderEnum } from "./types";
 
 interface IProps {
@@ -25,6 +27,16 @@ interface IProps {
   onSync: (id: string) => void;
 }
 
+type ColumnDefs = [
+  ColumnDef<ITableDataItem, string>,
+  ColumnDef<ITableDataItem, string>,
+  ColumnDef<ITableDataItem, string>,
+  ColumnDef<ITableDataItem, ConnectionScheduleData>,
+  ColumnDef<ITableDataItem, number>,
+  ColumnDef<ITableDataItem, boolean>,
+  ColumnDef<ITableDataItem, string>
+];
+
 const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync }) => {
   const navigate = useNavigate();
   const query = useQuery<{ sortBy?: string; order?: SortOrderEnum }>();
@@ -71,10 +83,10 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
 
   const sortingData = React.useMemo(() => data.sort(sortData), [sortData, data]);
 
-  const columns = React.useMemo(
+  const columns = React.useMemo<ColumnDefs>(
     () => [
       {
-        Header: (
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("name")}
             isActive={sortBy === "name"}
@@ -83,15 +95,21 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
             <FormattedMessage id="tables.name" />
           </SortableTableHeader>
         ),
-        headerHighlighted: true,
-        accessor: "name",
-        customWidth: 30,
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <NameCell value={cell.value} enabled={row.original.enabled} status={row.original.lastSyncStatus} />
+        meta: {
+          thClassName: styles.thName,
+          headerHighlighted: true,
+        },
+        accessorKey: "name",
+        cell: (props: CellContext<ITableDataItem, string>) => (
+          <NameCell
+            value={props.cell.getValue()}
+            enabled={props.row.original.enabled}
+            status={props.row.original.lastSyncStatus}
+          />
         ),
       },
       {
-        Header: (
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("entityName")}
             isActive={sortBy === "entityName"}
@@ -102,19 +120,21 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
             />
           </SortableTableHeader>
         ),
-        headerHighlighted: true,
-        accessor: "entityName",
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
+        meta: {
+          headerHighlighted: true,
+        },
+        accessorKey: "entityName",
+        cell: (props: CellContext<ITableDataItem, string>) => (
           <NameCell
-            value={cell.value}
-            enabled={row.original.enabled}
+            value={props.cell.getValue()}
+            enabled={props.row.original.enabled}
             icon={entity === "connection"}
-            img={row.original.entityIcon}
+            img={props.row.original.entityIcon}
           />
         ),
       },
       {
-        Header: (
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("connectorName")}
             isActive={sortBy === "connectorName"}
@@ -123,21 +143,28 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
             <FormattedMessage id={entity === "connection" ? "tables.sourceConnectionToName" : "tables.connector"} />
           </SortableTableHeader>
         ),
-        accessor: "connectorName",
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <ConnectorCell value={cell.value} enabled={row.original.enabled} img={row.original.connectorIcon} />
+        accessorKey: "connectorName",
+        cell: (props: CellContext<ITableDataItem, string>) => (
+          <ConnectorCell
+            value={props.cell.getValue()}
+            enabled={props.row.original.enabled}
+            img={props.row.original.connectorIcon}
+          />
         ),
       },
-
       {
-        Header: <FormattedMessage id="tables.frequency" />,
-        accessor: "scheduleData",
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <FrequencyCell value={cell.value} enabled={row.original.enabled} scheduleType={row.original.scheduleType} />
+        header: () => <FormattedMessage id="tables.frequency" />,
+        accessorKey: "scheduleData",
+        cell: (props: CellContext<ITableDataItem, ConnectionScheduleData>) => (
+          <FrequencyCell
+            value={props.cell.getValue()}
+            enabled={props.row.original.enabled}
+            scheduleType={props.row.original.scheduleType}
+          />
         ),
       },
       {
-        Header: (
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("lastSync")}
             isActive={sortBy === "lastSync"}
@@ -146,39 +173,43 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
             <FormattedMessage id="tables.lastSync" />
           </SortableTableHeader>
         ),
-        accessor: "lastSync",
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <LastSyncCell timeInSecond={cell.value} enabled={row.original.enabled} />
+        accessorKey: "lastSync",
+        cell: (props: CellContext<ITableDataItem, number>) => (
+          <LastSyncCell timeInSecond={props.cell.getValue()} enabled={props.row.original.enabled} />
         ),
       },
       {
-        Header: <FormattedMessage id="tables.enabled" />,
-        accessor: "enabled",
-        customWidth: 1,
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
+        header: () => <FormattedMessage id="tables.enabled" />,
+        accessorKey: "enabled",
+        meta: {
+          thClassName: styles.thEnabled,
+        },
+        cell: (props: CellContext<ITableDataItem, boolean>) => (
           <StatusCell
-            schemaChange={row.original.schemaChange}
-            enabled={cell.value}
-            id={row.original.connectionId}
-            isSyncing={row.original.isSyncing}
-            isManual={row.original.scheduleType === ConnectionScheduleType.manual}
+            schemaChange={props.row.original.schemaChange}
+            enabled={props.cell.getValue()}
+            id={props.row.original.connectionId}
+            isSyncing={props.row.original.isSyncing}
+            isManual={props.row.original.scheduleType === ConnectionScheduleType.manual}
             onSync={onSync}
-            hasBreakingChange={allowAutoDetectSchema && row.original.schemaChange === SchemaChange.breaking}
+            hasBreakingChange={allowAutoDetectSchema && props.row.original.schemaChange === SchemaChange.breaking}
             allowSync={allowSync}
           />
         ),
       },
       {
-        Header: "",
-        accessor: "connectionId",
-        customWidth: 1,
-        Cell: ({ cell }: CellProps<ITableDataItem>) => <ConnectionSettingsCell id={cell.value} />,
+        header: "",
+        accessorKey: "connectionId",
+        meta: {
+          thClassName: styles.thConnectionId,
+        },
+        cell: (props: CellContext<ITableDataItem, string>) => <ConnectionSettingsCell id={props.cell.getValue()} />,
       },
     ],
     [sortBy, sortOrder, entity, onSortClick, onSync, allowSync, allowAutoDetectSchema]
   );
 
-  return <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows />;
+  return <NextTable columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows />;
 };
 
 export default ConnectionTable;

airbyte-webapp/src/components/EntityTable/ImplementationTable.module.scss

@@ -3,3 +3,7 @@
     padding-left: 32px !important;
   }
 }
+
+.thEntityName {
+  width: 40%;
+}

airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx

@@ -1,10 +1,11 @@
+import { ColumnDef } from "@tanstack/react-table";
 import queryString from "query-string";
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { CellProps } from "react-table";
 
-import { Table, SortableTableHeader } from "components/ui/Table";
+import { NextTable } from "components/ui/NextTable";
+import { SortableTableHeader } from "components/ui/Table";
 
 import { useQuery } from "hooks/useQuery";
 
@@ -22,6 +23,21 @@ interface IProps {
   onClickRow?: (data: EntityTableDataItem) => void;
 }
 
+interface AllConnectionStatusConnectEntity {
+  name: string;
+  connector: string;
+  status: string;
+  lastSyncStatus: string;
+}
+
+type ColumnDefs = [
+  ColumnDef<EntityTableDataItem, string>,
+  ColumnDef<EntityTableDataItem, string>,
+  ColumnDef<EntityTableDataItem, AllConnectionStatusConnectEntity[]>,
+  ColumnDef<EntityTableDataItem, number | null>,
+  ColumnDef<EntityTableDataItem, AllConnectionStatusConnectEntity[]>
+];
+
 const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
   const query = useQuery<{ sortBy?: string; order?: SortOrderEnum }>();
   const navigate = useNavigate();
@@ -64,10 +80,10 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
   );
 
   const sortingData = React.useMemo(() => data.sort(sortData), [sortData, data]);
-  const columns = React.useMemo(
+  const columns = React.useMemo<ColumnDefs>(
     () => [
       {
-        Header: (
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("entity")}
             isActive={sortBy === "entity"}
@@ -76,15 +92,15 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
             <FormattedMessage id="tables.name" />
           </SortableTableHeader>
         ),
-        headerHighlighted: true,
-        accessor: "entityName",
-        customWidth: 40,
-        Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <NameCell value={cell.value} enabled={row.original.enabled} />
-        ),
+        meta: {
+          thClassName: styles.thEntityName,
+          headerHighlighted: true,
+        },
+        accessorKey: "entityName",
+        cell: (props) => <NameCell value={props.cell.getValue()} enabled={props.row.original.enabled} />,
       },
       {
-        Header: (
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("connector")}
             isActive={sortBy === "connector"}
@@ -93,20 +109,24 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
             <FormattedMessage id="tables.connector" />
           </SortableTableHeader>
         ),
-        accessor: "connectorName",
-        Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <ConnectorCell value={cell.value} enabled={row.original.enabled} img={row.original.connectorIcon} />
+        accessorKey: "connectorName",
+        cell: (props) => (
+          <ConnectorCell
+            value={props.cell.getValue()}
+            enabled={props.row.original.enabled}
+            img={props.row.original.connectorIcon}
+          />
         ),
       },
       {
-        Header: <FormattedMessage id={`tables.${entity}ConnectWith`} />,
-        accessor: "connectEntities",
-        Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <ConnectEntitiesCell values={cell.value} entity={entity} enabled={row.original.enabled} />
+        header: () => <FormattedMessage id={`tables.${entity}ConnectWith`} />,
+        accessorKey: "connectEntities",
+        cell: (props) => (
+          <ConnectEntitiesCell values={props.cell.getValue()} entity={entity} enabled={props.row.original.enabled} />
         ),
       },
       {
-        Header: (
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("lastSync")}
             isActive={sortBy === "lastSync"}
@@ -115,24 +135,24 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
             <FormattedMessage id="tables.lastSync" />
           </SortableTableHeader>
         ),
-        accessor: "lastSync",
-        Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <LastSyncCell timeInSecond={cell.value} enabled={row.original.enabled} />
+        accessorKey: "lastSync",
+        cell: (props) => (
+          <LastSyncCell timeInSecond={props.cell.getValue() || 0} enabled={props.row.original.enabled} />
         ),
       },
       {
-        Header: <FormattedMessage id="sources.status" />,
+        header: () => <FormattedMessage id="sources.status" />,
         id: "status",
-        accessor: "connectEntities",
-        Cell: ({ cell }: CellProps<EntityTableDataItem>) => <AllConnectionsStatusCell connectEntities={cell.value} />,
+        accessorKey: "connectEntities",
+        cell: (props) => <AllConnectionsStatusCell connectEntities={props.cell.getValue()} />,
       },
     ],
     [entity, onSortClick, sortBy, sortOrder]
   );
 
   return (
     <div className={styles.content}>
-      <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows />
+      <NextTable columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows />
     </div>
   );
 };