111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
import {
|
|
DataTablaRowActionFunction,
|
|
DataTableRowActions,
|
|
DataTableRowDragHandleCell,
|
|
} from "@/components";
|
|
import { Checkbox } from "@/ui";
|
|
import { ColumnDef, Row, Table } from "@tanstack/react-table";
|
|
|
|
import { useMemo } from "react";
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
export function useDetailColumns<TData, TValue = unknown>(
|
|
columns: ColumnDef<TData>[],
|
|
options: {
|
|
enableDragHandleColumn?: boolean;
|
|
enableSelectionColumn?: boolean;
|
|
enableActionsColumn?: boolean;
|
|
rowActionFn?: DataTablaRowActionFunction<TData>;
|
|
} = {}
|
|
): ColumnDef<TData>[] {
|
|
const {
|
|
enableDragHandleColumn = false,
|
|
enableSelectionColumn = false,
|
|
enableActionsColumn = false,
|
|
rowActionFn = undefined,
|
|
} = options;
|
|
|
|
// const lastSelectedId = "";
|
|
|
|
return useMemo(() => {
|
|
if (enableSelectionColumn) {
|
|
columns.unshift({
|
|
id: "select",
|
|
header: ({ table }) => (
|
|
<Checkbox
|
|
id='select-all'
|
|
checked={
|
|
table.getIsAllPageRowsSelected() ||
|
|
(table.getIsSomePageRowsSelected() && "indeterminate")
|
|
}
|
|
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
|
aria-label='Seleccionar todo'
|
|
className='translate-y-[0px]'
|
|
/>
|
|
),
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
cell: ({ row, table }: { row: Row<TData>; table: Table<TData> }) => (
|
|
<Checkbox
|
|
id={`select-row-${row.id}`}
|
|
checked={row.getIsSelected()}
|
|
disabled={!row.getCanSelect()}
|
|
onCheckedChange={row.getToggleSelectedHandler()}
|
|
aria-label='Seleccionar fila'
|
|
className='mt-2'
|
|
/>
|
|
),
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
size: 2,
|
|
minSize: 2,
|
|
maxSize: 2,
|
|
});
|
|
}
|
|
|
|
if (enableDragHandleColumn) {
|
|
columns.unshift({
|
|
id: "row_drag_handle",
|
|
/*header: () => (
|
|
<UnfoldVertical aria-label='Mover fila' className='items-center justify-center w-4 h-4' />
|
|
),*/
|
|
header: () => null,
|
|
cell: (info) => <DataTableRowDragHandleCell rowId={info.row.id} />,
|
|
size: 2,
|
|
minSize: 2,
|
|
maxSize: 2,
|
|
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
});
|
|
}
|
|
|
|
if (enableActionsColumn) {
|
|
columns.push({
|
|
id: "row_actions",
|
|
/*header: () => (
|
|
<MoreHorizontalIcon
|
|
aria-label='Acciones'
|
|
className='items-center justify-center w-4 h-4'
|
|
/>
|
|
),*/
|
|
cell: (props) => {
|
|
return (
|
|
<div className='w-full mx-auto text-center'>
|
|
<DataTableRowActions rowContext={props} actions={rowActionFn} />
|
|
</div>
|
|
);
|
|
},
|
|
size: 4,
|
|
minSize: 4,
|
|
maxSize: 4,
|
|
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
});
|
|
}
|
|
|
|
return columns;
|
|
}, []);
|
|
}
|