refactor: move data-table hooks/contexts/provider from features to web modules (calcom#27833)

* refactor: move data-table hooks/contexts/provider from features to web modules

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: update broken useColumnResizing import path in DataTable.tsx

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: update remaining broken import paths for moved hooks

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* docs: update GUIDE.md import paths and file references for moved modules

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: eunjae-lee

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/date-range-filter/page.tsx

@@ -3,7 +3,8 @@
 import { useReactTable, getCoreRowModel, createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";
 
-import { ColumnFilterType, DataTableProvider } from "@calcom/features/data-table";
+import { ColumnFilterType } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import type { DateRangeFilterOptions } from "@calcom/features/data-table/lib/types";
 import { DateRangeFilter } from "~/data-table/components/filters/DateRangeFilter";
 

apps/web/modules/bookings/components/BookingListContainer.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import dayjs from "@calcom/dayjs";
-import { useDataTable, useDisplayedFilterCount } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useDisplayedFilterCount } from "~/data-table/hooks/useDisplayedFilterCount";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";

apps/web/modules/bookings/hooks/useActiveFiltersValidator.ts

@@ -1,5 +1,6 @@
-import type { ActiveFilter, ActiveFilters, ActiveFiltersValidator } from "@calcom/features/data-table";
+import type { ActiveFilter, ActiveFilters } from "@calcom/features/data-table";
 import { ColumnFilterType } from "@calcom/features/data-table";
+import type { ActiveFiltersValidator } from "~/data-table/DataTableProvider";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { useCallback, useMemo } from "react";

apps/web/modules/bookings/hooks/useBookingFilters.ts

@@ -1,9 +1,5 @@
-import {
-  useFilterValue,
-  ZMultiSelectFilterValue,
-  ZDateRangeFilterValue,
-  ZTextFilterValue,
-} from "@calcom/features/data-table";
+import { ZMultiSelectFilterValue, ZDateRangeFilterValue, ZTextFilterValue } from "@calcom/features/data-table";
+import { useFilterValue } from "~/data-table/hooks/useFilterValue";
 
 export function useBookingFilters() {
   const eventTypeIds = useFilterValue("eventTypeId", ZMultiSelectFilterValue)?.data as number[] | undefined;

apps/web/modules/bookings/hooks/useCalendarAllowedFilters.ts

@@ -1,6 +1,7 @@
 import { useMemo, useEffect, useRef } from "react";
 
-import { ColumnFilterType, useDataTable } from "@calcom/features/data-table";
+import { ColumnFilterType } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 
 /**

apps/web/modules/bookings/views/bookings-view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { ColumnFilterType, DataTableProvider, type SystemFilterSegment } from "@calcom/features/data-table";
+import { ColumnFilterType, type SystemFilterSegment } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import FeatureOptInBannerWrapper from "~/feature-opt-in/components/FeatureOptInBannerWrapper";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

…eatures/data-table/DataTableProvider.tsx …modules/data-table/DataTableProvider.tsxpackages/features/data-table/DataTableProvider.tsx renamed to apps/web/modules/data-table/DataTableProvider.tsx packages/features/data-table/DataTableProvider.tsx renamed to apps/web/modules/data-table/DataTableProvider.tsx

@@ -20,7 +20,7 @@ import type {
   SegmentIdentifier,
   ActiveFilters,
   UseSegments,
-} from "./lib/types";
+} from "@calcom/features/data-table/lib/types";
 
 export type { ActiveFiltersValidatorState };
 export type { ActiveFiltersValidator } from "./contexts";

apps/web/modules/data-table/components/DataTable.tsx

@@ -21,8 +21,8 @@ import {
   TableRow,
 } from "@calcom/ui/components/table";
 
-import { useColumnSizingVars } from "@calcom/features/data-table/hooks";
-import { useColumnResizing } from "@calcom/features/data-table/hooks/useColumnResizing";
+import { useColumnSizingVars } from "~/data-table/hooks/useColumnSizingVars";
+import { useColumnResizing } from "~/data-table/hooks/useColumnResizing";
 import type { SeparatorRow } from "@calcom/features/data-table/lib/separator";
 import { isSeparatorRow } from "@calcom/features/data-table/lib/separator";
 

apps/web/modules/data-table/components/DataTablePagination.tsx

@@ -4,7 +4,7 @@ import { type Table } from "@tanstack/react-table";
 
 import { Pagination } from "@calcom/ui/components/pagination";
 
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;

apps/web/modules/data-table/components/DataTableToolbar.tsx

@@ -10,7 +10,7 @@ import classNames from "@calcom/ui/classNames";
 import { Button, type ButtonProps } from "@calcom/ui/components/button";
 import { FilterSearchField } from "@calcom/ui/components/form";
 
-import { useColumnFilters, useDataTable } from "@calcom/features/data-table/hooks";
+import { useColumnFilters, useDataTable } from "~/data-table/hooks";
 
 interface DataTableToolbarProps extends ComponentPropsWithoutRef<"div"> {
   children: React.ReactNode;