infoalloggi-monorepo/apps/infoalloggi/src/components/tables/etichette.tsx

import type { ColumnDef } from "@tanstack/react-table";
import { Cog } from "lucide-react";
import { DataTable } from "~/components/custom_ui/data-table";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header";
import type { SearchFiltro } from "~/components/custom_ui/dataTable-toolbar";
import { Etichetta } from "~/components/etichette";
import { Button } from "~/components/ui/button";
import type { Etichette } from "~/schemas/public/Etichette";
export const EtichetteTable = (props: {
	data: Etichette[];
	setOpenEdit: (status: boolean) => void;
	setEditData: (data: Etichette | null) => void;
}) => {
	const { data, setOpenEdit, setEditData } = props;

	const tabledata = data.map((row) => {
		return {
			actions: "Azioni",
			colore: row.color_hex,
			id: row.id_etichetta,
			title: row.title,
		};
	});

	const columns_titles = {
		actions: "Azioni",
		etichetta: "Etichetta",
		id: "Id",
	};
	type Column = (typeof tabledata)[number];

	const columns: ColumnDef<Column>[] = [
		{
			accessorKey: "id",
			enableHiding: false,
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.id} />
			),
		},
		{
			accessorKey: "title",
			cell: ({ row }) => {
				const data = row.original;
				return (
					<Etichetta
						className="text-base"
						color_hex={data.colore}
						title={data.title}
					/>
				);
			},

			enableHiding: false,
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.etichetta}
				/>
			),
		},

		{
			accessorKey: "actions",
			cell: ({ row }) => {
				const data = row.original;
				return (
					<Button
						aria-label="Modifica Etichetta"
						onClick={() => {
							setEditData({
								color_hex: data.colore,
								id_etichetta: data.id,
								title: data.title,
							});
							setOpenEdit(true);
						}}
						variant="outline"
					>
						<div className="flex items-center gap-2">
							<Cog /> Modifica
						</div>
					</Button>
				);
			},
			enableHiding: false,
			enableSorting: false,
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.actions} />
			),
		},
	];

	const searchFiltro: SearchFiltro = {
		columnName: "title",
		placeholder: "Filtra codice...",
	};
	return (
		<div className="mx-auto w-full px-2 py-10">
			<DataTable
				columns={columns}
				columns_titles={columns_titles}
				data={tabledata}
				defaultSort={[{ desc: true, id: "id" }]}
				pinnedFiltri={undefined}
				searchColumn={searchFiltro}
			/>
		</div>
	);
};