Presupuestador_web/client/src/app/quotes/hooks/useDetailColumns.tsx

99 lines
2.8 KiB
TypeScript
Raw Normal View History

2024-06-29 19:39:25 +00:00
import {
DataTablaRowActionFunction,
DataTableRowActions,
DataTableRowDragHandleCell,
} from "@/components";
import { Checkbox } from "@/ui";
import { ColumnDef, Row, Table } from "@tanstack/react-table";
import { useMemo } from "react";
2024-07-11 11:08:53 +00:00
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2024-08-12 11:26:10 +00:00
export function useDetailColumns<TData = unknown, TValue = unknown>(
2024-06-29 19:39:25 +00:00
columns: ColumnDef<TData>[],
options: {
enableDragHandleColumn?: boolean;
enableSelectionColumn?: boolean;
enableActionsColumn?: boolean;
2024-07-11 11:08:53 +00:00
rowActionFn?: DataTablaRowActionFunction<TData>;
2024-06-29 19:39:25 +00:00
} = {}
2024-08-12 11:26:10 +00:00
): ColumnDef<TData, TValue>[] {
2024-06-29 19:39:25 +00:00
const {
enableDragHandleColumn = false,
enableSelectionColumn = false,
enableActionsColumn = false,
rowActionFn = undefined,
} = options;
// const lastSelectedId = "";
return useMemo(() => {
2024-08-25 12:14:21 +00:00
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} />,
enableSorting: false,
enableHiding: false,
2024-08-25 20:06:24 +00:00
size: 40,
2024-08-25 12:14:21 +00:00
});
}
2024-06-29 19:39:25 +00:00
if (enableSelectionColumn) {
columns.unshift({
id: "select",
2024-07-11 16:40:46 +00:00
header: ({ table }) => (
2024-06-29 19:39:25 +00:00
<Checkbox
id='select-all'
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && "indeterminate")
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label='Seleccionar todo'
2024-07-10 18:54:33 +00:00
className='translate-y-[0px]'
2024-06-29 19:39:25 +00:00
/>
2024-07-11 16:40:46 +00:00
),
2024-06-29 19:39:25 +00:00
// 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'
2024-07-10 18:54:33 +00:00
className='mt-2'
2024-06-29 19:39:25 +00:00
/>
),
enableSorting: false,
enableHiding: false,
2024-08-25 20:06:24 +00:00
size: 40,
2024-06-29 19:39:25 +00:00
});
}
if (enableActionsColumn) {
columns.push({
id: "row_actions",
2024-07-11 11:08:53 +00:00
/*header: () => (
2024-06-29 19:39:25 +00:00
<MoreHorizontalIcon
aria-label='Acciones'
className='items-center justify-center w-4 h-4'
/>
2024-07-11 11:08:53 +00:00
),*/
2024-06-29 19:39:25 +00:00
cell: (props) => {
2024-08-25 20:06:24 +00:00
return <DataTableRowActions rowContext={props} actions={rowActionFn} />;
2024-06-29 19:39:25 +00:00
},
enableSorting: false,
enableHiding: false,
2024-08-25 20:06:24 +00:00
size: 48,
2024-06-29 19:39:25 +00:00
});
}
return columns;
}, [enableActionsColumn, enableDragHandleColumn, enableSelectionColumn]);
2024-06-29 19:39:25 +00:00
}