feat: refactor table components to use new UI structure and implement DataTable features

This commit is contained in:
Marco Pedone 2026-03-19 10:24:32 +01:00
parent b274a729ee
commit 92beb2d356
18 changed files with 45 additions and 45 deletions

View file

@ -1,13 +1,13 @@
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import { Wrench } from "lucide-react"; import { Wrench } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { DataTable } from "~/components/custom_ui/data-table"; import { Button } from "~/components/ui/button";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header"; import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { import type {
PinnedFiltro, PinnedFiltro,
SearchFiltro, SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar"; } from "~/components/ui/dataTable-toolbar";
import { Button } from "~/components/ui/button";
import { StatusBadge } from "~/pages/area-riservata/admin/edit-annuncio/[id]"; import { StatusBadge } from "~/pages/area-riservata/admin/edit-annuncio/[id]";
import type { Annunci } from "~/schemas/public/Annunci"; import type { Annunci } from "~/schemas/public/Annunci";
export const AnnunciTable = ({ export const AnnunciTable = ({

View file

@ -1,9 +1,9 @@
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import { Cog } from "lucide-react"; 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 { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { SearchFiltro } from "~/components/ui/dataTable-toolbar";
import type { Banlist } from "~/schemas/public/Banlist"; import type { Banlist } from "~/schemas/public/Banlist";
export const BanlistTable = (props: { export const BanlistTable = (props: {

View file

@ -1,9 +1,9 @@
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import { Cog } from "lucide-react"; 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 { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { SearchFiltro } from "~/components/ui/dataTable-toolbar";
import type { Banners } from "~/schemas/public/Banners"; import type { Banners } from "~/schemas/public/Banners";
export const BannersTable = (props: { export const BannersTable = (props: {
data: Banners[]; data: Banners[];

View file

@ -1,10 +1,10 @@
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import { Cog } from "lucide-react"; 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 { Etichetta } from "~/components/etichette";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { SearchFiltro } from "~/components/ui/dataTable-toolbar";
import type { Etichette } from "~/schemas/public/Etichette"; import type { Etichette } from "~/schemas/public/Etichette";
export const EtichetteTable = (props: { export const EtichetteTable = (props: {
data: Etichette[]; data: Etichette[];

View file

@ -1,9 +1,9 @@
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import { Cog } from "lucide-react"; 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 { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { SearchFiltro } from "~/components/ui/dataTable-toolbar";
import type { Flags } from "~/schemas/public/Flags"; import type { Flags } from "~/schemas/public/Flags";
export const FlagsTable = (props: { export const FlagsTable = (props: {
data: Flags[]; data: Flags[];

View file

@ -6,13 +6,13 @@ import {
AdminWrapperOrdiniModal, AdminWrapperOrdiniModal,
UserOrdiniModal, UserOrdiniModal,
} from "~/components/area-riservata/ordini"; } from "~/components/area-riservata/ordini";
import { DataTable } from "~/components/custom_ui/data-table"; import { Button } from "~/components/ui/button";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header"; import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { import type {
PinnedFiltro, PinnedFiltro,
SearchFiltro, SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar"; } from "~/components/ui/dataTable-toolbar";
import { Button } from "~/components/ui/button";
import { formatCurrency } from "~/lib/utils"; import { formatCurrency } from "~/lib/utils";
import OrderTypeEnum from "~/schemas/public/OrderTypeEnum"; import OrderTypeEnum from "~/schemas/public/OrderTypeEnum";
import type { OrdiniOrdineId } from "~/schemas/public/Ordini"; import type { OrdiniOrdineId } from "~/schemas/public/Ordini";

View file

@ -1,13 +1,13 @@
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import { CircleSlash, Cog } from "lucide-react"; import { CircleSlash, Cog } from "lucide-react";
import { DataTable } from "~/components/custom_ui/data-table"; import { Badge } from "~/components/ui/badge";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header"; import { Button } from "~/components/ui/button";
import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { import type {
PinnedFiltro, PinnedFiltro,
SearchFiltro, SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar"; } from "~/components/ui/dataTable-toolbar";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { cn, formatCurrency } from "~/lib/utils"; import { cn, formatCurrency } from "~/lib/utils";
import OrderTypeEnum from "~/schemas/public/OrderTypeEnum"; import OrderTypeEnum from "~/schemas/public/OrderTypeEnum";
import type { Prezziario } from "~/schemas/public/Prezziario"; import type { Prezziario } from "~/schemas/public/Prezziario";

View file

@ -1,13 +1,13 @@
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import { ExternalLink } from "lucide-react"; import { ExternalLink } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { DataTable } from "~/components/custom_ui/data-table"; import { Button } from "~/components/ui/button";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header"; import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { import type {
PinnedFiltro, PinnedFiltro,
SearchFiltro, SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar"; } from "~/components/ui/dataTable-toolbar";
import { Button } from "~/components/ui/button";
import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum"; import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
import type { RichiesteData } from "~/server/controllers/servizio.controller"; import type { RichiesteData } from "~/server/controllers/servizio.controller";

View file

@ -3,9 +3,6 @@ import { ExternalLink, MoreHorizontal, Pen, Trash } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { type FormEvent, useEffect, useState } from "react"; import { type FormEvent, useEffect, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
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 { import {
AlertDialog, AlertDialog,
AlertDialogAction, AlertDialogAction,
@ -19,6 +16,9 @@ import {
} from "~/components/ui/alert-dialog"; } from "~/components/ui/alert-dialog";
import { Button, buttonVariants } from "~/components/ui/button"; import { Button, buttonVariants } from "~/components/ui/button";
import { Checkbox } from "~/components/ui/checkbox"; import { Checkbox } from "~/components/ui/checkbox";
import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { SearchFiltro } from "~/components/ui/dataTable-toolbar";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,

View file

@ -1,9 +1,9 @@
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import { Cog } from "lucide-react"; 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 { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { SearchFiltro } from "~/components/ui/dataTable-toolbar";
import type { TestiEStringhe } from "~/schemas/public/TestiEStringhe"; import type { TestiEStringhe } from "~/schemas/public/TestiEStringhe";
export const StringheTable = ({ export const StringheTable = ({

View file

@ -16,12 +16,12 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { DataTable } from "~/components/custom_ui/data-table"; import { DataTable } from "~/components/ui/data-table";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header"; import { DataTableColumnHeader } from "~/components/ui/dataTable-header";
import type { import type {
PinnedFiltro, PinnedFiltro,
SearchFiltro, SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar"; } from "~/components/ui/dataTable-toolbar";
import { UserAvatar } from "~/components/user_avatar"; import { UserAvatar } from "~/components/user_avatar";
import { cn } from "~/lib/utils"; import { cn } from "~/lib/utils";
import type { Etichette } from "~/schemas/public/Etichette"; import type { Etichette } from "~/schemas/public/Etichette";

View file

@ -16,12 +16,12 @@ import {
import { useVirtualizer } from "@tanstack/react-virtual"; import { useVirtualizer } from "@tanstack/react-virtual";
import type React from "react"; import type React from "react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { DataTablePagination } from "~/components/custom_ui/dataTable-pagination"; import { DataTablePagination } from "~/components/ui/dataTable-pagination";
import { import {
DataTableToolbar, DataTableToolbar,
type PinnedFiltro, type PinnedFiltro,
type SearchFiltro, type SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar"; } from "~/components/ui/dataTable-toolbar";
import { import {
Table, Table,
TableBody, TableBody,
@ -32,7 +32,7 @@ import {
} from "~/components/ui/table"; } from "~/components/ui/table";
import { cn } from "~/lib/utils"; import { cn } from "~/lib/utils";
import { DataTableProvider } from "~/providers/DataTableProvider"; import { DataTableProvider } from "~/providers/DataTableProvider";
import { ContextMenu, ContextMenuTrigger } from "../ui/context-menu"; import { ContextMenu, ContextMenuTrigger } from "./context-menu";
type DataTableProps<TData, TValue> = { type DataTableProps<TData, TValue> = {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];

View file

@ -79,7 +79,7 @@ export function DataTableFacetedFilter<TData, TValue>({
)} )}
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="start" className="w-[200px] p-0"> <PopoverContent align="start" className="w-50 p-0">
<Command> <Command>
<CommandInput placeholder={title} /> <CommandInput placeholder={title} />
<CommandList> <CommandList>

View file

@ -1,8 +1,8 @@
import { RotateCcw } from "lucide-react"; import { RotateCcw } from "lucide-react";
import type { ComponentType } from "react"; import type { ComponentType } from "react";
import { DataTableFacetedFilter } from "~/components/custom_ui/dataTable-FacetedFilter";
import { DataTableViewOptions } from "~/components/custom_ui/dataTable-ViewToggle";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { DataTableFacetedFilter } from "~/components/ui/dataTable-FacetedFilter";
import { DataTableViewOptions } from "~/components/ui/dataTable-ViewToggle";
import Input from "~/components/ui/input"; import Input from "~/components/ui/input";
import { useDataTable } from "~/providers/DataTableProvider"; import { useDataTable } from "~/providers/DataTableProvider";

View file

@ -3,7 +3,7 @@ import { createContext, type ReactNode, useContext } from "react";
import type { import type {
PinnedFiltro, PinnedFiltro,
SearchFiltro, SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar"; } from "~/components/ui/dataTable-toolbar";
type DataTableContextType<TData> = { type DataTableContextType<TData> = {
table: Table<TData>; table: Table<TData>;