105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
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 { Button } from "~/components/ui/button";
|
|
import type { TestiEStringhe } from "~/schemas/public/TestiEStringhe";
|
|
|
|
export const StringheTable = ({
|
|
data,
|
|
setOpenEdit,
|
|
setEditData,
|
|
}: {
|
|
data: TestiEStringhe[];
|
|
setOpenEdit: (status: boolean) => void;
|
|
setEditData: (data: TestiEStringhe | null) => void;
|
|
}) => {
|
|
const tabledata = data.map((row) => {
|
|
return {
|
|
actions: "Azioni",
|
|
stinga_id: row.stinga_id,
|
|
stringa_value: row.stringa_value,
|
|
};
|
|
});
|
|
|
|
const columns_titles = {
|
|
actions: "Azioni",
|
|
stinga_id: "ID",
|
|
stringa_value: "Testo",
|
|
};
|
|
type Column = (typeof tabledata)[number];
|
|
|
|
const columns: ColumnDef<Column>[] = [
|
|
{
|
|
accessorKey: "stinga_id",
|
|
enableHiding: false,
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader
|
|
column={column}
|
|
title={columns_titles.stinga_id}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "stringa_value",
|
|
cell: ({ row }) => {
|
|
const data = row.original;
|
|
return <div className="max-w-xs truncate">{data.stringa_value}</div>;
|
|
},
|
|
enableHiding: false,
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader
|
|
column={column}
|
|
title={columns_titles.stringa_value}
|
|
/>
|
|
),
|
|
},
|
|
|
|
{
|
|
accessorKey: "actions",
|
|
cell: ({ row }) => {
|
|
const data = row.original;
|
|
return (
|
|
<Button
|
|
aria-label="Modifica Stringa"
|
|
onClick={() => {
|
|
setEditData({
|
|
stinga_id: data.stinga_id,
|
|
stringa_value: data.stringa_value,
|
|
});
|
|
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: "stinga_id",
|
|
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: "stinga_id" }]}
|
|
pinnedFiltri={undefined}
|
|
searchColumn={searchFiltro}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|