diff --git a/apps/web/playwright/team-availability.e2e.ts b/apps/web/playwright/team-availability.e2e.ts
new file mode 100644
index 0000000000..dbb35bd7cb
--- /dev/null
+++ b/apps/web/playwright/team-availability.e2e.ts
@@ -0,0 +1,41 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+test.describe("Team Availability", () => {
+ test.beforeEach(async ({ page, users }) => {
+ const user = await users.create();
+ await user.apiLogin();
+ });
+
+ test.afterEach(async ({ users }) => {
+ await users.deleteAll();
+ });
+
+ test("page loads", async ({ page, users }) => {
+ const teamMatesObj = [
+ { name: "teammate-1" },
+ { name: "teammate-2" },
+ { name: "teammate-3" },
+ { name: "teammate-4" },
+ ];
+
+ const owner = await users.create(
+ { username: "pro-user", name: "pro-user" },
+ {
+ hasTeam: true,
+ teammates: teamMatesObj,
+ }
+ );
+
+ await owner.apiLogin();
+
+ await page.goto("/availability?type=team");
+
+ await page.waitForSelector('div[data-testid="data-table"] table');
+ const rows = await page.locator('div[data-testid="data-table"] table tbody tr').count();
+ expect(rows).toBe(teamMatesObj.length + 1);
+ });
+});
diff --git a/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx b/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx
index d74571563f..b81c9985be 100644
--- a/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx
+++ b/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx
@@ -2,7 +2,8 @@ import type { ColumnDef } from "@tanstack/react-table";
import { useReactTable, getCoreRowModel } from "@tanstack/react-table";
import { useRef, useState } from "react";
-import { DataTable, DataTableToolbar } from "@calcom/features/data-table";
+import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider";
+import { DataTable, DataTableToolbar } from "@calcom/features/data-table/components";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
@@ -17,6 +18,14 @@ interface TeamGroupMapping {
}
const GroupTeamMappingTable = () => {
+ return (
+
+
+
+ );
+};
+
+const GroupTeamMappingTableContent = () => {
const { t } = useLocale();
const [createTeamDialogOpen, setCreateTeamDialogOpen] = useState(false);
diff --git a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
index 7f9990d94d..a5bf9bdb6a 100644
--- a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
+++ b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
@@ -6,7 +6,8 @@ import { getCoreRowModel, getFilteredRowModel, useReactTable } from "@tanstack/r
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import dayjs from "@calcom/dayjs";
-import { DataTable, DataTableToolbar } from "@calcom/features/data-table";
+import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider";
+import { DataTable, DataTableToolbar } from "@calcom/features/data-table/components";
import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
import type { DateRange } from "@calcom/lib/date-ranges";
import { useDebounce } from "@calcom/lib/hooks/useDebounce";
@@ -67,6 +68,14 @@ function UpgradeTeamTip() {
}
export function AvailabilitySliderTable(props: { userTimeFormat: number | null; isOrg: boolean }) {
+ return (
+
+
+
+ );
+}
+
+function AvailabilitySliderTableContent(props: { userTimeFormat: number | null; isOrg: boolean }) {
const tableContainerRef = useRef(null);
const [browsingDate, setBrowsingDate] = useState(dayjs());
const [editSheetOpen, setEditSheetOpen] = useState(false);