feat: refactor table components to use new UI structure and implement DataTable features
This commit is contained in:
parent
b274a729ee
commit
92beb2d356
18 changed files with 45 additions and 45 deletions
|
|
@ -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 = ({
|
||||||
|
|
|
||||||
|
|
@ -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: {
|
||||||
|
|
|
||||||
|
|
@ -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[];
|
||||||
|
|
|
||||||
|
|
@ -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[];
|
||||||
|
|
|
||||||
|
|
@ -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[];
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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 = ({
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
|
|
@ -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>[];
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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";
|
||||||
|
|
||||||
|
|
@ -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>;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue