50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
|
import { Checkbox } from "@repo/shadcn-ui/components/checkbox";
|
||
|
|
import type { Table as TableModel } from "@tanstack/react-table";
|
||
|
|
import { useId } from "react";
|
||
|
|
|
||
|
|
import { entityListLabels } from "../lib/entity-list";
|
||
|
|
|
||
|
|
import { FormDialog } from "./form-dialog";
|
||
|
|
|
||
|
|
export function EntityTableColumnsDialog<T>({
|
||
|
|
table,
|
||
|
|
locale,
|
||
|
|
open,
|
||
|
|
onOpenChange,
|
||
|
|
}: {
|
||
|
|
table: TableModel<T>;
|
||
|
|
locale: string;
|
||
|
|
open: boolean;
|
||
|
|
onOpenChange: (open: boolean) => void;
|
||
|
|
}) {
|
||
|
|
const id = useId();
|
||
|
|
const labels = entityListLabels(locale);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FormDialog
|
||
|
|
cancelLabel={locale.startsWith("en") ? "Close" : "Cerrar"}
|
||
|
|
onOpenChange={onOpenChange}
|
||
|
|
open={open}
|
||
|
|
title={labels.columns}
|
||
|
|
>
|
||
|
|
<div className="space-y-3">
|
||
|
|
{table.getAllLeafColumns().map((column) => (
|
||
|
|
<label
|
||
|
|
className="flex items-center gap-2"
|
||
|
|
htmlFor={`${id}-column-${column.id}`}
|
||
|
|
key={column.id}
|
||
|
|
>
|
||
|
|
<Checkbox
|
||
|
|
checked={column.getIsVisible()}
|
||
|
|
disabled={!column.getCanHide()}
|
||
|
|
id={`${id}-column-${column.id}`}
|
||
|
|
onCheckedChange={(checked) => column.toggleVisibility(checked === true)}
|
||
|
|
/>
|
||
|
|
{String(column.columnDef.header)}
|
||
|
|
</label>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</FormDialog>
|
||
|
|
);
|
||
|
|
}
|