refactor: move data-table hooks/contexts/provider from features to web modules (#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>
2026-02-13 00:00:40 +09:00
parent 397bf3cc0c
commit 1368ffe55d
63 changed files with 123 additions and 124 deletions
@@ -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";

@@ -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";
@@ -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";
@@ -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;
@@ -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";

 /**
@@ -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";
@@ -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";
@@ -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";

@@ -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>;
@@ -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;
@@ -4,9 +4,9 @@ import type { Row, VisibilityState } from "@tanstack/react-table";
 import { noop } from "lodash";
 import { useEffect, useRef } from "react";

-import { useColumnFilters } from "@calcom/features/data-table/hooks/useColumnFilters";
-import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
-import { useFetchMoreOnBottomReached } from "@calcom/features/data-table/hooks/useFetchMoreOnBottomReached";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useFetchMoreOnBottomReached } from "~/data-table/hooks/useFetchMoreOnBottomReached";
 import type { DataTablePropsFromWrapper } from "./DataTable";
 import { DataTable } from "./DataTable";
 import { DataTablePagination } from "./DataTablePagination";
@@ -2,7 +2,7 @@

 import { type Table } from "@tanstack/react-table";

-import { useDataTable, useFilterableColumns } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterableColumns } from "~/data-table/hooks";
 import { ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import { DateRangeFilter } from "./DateRangeFilter";
 import { FilterPopover } from "./FilterPopover";
@@ -11,7 +11,7 @@ import { EyeOffIcon, PlusIcon } from "@coss/ui/icons";
 import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
 import { Tooltip } from "@calcom/ui/components/tooltip";

-import { useDataTable, useFilterableColumns } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterableColumns } from "~/data-table/hooks";

 export interface AddFilterButtonProps<TData> {
  table: Table<TData>;
@@ -16,7 +16,7 @@ import {
 } from "@calcom/ui/components/command";
 import { CheckIcon } from "@coss/ui/icons";

-import { useDataTable, useFilterValue } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterValue } from "~/data-table/hooks";
 import type {
  FacetedValue,
  FilterableColumn as _FilterableColumn,
@@ -2,7 +2,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Tooltip } from "@calcom/ui/components/tooltip";

-import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
+import { useDataTable } from "~/data-table/hooks/useDataTable";

 export const ClearFiltersButton = ({ exclude }: { exclude?: string[] }) => {
  const { t } = useLocale();
@@ -19,7 +19,7 @@ import { DateRangePicker } from "@calcom/ui/components/form";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
 import { CheckIcon } from "@coss/ui/icons";

-import { useDataTable, useFilterValue } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterValue } from "~/data-table/hooks";
 import {
  CUSTOM_PRESET,
  CUSTOM_PRESET_VALUE,
@@ -2,7 +2,7 @@

 import { type Table } from "@tanstack/react-table";

-import { useDisplayedFilterCount } from "@calcom/features/data-table/hooks";
+import { useDisplayedFilterCount } from "~/data-table/hooks";
 import { ActiveFilters } from "./ActiveFilters";
 import { AddFilterButton } from "./AddFilterButton";

@@ -6,7 +6,7 @@ import { Button } from "@calcom/ui/components/button";
 import type { IconName } from "@calcom/ui/components/icon";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";

-import { useFilterValue } from "@calcom/features/data-table/hooks";
+import { useFilterValue } from "~/data-table/hooks";
 import {
  type FilterableColumn,
  type FilterValue,
@@ -1,6 +1,6 @@
 "use client";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZMultiSelectFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Form, Select, NumberInput } from "@calcom/ui/components/form";

-import { useFilterValue, useDataTable } from "@calcom/features/data-table/hooks";
+import { useFilterValue, useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZNumberFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";
@@ -2,7 +2,7 @@

 import type { FilterType } from "@calcom/types/data-table";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZSingleSelectFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import { BaseSelectFilterOptions } from "./BaseSelectFilterOptions";
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Form, Select, Input } from "@calcom/ui/components/form";

-import { useFilterValue, useDataTable } from "@calcom/features/data-table/hooks";
+import { useFilterValue, useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZTextFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";

 export function useFilterPopoverOpen(columnId: string) {
  const { filterToOpen } = useDataTable();
@@ -3,7 +3,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
 import { showToast } from "@calcom/ui/components/toast";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { FilterSegmentOutput } from "@calcom/features/data-table/lib/types";

 export function DeleteSegmentDialog({
@@ -9,7 +9,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/co
 import { Form, TextField } from "@calcom/ui/components/form";
 import { showToast } from "@calcom/ui/components/toast";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { CombinedFilterSegment } from "@calcom/features/data-table/lib/types";

 type FormValues = {
@@ -1,5 +1,5 @@
 import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type {
  CombinedFilterSegment,
  FilterSegmentOutput,
@@ -19,7 +19,7 @@ import { Form, Input, Label, Select, Switch } from "@calcom/ui/components/form";
 import { RadioGroup, RadioField } from "@calcom/ui/components/radio";
 import { showToast } from "@calcom/ui/components/toast";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";

 interface FormValues {
  name: string;
@@ -3,7 +3,7 @@
 import debounce from "lodash/debounce";
 import { createContext, useContext, useCallback, useMemo, useEffect } from "react";

-import type { FilterValue, ActiveFilters } from "../lib/types";
+import type { FilterValue, ActiveFilters } from "@calcom/features/data-table/lib/types";
 import { useDataTableSegment } from "./DataTableSegmentContext";
 import { useDataTableState } from "./DataTableStateContext";

@@ -9,8 +9,8 @@ import type {
  CombinedFilterSegment,
  SegmentIdentifier,
  UseSegments,
-} from "../lib/types";
-import { SYSTEM_SEGMENT_PREFIX } from "../lib/types";
+} from "@calcom/features/data-table/lib/types";
+import { SYSTEM_SEGMENT_PREFIX } from "@calcom/features/data-table/lib/types";
 import { useDataTableState } from "./DataTableStateContext";

 export type DataTableSegmentContextType = {
@@ -16,9 +16,9 @@ import {
  pageSizeParser,
  searchTermParser,
  DEFAULT_PAGE_SIZE,
-} from "../lib/parsers";
-import type { ActiveFilters, SegmentIdentifier } from "../lib/types";
-import { CTA_CONTAINER_CLASS_NAME } from "../lib/utils";
+} from "@calcom/features/data-table/lib/parsers";
+import type { ActiveFilters, SegmentIdentifier } from "@calcom/features/data-table/lib/types";
+import { CTA_CONTAINER_CLASS_NAME } from "@calcom/features/data-table/lib/utils";

 export type ActiveFiltersValidator = (filters: ActiveFilters) => ActiveFilters;

@@ -2,7 +2,7 @@ import { useMemo } from "react";

 import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";

-import { preserveLocalTime } from "../lib/preserveLocalTime";
+import { preserveLocalTime } from "@calcom/features/data-table/lib/preserveLocalTime";
 import { useDataTable } from "./useDataTable";

 /**
@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from "react";

-import type { ColumnFilter } from "../lib/types";
-import { ZFilterValue } from "../lib/types";
-import { isMultiSelectFilterValue } from "../lib/utils";
+import type { ColumnFilter } from "@calcom/features/data-table/lib/types";
+import { ZFilterValue } from "@calcom/features/data-table/lib/types";
+import { isMultiSelectFilterValue } from "@calcom/features/data-table/lib/utils";
 import { useDataTable } from "./useDataTable";

 export function useColumnFilters({ exclude }: { exclude?: string[] } = {}): ColumnFilter[] {
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import type { z } from "zod";

-import type { FilterValueSchema, ZFilterValue } from "../lib/types";
+import type { FilterValueSchema, ZFilterValue } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";
 import { useDataTable } from "./useDataTable";

@@ -4,9 +4,9 @@ import { type Table } from "@tanstack/react-table";
 // eslint-disable-next-line no-restricted-imports
 import { useMemo } from "react";

-import type { FilterableColumn, FacetedValue } from "../lib/types";
-import { ColumnFilterType } from "../lib/types";
-import { convertMapToFacetedValues } from "../lib/utils";
+import type { FilterableColumn, FacetedValue } from "@calcom/features/data-table/lib/types";
+import { ColumnFilterType } from "@calcom/features/data-table/lib/types";
+import { convertMapToFacetedValues } from "@calcom/features/data-table/lib/utils";

 export function useFilterableColumns<TData>(table: Table<TData>) {
  const columns = useMemo(
@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";

-import { type UseSegments } from "../lib/types";
+import { type UseSegments } from "@calcom/features/data-table/lib/types";

 export const useSegmentsNoop: UseSegments = ({}) => {
  return {
@@ -3,7 +3,7 @@ import { useReactTable, getCoreRowModel } from "@tanstack/react-table";
 import { usePathname } from "next/navigation";
 import { useRef, useState } from "react";

-import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { DataTable, DataTableToolbar } from "~/data-table/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -11,7 +11,8 @@ import {
  PendingReportsTable,
  type SortByOption,
 } from "@calcom/web/modules/blocklist";
-import { DataTableProvider, useDataTable } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import { DataTableToolbar } from "~/data-table/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -2,7 +2,7 @@

 import { usePathname } from "next/navigation";

-import { DataTableProvider } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import LicenseRequired from "~/ee/common/components/LicenseRequired";
 import OrgAutoJoinSetting from "~/ee/organizations/components/OrgAutoJoinSetting";
@@ -10,7 +10,7 @@ import {
  PendingReportsTable,
  type SortByOption,
 } from "@calcom/web/modules/blocklist";
-import { useDataTable } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import { DataTableToolbar } from "~/data-table/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -18,13 +18,11 @@ import { useMemo, useReducer, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";

 import { Dialog } from "@calcom/features/components/controlled-dialog";
-import {
-  DataTableProvider,
-  useDataTable,
-  useFetchMoreOnBottomReached,
-  useColumnFilters,
-  convertFacetedValuesToMap,
-} from "@calcom/features/data-table";
+import { convertFacetedValuesToMap } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useFetchMoreOnBottomReached } from "~/data-table/hooks/useFetchMoreOnBottomReached";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
 import {
  DataTableToolbar,
  DataTableFilters,
@@ -2,7 +2,7 @@ import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } fro
 import { usePathname } from "next/navigation";
 import { useMemo, useState, useCallback } from "react";

-import { DataTableProvider } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { DataTableWrapper } from "~/data-table/components";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import { useVoicePreview } from "@calcom/features/ee/workflows/hooks/useVoicePreview";
@@ -2,7 +2,7 @@

 import { useMemo } from "react";

-import { useDataTable } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import NoSSR from "@calcom/lib/components/NoSSR";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
@@ -7,13 +7,13 @@ import { useMemo, useEffect } from "react";
 import { createPortal } from "react-dom";

 import {
-  useDataTable,
  ColumnFilterType,
  convertMapToFacetedValues,
-  useFilterValue,
  ZSingleSelectFilterValue,
  type FilterableColumn,
 } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useFilterValue } from "~/data-table/hooks/useFilterValue";
 import {
  DataTableWrapper,
  DataTableFilters,
@@ -1,8 +1,8 @@
 import { useMemo } from "react";

 import dayjs from "@calcom/dayjs";
-import { useColumnFilters } from "@calcom/features/data-table/hooks/useColumnFilters";
-import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import {
  getDefaultStartDate,
  getDefaultEndDate,
@@ -1,7 +1,9 @@
 import { useMemo } from "react";

 import dayjs from "@calcom/dayjs";
-import { useFilterValue, useColumnFilters, ZDateRangeFilterValue } from "@calcom/features/data-table";
+import { ZDateRangeFilterValue } from "@calcom/features/data-table";
+import { useFilterValue } from "~/data-table/hooks/useFilterValue";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
 import { getDefaultStartDate, getDefaultEndDate } from "@calcom/features/data-table/lib/dateRange";

 import { useInsightsOrgTeams } from "./useInsightsOrgTeams";
@@ -4,12 +4,9 @@ import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } fro
 import { usePathname } from "next/navigation";
 import { useMemo, useState, useReducer } from "react";

-import {
-  DataTableProvider,
-  ColumnFilterType,
-  convertFacetedValuesToMap,
-  useDataTable,
-} from "@calcom/features/data-table";
+import { ColumnFilterType, convertFacetedValuesToMap } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import { DataTableWrapper, DataTableToolbar, DataTableFilters } from "~/data-table/components";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
@@ -2,7 +2,7 @@

 import { usePathname } from "next/navigation";

-import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import {
  RoutingFormResponsesTable,
@@ -3,10 +3,11 @@
 import { usePathname } from "next/navigation";
 import { useState, useCallback } from "react";

-import { DataTableProvider, ColumnFilterType, type FilterableColumn } from "@calcom/features/data-table";
+import { ColumnFilterType, type FilterableColumn } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { DataTableFilters, DateRangeFilter } from "~/data-table/components";
 import type { FilterType } from "@calcom/types/data-table";
-import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import {
  AverageEventDurationChart,
@@ -6,13 +6,9 @@ import { useSession } from "next-auth/react";
 import { useState, useEffect, useRef } from "react";

 import dayjs from "@calcom/dayjs";
-import {
-  DataTableProvider,
-  ColumnFilterType,
-  useFilterValue,
-  ZDateRangeFilterValue,
-  type FilterableColumn,
-} from "@calcom/features/data-table";
+import { ColumnFilterType, ZDateRangeFilterValue, type FilterableColumn } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useFilterValue } from "~/data-table/hooks/useFilterValue";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -11,13 +11,10 @@ import { usePathname } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";

 import dayjs from "@calcom/dayjs";
-import {
-  DataTableProvider,
-  ColumnFilterType,
-  useDataTable,
-  useFilterValue,
-  ZDateRangeFilterValue,
-} from "@calcom/features/data-table";
+import { ColumnFilterType, ZDateRangeFilterValue } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useFilterValue } from "~/data-table/hooks/useFilterValue";
 import {
  DataTableWrapper,
  DataTableToolbar,
@@ -7,9 +7,9 @@ import { usePathname } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

 import dayjs from "@calcom/dayjs";
-import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { DataTable, DataTableToolbar } from "~/data-table/components";
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import type { DateRange } from "@calcom/features/schedules/lib/date-ranges";
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -4,7 +4,9 @@ import { keepPreviousData } from "@tanstack/react-query";
 import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table";
 import { useMemo, useReducer, useState } from "react";

-import { DataTableProvider, useColumnFilters, useDataTable } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import {
  DataTableWrapper,
  DataTableToolbar,
@@ -1,14 +1,10 @@
 "use client";

 import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
-import {
-  ColumnFilterType,
-  convertFacetedValuesToMap,
-  DataTableProvider,
-  type FacetedValue,
-  useColumnFilters,
-  useDataTable,
-} from "@calcom/features/data-table";
+import { ColumnFilterType, convertFacetedValuesToMap, type FacetedValue } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import type { MemberPermissions } from "@calcom/features/pbac/lib/team-member-permissions";
@@ -101,13 +101,17 @@ DataTableProvider (Context)
 ### Basic Setup

 ```tsx
-import {
-  DataTableProvider,
-  DataTableWrapper,
-  DataTableFilters,
-  useDataTable,
-  ColumnFilterType,
-} from "@calcom/features/data-table";
+// Types and utilities stay in @calcom/features/data-table
+import { ColumnFilterType } from "@calcom/features/data-table";
+
+// Hooks, contexts, and providers are in apps/web/modules/data-table
+// (use ~/data-table/... imports within apps/web)
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+
+// UI components are in apps/web/modules/data-table/components
+import { DataTableWrapper } from "~/data-table/components/DataTableWrapper";
+import { DataTableFilters } from "~/data-table/components/filters";

 // 1. Define your data type
 type User = {
@@ -586,7 +590,7 @@ const table = useReactTable({

 **Custom Faceted Values Hook Example:**

-From `apps/web/modules/bookings/hooks/useFacetedUniqueValues.ts`:
+From `apps/web/modules/bookings/hooks/useFacetedUniqueValues.ts` (hooks live in `apps/web/modules/`):

 ```tsx
 export function useFacetedUniqueValues() {
@@ -625,7 +629,7 @@ export function useFacetedUniqueValues() {
 **Usage in Table Configuration:**

 ```tsx
-// From packages/features/users/components/UserTable/UserListTable.tsx
+// From apps/web/modules/users/components/UserTable/UserListTable.tsx
 const table = useReactTable({
  // ... other options
  getFacetedUniqueValues: (_, columnId) => () => {
@@ -848,6 +852,10 @@ The DataTable system is designed for **server-side filtering, sorting, and pagin
 #### Basic Server-Side Pattern

 ```tsx
+// Hooks are imported from ~/data-table/hooks/ within apps/web
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
+
 // Get current table state for API calls
 const { limit, offset, sorting } = useDataTable();
 const columnFilters = useColumnFilters();
@@ -951,7 +959,7 @@ async getFilterConditions(): Promise<Prisma.Sql | null> {
 For complex cases where you need to manipulate filter data before sending to the backend, extract the logic into a separate hook:

 ```tsx
-// packages/features/insights/hooks/useInsightsRoutingParameters.ts
+// apps/web/modules/insights/hooks/useInsightsRoutingParameters.ts
 export function useInsightsRoutingParameters() {
  const { scope, selectedTeamId } = useInsightsOrgTeams();

@@ -982,10 +990,10 @@ export function useInsightsRoutingParameters() {

 #### Key Hooks for Server-Side Integration

- **`useColumnFilters()`** - Get applied filters for backend requests
- **`useDataTable()`** - Get `limit`, `offset`, `sorting` for pagination
- **`useFilterValue(columnId, schema)`** - Get specific filter value with validation
- **Custom parameter hooks** - Extract complex manipulation logic
+- **`useColumnFilters()`** - Get applied filters for backend requests (import from `~/data-table/hooks/useColumnFilters`)
+- **`useDataTable()`** - Get `limit`, `offset`, `sorting` for pagination (import from `~/data-table/hooks/useDataTable`)
+- **`useFilterValue(columnId, schema)`** - Get specific filter value with validation (import from `~/data-table/hooks/useFilterValue`)
+- **Custom parameter hooks** - Extract complex manipulation logic (place in `apps/web/modules/`)

 #### Server Utility Functions

@@ -1072,7 +1080,7 @@ const { ctaContainerRef } = useDataTable();

 ### Example 1: User Management Table

-From `packages/features/users/components/UserTable/UserListTable.tsx`:
+From `apps/web/modules/users/components/UserTable/UserListTable.tsx`:

 ```tsx
 <DataTableWrapper<UserTableUser>
@@ -1110,7 +1118,7 @@ From `packages/features/users/components/UserTable/UserListTable.tsx`:

 ### Example 2: Bookings List

-From `apps/web/modules/bookings/components/BookingsList.tsx`:
+From `apps/web/modules/bookings/components/BookingsList.tsx` (hooks/providers imported from `~/data-table/`):

 ```tsx
 <DataTableWrapper
@@ -1145,7 +1153,7 @@ From `apps/web/modules/bookings/components/BookingsList.tsx`:

 ### Example 3: Team Member List with Infinite Scroll

-From `packages/features/ee/teams/components/MemberList.tsx`:
+From `apps/web/modules/ee/teams/components/MemberList.tsx`:

 ```tsx
 <DataTableWrapper
@@ -1417,4 +1425,8 @@ const BOOKING_SEGMENTS: SystemFilterSegment[] = [
 ];
 ```

-This guide covers the complete DataTable system. For specific implementation details, refer to the source files in `packages/features/data-table/` and the usage examples throughout the Cal.com codebase.
+This guide covers the complete DataTable system. For specific implementation details, refer to:
+- **Types, utilities, serializers, server-side code**: `packages/features/data-table/lib/`
+- **Hooks, contexts, DataTableProvider**: `apps/web/modules/data-table/`
+- **UI components (DataTable, DataTableWrapper, filters, etc.)**: `apps/web/modules/data-table/components/`
+- **Usage examples**: Throughout `apps/web/modules/` (bookings, insights, users, etc.)
@@ -2,7 +2,3 @@ export * from "./lib/types";
 export * from "./lib/utils";
 export * from "./lib/serializers";
 export * from "./lib/separator";
-export * from "./DataTableProvider";
-export * from "./contexts";
-export * from "./hooks/useColumnResizing";
-export * from "./hooks";