temporarily clean up table

Author: izadoesdev

apps/dashboard/components/table/data-table.tsx

@@ -1,13 +1,10 @@
 import {
 	type ColumnDef,
 	getCoreRowModel,
-	getFilteredRowModel,
-	getSortedRowModel,
-	type SortingState,
 	useReactTable,
 } from '@tanstack/react-table';
 import type React from 'react';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
@@ -50,7 +47,6 @@ interface DataTableProps<TData extends { name: string | number }, TValue> {
 		index: number
 	) => React.ReactNode;
 	expandable?: boolean;
-	showSearch?: boolean;
 }
 
 const EnhancedSkeleton = ({ minHeight }: { minHeight: string | number }) => (
@@ -100,11 +96,8 @@ export function DataTable<TData extends { name: string | number }, TValue>({
 	expandable = false,
 	onAddFilter,
 	onRowAction,
-	showSearch = true,
 }: DataTableProps<TData, TValue>) {
 	const [activeTab, setActiveTab] = useState(tabs?.[0]?.id || '');
-	const [sorting, setSorting] = useState<SortingState>([]);
-	const [globalFilter, setGlobalFilter] = useState('');
 
 	const { fullScreen, setFullScreen, hasMounted, modalRef } = useFullScreen();
 
@@ -115,30 +108,13 @@ export function DataTable<TData extends { name: string | number }, TValue>({
 	const table = useReactTable({
 		data: tableData,
 		columns: tableColumns,
-		enableSorting: true,
-		getRowId: (row, index) => {
-			if ((row as any)._uniqueKey) {
-				return (row as any)._uniqueKey;
-			}
-			return activeTab ? `${activeTab}-${index}` : `row-${index}`;
-		},
-		state: {
-			sorting,
-			globalFilter,
-		},
-		onSortingChange: setSorting,
-		onGlobalFilterChange: setGlobalFilter,
+		getRowId: (_row, index) => `${activeTab || 'row'}-${index}`,
 		getCoreRowModel: getCoreRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		globalFilterFn: 'includesString',
 	});
 
 	const handleTabChange = (tabId: string) => {
 		if (tabId === activeTab) return;
 		setActiveTab(tabId);
-		setSorting([]);
-		setGlobalFilter('');
 	};
 
 	if (isLoading) {
@@ -186,9 +162,6 @@ export function DataTable<TData extends { name: string | number }, TValue>({
 				<TableToolbar
 					description={description}
 					onFullScreenToggle={() => setFullScreen(true)}
-					onSearchChange={setGlobalFilter}
-					searchValue={globalFilter}
-					showSearch={showSearch}
 					title={title}
 				/>
 
@@ -246,10 +219,8 @@ export function DataTable<TData extends { name: string | number }, TValue>({
 								onClose={() => setFullScreen(false)}
 								onRowAction={onRowAction}
 								onRowClick={onRowClick}
-								onSearchChange={setGlobalFilter}
 								onTabChange={handleTabChange}
 								renderSubRow={renderSubRow}
-								searchValue={globalFilter}
 								tabs={tabs}
 								title={title}
 							/>

apps/dashboard/components/table/fullscreen-modal.tsx

@@ -1,14 +1,9 @@
-import { MagnifyingGlassIcon, XIcon } from '@phosphor-icons/react';
+import { XIcon } from '@phosphor-icons/react';
 import {
 	type ColumnDef,
 	getCoreRowModel,
-	getFilteredRowModel,
-	getSortedRowModel,
-	type SortingState,
 	useReactTable,
 } from '@tanstack/react-table';
-import { useMemo, useState } from 'react';
-import { Input } from '@/components/ui/input';
 import { TableContent } from './table-content';
 import { TableTabs } from './table-tabs';
 
@@ -39,8 +34,6 @@ interface FullScreenModalProps<TData extends { name: string | number }> {
 	onAddFilter?: (field: string, value: string, tableTitle?: string) => void;
 	onRowAction?: (row: TData) => void;
 	onRowClick?: (field: string, value: string | number) => void;
-	searchValue?: string;
-	onSearchChange?: (value: string) => void;
 }
 
 export function FullScreenModal<TData extends { name: string | number }>({
@@ -52,66 +45,27 @@ export function FullScreenModal<TData extends { name: string | number }>({
 	tabs,
 	activeTab,
 	onTabChange,
-	searchValue,
-	onSearchChange,
 	expandable = false,
 	getSubRows,
 	renderSubRow,
 	onAddFilter,
 	onRowAction,
 	onRowClick,
 }: FullScreenModalProps<TData>) {
-	const [sorting, setSorting] = useState<SortingState>([]);
-	const [globalFilter, setGlobalFilter] = useState(searchValue || '');
-
-	// Update global filter when searchValue prop changes
-	useMemo(() => {
-		setGlobalFilter(searchValue || '');
-	}, [searchValue]);
 
 	const currentTabData = tabs?.find((tab) => tab.id === activeTab);
-	const tableData = useMemo(
-		() => currentTabData?.data || data || [],
-		[currentTabData?.data, data]
-	);
-	const tableColumns = useMemo(
-		() => currentTabData?.columns || columns || [],
-		[currentTabData?.columns, columns]
-	);
+	const tableData = currentTabData?.data || data || [];
+	const tableColumns = currentTabData?.columns || columns || [];
 
 	const table = useReactTable({
 		data: tableData,
 		columns: tableColumns,
-		enableSorting: true,
-		getRowId: (row, index) => {
-			if ((row as any)._uniqueKey) {
-				return (row as any)._uniqueKey;
-			}
-			return activeTab ? `${activeTab}-${index}` : `row-${index}`;
-		},
-		state: {
-			sorting,
-			globalFilter,
-		},
-		onSortingChange: setSorting,
-		onGlobalFilterChange: (value) => {
-			setGlobalFilter(value);
-			onSearchChange?.(value);
-		},
+		getRowId: (_row, index) => `${activeTab || 'row'}-${index}`,
 		getCoreRowModel: getCoreRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		globalFilterFn: 'includesString',
 	});
 
 	const handleTabChange = (tabId: string) => {
-		if (tabId === activeTab) {
-			return;
-		}
-
-		setSorting([]);
-		setGlobalFilter('');
-		onSearchChange?.('');
+		if (tabId === activeTab) return;
 		onTabChange?.(tabId);
 	};
 	return (
@@ -130,21 +84,6 @@ export function FullScreenModal<TData extends { name: string | number }>({
 					)}
 				</div>
 				<div className="flex items-center gap-2">
-					{onSearchChange && (
-						<div className="relative">
-							<MagnifyingGlassIcon className="-translate-y-1/2 absolute top-1/2 left-2.5 h-4 w-4 text-muted-foreground" />
-							<Input
-								className="h-8 w-64 pl-8 text-sm"
-								onChange={(e) => {
-									setGlobalFilter(e.target.value);
-									onSearchChange(e.target.value);
-								}}
-								placeholder="Search..."
-								type="search"
-								value={globalFilter}
-							/>
-						</div>
-					)}
 					<button
 						aria-label="Close full screen"
 						className="ml-2 flex items-center justify-center rounded bg-sidebar-accent/60 p-2 text-sidebar-foreground transition-colors hover:bg-sidebar-accent"
@@ -162,7 +101,7 @@ export function FullScreenModal<TData extends { name: string | number }>({
 			{tabs && tabs.length > 1 && (
 				<div className="mt-2">
 					<TableTabs
-						activeTab={activeTab || ''}
+						activeTab={activeTab ?? ''}
 						onTabChange={handleTabChange}
 						tabs={tabs}
 					/>

apps/dashboard/components/table/rows/page-time-row.tsx

@@ -35,7 +35,6 @@ export function createPageTimeColumns(): ColumnDef<PageTimeEntry>[] {
 			id: 'name',
 			accessorKey: 'name',
 			header: 'Page',
-			enableSorting: true,
 			cell: (info: CellContext<PageTimeEntry, any>) => {
 				const name = (info.getValue() as string) || '';
 				return (
@@ -49,7 +48,6 @@ export function createPageTimeColumns(): ColumnDef<PageTimeEntry>[] {
 			id: 'median_time_on_page',
 			accessorKey: 'median_time_on_page',
 			header: 'Avg Time',
-			enableSorting: true,
 			cell: (info: CellContext<PageTimeEntry, any>) => {
 				const seconds = (info.getValue() as number) ?? 0;
 				return (
@@ -65,7 +63,6 @@ export function createPageTimeColumns(): ColumnDef<PageTimeEntry>[] {
 			id: 'sessions_with_time',
 			accessorKey: 'sessions_with_time',
 			header: 'Sessions',
-			enableSorting: true,
 			cell: (info: CellContext<PageTimeEntry, any>) => (
 				<span className="font-medium">{formatNumber(info.getValue())}</span>
 			),
@@ -74,7 +71,6 @@ export function createPageTimeColumns(): ColumnDef<PageTimeEntry>[] {
 			id: 'visitors',
 			accessorKey: 'visitors',
 			header: 'Visitors',
-			enableSorting: true,
 			cell: (info: CellContext<PageTimeEntry, any>) => (
 				<span className="font-medium">{formatNumber(info.getValue())}</span>
 			),
@@ -83,7 +79,6 @@ export function createPageTimeColumns(): ColumnDef<PageTimeEntry>[] {
 			id: 'percentage',
 			accessorKey: 'percentage',
 			header: 'Share',
-			enableSorting: true,
 			cell: (info: CellContext<PageTimeEntry, any>) => {
 				const percentage = info.getValue() as number;
 				return <PercentageBadge percentage={percentage} />;