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,14 +144,15 @@ export function DataTable<TData, TValue>({
 	}, [table, onTableInit]);
 
 	return (
-		<div className="space-y-4">
+		<DataTableProvider
-			<DataTableToolbar
 			columns_titles={columns_titles}
-				globalFilter={globalFilter}
+			hasSelectRow={hasSelectRow}
-				pinnedColumns={pinnedFiltri}
+			pinnedFiltri={pinnedFiltri}
 			searchColumn={searchColumn}
 			table={table}
-			/>
+		>
+			<div className="space-y-4">
+				<DataTableToolbar />
 				<div
 					className="rounded-md border dark:border-muted-foreground/50"
 					ref={parentRef}
@@ -218,7 +220,9 @@ export function DataTable<TData, TValue>({
 									if (withContextMenu && contextMenuContent) {
 										return (
 											<ContextMenu key={row.id}>
-											<ContextMenuTrigger asChild>{rowElem}</ContextMenuTrigger>
+												<ContextMenuTrigger asChild>
+													{rowElem}
+												</ContextMenuTrigger>
 
 												{contextMenuContent(row.original)}
 											</ContextMenu>
@@ -240,7 +244,8 @@ export function DataTable<TData, TValue>({
 					</Table>
 				</div>
 
-			<DataTablePagination hasSelectRow={hasSelectRow} table={table} />
+				<DataTablePagination />
 			</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> {
+export function DataTableViewOptions<TData>() {
-	table: Table<TData>;
+	const { table, columns_titles } = useDataTable<TData>();
-	columns_titles: Record<string, string>;
-}
-
-export function DataTableViewOptions<TData>({
-	table,
-	columns_titles,
-}: DataTableViewOptionsProps<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> {
+export function DataTablePagination<TData>() {
-	table: Table<TData>;
+	const { table, hasSelectRow } = useDataTable<TData>();
-	hasSelectRow?: boolean;
-}
-
-export function DataTablePagination<TData>({
-	table,
-	hasSelectRow,
-}: DataTablePaginationProps<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: {
+export function DataTableToolbar<TData>() {
-	table: Table<TData>;
+	const { table, pinnedFiltri } = useDataTable<TData>();
-	pinnedColumns?: PinnedFiltro[];
-	searchColumn?: SearchFiltro;
-	columns_titles: Record<string, string>;
-	globalFilter: string;
-}) {
-	const { table, pinnedColumns, searchColumn, columns_titles, globalFilter } =
-		props;
 	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 &&
+				<SearchInput />
-					(searchColumn.columnName ? (
+				{pinnedFiltri?.map(
-						<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(
 					(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",
+		columnName: null,
-		placeholder: "Filtra utenti...",
+		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;
+};