feat: implement DataTableProvider for centralized data management and refactor related components

apps/infoalloggi/src/components/custom_ui/data-table.tsx

@@ -31,9 +31,10 @@ import {
 	TableRow,
 } from "~/components/ui/table";
 import { cn } from "~/lib/utils";
+import { DataTableProvider } from "~/providers/DataTableProvider";
 import { ContextMenu, ContextMenuTrigger } from "../ui/context-menu";
 
-type DataTableProps<TData, TValue> = {
+export type DataTableProps<TData, TValue> = {
 	columns: ColumnDef<TData, TValue>[];
 	data: TData[];
 	pinnedFiltri?: PinnedFiltro[];
@@ -143,104 +144,108 @@ export function DataTable<TData, TValue>({
 	}, [table, onTableInit]);
 
 	return (
-		<div className="space-y-4">
-			<DataTableToolbar
-				columns_titles={columns_titles}
-				globalFilter={globalFilter}
-				pinnedColumns={pinnedFiltri}
-				searchColumn={searchColumn}
-				table={table}
-			/>
-			<div
-				className="rounded-md border dark:border-muted-foreground/50"
-				ref={parentRef}
-			>
-				<Table>
-					<TableHeader>
-						{table.getHeaderGroups().map((headerGroup) => (
-							<TableRow key={headerGroup.id}>
-								{headerGroup.headers.map((header) => {
-									return (
-										<TableHead key={header.id}>
-											{header.isPlaceholder
-												? null
-												: flexRender(
-														header.column.columnDef.header,
-														header.getContext(),
-													)}
-										</TableHead>
-									);
-								})}
-							</TableRow>
-						))}
-					</TableHeader>
-					<TableBody className={tabClassName}>
-						{virtualizer.getVirtualItems().length ? (
-							virtualizer.getVirtualItems().map((virtualRow, index) => {
-								// biome-ignore lint/style/noNonNullAssertion: <always exists>
-								const row = rows[virtualRow.index]!;
+		<DataTableProvider
+			columns_titles={columns_titles}
+			hasSelectRow={hasSelectRow}
+			pinnedFiltri={pinnedFiltri}
+			searchColumn={searchColumn}
+			table={table}
+		>
+			<div className="space-y-4">
+				<DataTableToolbar />
+				<div
+					className="rounded-md border dark:border-muted-foreground/50"
+					ref={parentRef}
+				>
+					<Table>
+						<TableHeader>
+							{table.getHeaderGroups().map((headerGroup) => (
+								<TableRow key={headerGroup.id}>
+									{headerGroup.headers.map((header) => {
+										return (
+											<TableHead key={header.id}>
+												{header.isPlaceholder
+													? null
+													: flexRender(
+															header.column.columnDef.header,
+															header.getContext(),
+														)}
+											</TableHead>
+										);
+									})}
+								</TableRow>
+							))}
+						</TableHeader>
+						<TableBody className={tabClassName}>
+							{virtualizer.getVirtualItems().length ? (
+								virtualizer.getVirtualItems().map((virtualRow, index) => {
+									// biome-ignore lint/style/noNonNullAssertion: <always exists>
+									const row = rows[virtualRow.index]!;
 
-								const rowElem = (
-									<TableRow
-										className={cn(
-											rowOnClick && "cursor-pointer",
-											highlightedRow === row.id && "bg-neutral-100/50",
-											"group/row",
-										)}
-										data-row-id={row.id}
-										data-state={row.getIsSelected() && "selected"}
-										key={row.id}
-										onClick={
-											rowOnClick
-												? () => rowOnClick(row.original, row.id)
-												: undefined
-										}
-										style={{
-											height: `${virtualRow.size}px`,
-											transform: `translateY(${
-												virtualRow.start - index * virtualRow.size
-											}px)`,
-										}}
+									const rowElem = (
+										<TableRow
+											className={cn(
+												rowOnClick && "cursor-pointer",
+												highlightedRow === row.id && "bg-neutral-100/50",
+												"group/row",
+											)}
+											data-row-id={row.id}
+											data-state={row.getIsSelected() && "selected"}
+											key={row.id}
+											onClick={
+												rowOnClick
+													? () => rowOnClick(row.original, row.id)
+													: undefined
+											}
+											style={{
+												height: `${virtualRow.size}px`,
+												transform: `translateY(${
+													virtualRow.start - index * virtualRow.size
+												}px)`,
+											}}
+										>
+											{row.getVisibleCells().map((cell) => {
+												return (
+													<TableCell key={cell.id}>
+														{flexRender(
+															cell.column.columnDef.cell,
+															cell.getContext(),
+														)}
+													</TableCell>
+												);
+											})}
+										</TableRow>
+									);
+
+									if (withContextMenu && contextMenuContent) {
+										return (
+											<ContextMenu key={row.id}>
+												<ContextMenuTrigger asChild>
+													{rowElem}
+												</ContextMenuTrigger>
+
+												{contextMenuContent(row.original)}
+											</ContextMenu>
+										);
+									}
+									return rowElem;
+								})
+							) : (
+								<TableRow>
+									<TableCell
+										className="h-24 text-center"
+										colSpan={columns.length}
 									>
-										{row.getVisibleCells().map((cell) => {
-											return (
-												<TableCell key={cell.id}>
-													{flexRender(
-														cell.column.columnDef.cell,
-														cell.getContext(),
-													)}
-												</TableCell>
-											);
-										})}
-									</TableRow>
-								);
+										No results.
+									</TableCell>
+								</TableRow>
+							)}
+						</TableBody>
+					</Table>
+				</div>
 
-								if (withContextMenu && contextMenuContent) {
-									return (
-										<ContextMenu key={row.id}>
-											<ContextMenuTrigger asChild>{rowElem}</ContextMenuTrigger>
-
-											{contextMenuContent(row.original)}
-										</ContextMenu>
-									);
-								}
-								return rowElem;
-							})
-						) : (
-							<TableRow>
-								<TableCell
-									className="h-24 text-center"
-									colSpan={columns.length}
-								>
-									No results.
-								</TableCell>
-							</TableRow>
-						)}
-					</TableBody>
-				</Table>
+				<DataTablePagination />
 			</div>
-
-			<DataTablePagination hasSelectRow={hasSelectRow} table={table} />
-		</div>
+		</DataTableProvider>
 	);
 }

apps/infoalloggi/src/components/custom_ui/dataTable-ViewToggle.tsx

@@ -1,4 +1,3 @@
-import type { Table } from "@tanstack/react-table";
 import { Filter } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import {
@@ -9,16 +8,10 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
+import { useDataTable } from "~/providers/DataTableProvider";
 
-interface DataTableViewOptionsProps<TData> {
-	table: Table<TData>;
-	columns_titles: Record<string, string>;
-}
-
-export function DataTableViewOptions<TData>({
-	table,
-	columns_titles,
-}: DataTableViewOptionsProps<TData>) {
+export function DataTableViewOptions<TData>() {
+	const { table, columns_titles } = useDataTable<TData>();
 	const hidableColumns = table
 		.getAllColumns()
 		.filter(

apps/infoalloggi/src/components/custom_ui/dataTable-pagination.tsx

@@ -1,4 +1,3 @@
-import type { Table } from "@tanstack/react-table";
 import {
 	ChevronFirst,
 	ChevronLast,
@@ -13,16 +12,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "~/components/ui/select";
+import { useDataTable } from "~/providers/DataTableProvider";
 
-interface DataTablePaginationProps<TData> {
-	table: Table<TData>;
-	hasSelectRow?: boolean;
-}
-
-export function DataTablePagination<TData>({
-	table,
-	hasSelectRow,
-}: DataTablePaginationProps<TData>) {
+export function DataTablePagination<TData>() {
+	const { table, hasSelectRow } = useDataTable<TData>();
 	return (
 		<div className="flex items-center justify-between px-2">
 			<div className="flex-1 text-muted-foreground text-sm">
@@ -40,7 +33,7 @@ export function DataTablePagination<TData>({
 						}}
 						value={`${table.getState().pagination.pageSize}`}
 					>
-						<SelectTrigger className="h-8 w-[70px]">
+						<SelectTrigger className="h-8 w-17.5">
 							<SelectValue placeholder={table.getState().pagination.pageSize} />
 						</SelectTrigger>
 						<SelectContent side="top">

apps/infoalloggi/src/components/custom_ui/dataTable-toolbar.tsx

@@ -1,10 +1,10 @@
-import type { Table } from "@tanstack/react-table";
 import { RotateCcw } from "lucide-react";
 import type { ComponentType } from "react";
 import { DataTableFacetedFilter } from "~/components/custom_ui/dataTable-FacetedFilter";
 import { DataTableViewOptions } from "~/components/custom_ui/dataTable-ViewToggle";
 import Input from "~/components/custom_ui/input";
 import { Button } from "~/components/ui/button";
+import { useDataTable } from "~/providers/DataTableProvider";
 
 export type PinnedFiltro = {
 	title: string;
@@ -15,51 +15,22 @@ export type PinnedFiltro = {
 		icon?: ComponentType<{ className?: string }>;
 	}[];
 };
+/**
+ * columnName: null per ricerca globale
+ */
 export type SearchFiltro = {
-	columnName: string;
+	columnName: string | null;
 	placeholder: string;
 };
-export function DataTableToolbar<TData>(props: {
-	table: Table<TData>;
-	pinnedColumns?: PinnedFiltro[];
-	searchColumn?: SearchFiltro;
-	columns_titles: Record<string, string>;
-	globalFilter: string;
-}) {
-	const { table, pinnedColumns, searchColumn, columns_titles, globalFilter } =
-		props;
+export function DataTableToolbar<TData>() {
+	const { table, pinnedFiltri } = useDataTable<TData>();
 	const isFiltered = table.getState().columnFilters.length > 0;
 
 	return (
 		<div className="flex items-center justify-between">
 			<div className="flex flex-1 flex-wrap items-center gap-2">
-				{searchColumn &&
-					(searchColumn.columnName ? (
-						<Input
-							className="mt-0 h-8 w-37.5"
-							onChange={(event) =>
-								table
-									.getColumn(searchColumn.columnName)
-									?.setFilterValue(event.target.value)
-							}
-							placeholder={searchColumn.placeholder}
-							value={
-								(table
-									.getColumn(searchColumn.columnName)
-									?.getFilterValue() as string) ?? ""
-							}
-						/>
-					) : (
-						<Input
-							className="mt-0 h-8 w-37.5"
-							onChange={(event) =>
-								table.setGlobalFilter(String(event.target.value))
-							}
-							placeholder={searchColumn.placeholder}
-							value={globalFilter ?? ""}
-						/>
-					))}
-				{pinnedColumns?.map(
+				<SearchInput />
+				{pinnedFiltri?.map(
 					(column) =>
 						table.getColumn(column.columnName) && (
 							<DataTableFacetedFilter
@@ -82,7 +53,34 @@ export function DataTableToolbar<TData>(props: {
 					</Button>
 				)}
 			</div>
-			<DataTableViewOptions columns_titles={columns_titles} table={table} />
+			<DataTableViewOptions />
 		</div>
 	);
 }
+
+function SearchInput<TData>() {
+	const { table, searchColumn } = useDataTable<TData>();
+	const { globalFilter } = table.getState();
+	if (!searchColumn) return null;
+	const { columnName, placeholder } = searchColumn;
+	if (columnName) {
+		return (
+			<Input
+				className="mt-0 h-8 w-37.5"
+				onChange={(event) =>
+					table.getColumn(columnName)?.setFilterValue(event.target.value)
+				}
+				placeholder={placeholder}
+				value={(table.getColumn(columnName)?.getFilterValue() as string) ?? ""}
+			/>
+		);
+	}
+	return (
+		<Input
+			className="mt-0 h-8 w-37.5"
+			onChange={(event) => table.setGlobalFilter(String(event.target.value))}
+			placeholder={searchColumn.placeholder}
+			value={globalFilter ?? ""}
+		/>
+	);
+}

apps/infoalloggi/src/components/tables/users-table.tsx

@@ -248,8 +248,8 @@ export const UsersTable = (props: { data: UserWChatInfo[] }) => {
 		},
 	];
 	const searchFiltro: SearchFiltro = {
-		columnName: "username",
-		placeholder: "Filtra utenti...",
+		columnName: null,
+		placeholder: "Cerca...",
 	};
 	return (
 		<div className="mx-auto w-full px-2 py-10">

apps/infoalloggi/src/providers/DataTableProvider.tsx

@@ -0,0 +1,57 @@
+import type { Table } from "@tanstack/react-table";
+import { createContext, type ReactNode, useContext } from "react";
+import type {
+	PinnedFiltro,
+	SearchFiltro,
+} from "~/components/custom_ui/dataTable-toolbar";
+
+type DataTableContextType<TData> = {
+	table: Table<TData>;
+	searchColumn?: SearchFiltro;
+	columns_titles: Record<string, string>;
+	pinnedFiltri?: PinnedFiltro[];
+	hasSelectRow?: boolean;
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <needeed>
+const DataTableContext = createContext<DataTableContextType<any> | null>(null);
+
+export function DataTableProvider<TData>({
+	children,
+	table,
+	searchColumn,
+	columns_titles,
+	pinnedFiltri,
+	hasSelectRow,
+}: {
+	children: ReactNode;
+	table: Table<TData>;
+	searchColumn?: SearchFiltro;
+	columns_titles: Record<string, string>;
+	pinnedFiltri?: PinnedFiltro[];
+	hasSelectRow?: boolean;
+}) {
+	return (
+		<DataTableContext.Provider
+			value={{
+				table,
+				searchColumn,
+				columns_titles,
+				pinnedFiltri,
+				hasSelectRow,
+			}}
+		>
+			{children}
+		</DataTableContext.Provider>
+	);
+}
+
+export const useDataTable = <TData,>() => {
+	const value = useContext(
+		DataTableContext,
+	) as DataTableContextType<TData> | null;
+	if (!value) {
+		throw new Error("useDataTable must be used within a DataTableProvider");
+	}
+	return value;
+};