From 1c976ecda18b2afb632e9943b24ba56cbd021353 Mon Sep 17 00:00:00 2001 From: andres Date: Sun, 14 Jul 2024 16:59:11 +0200 Subject: [PATCH] add column ordering --- frontend/bun.lockb | Bin 144366 -> 146212 bytes frontend/package.json | 3 + .../db-table-view/columns-dropdown.tsx | 108 +++++++++++++++--- .../src/components/db-table-view/columns.tsx | 1 + .../db/$dbName/tables/$tableName/data.tsx | 19 ++- 5 files changed, 112 insertions(+), 19 deletions(-) diff --git a/frontend/bun.lockb b/frontend/bun.lockb index 7b36f4315095437329cbde99c6e6cd2b6e5c65a9..eccbf477faa3502328f978a3b57af0e09b4e97fc 100755 GIT binary patch delta 25039 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 dru3aFuJ|Bva|gS;sr*iM!MdrkgQ({ table, + columnOrder, + setColumnOrder, }: { table: Table; + columnOrder: string[]; + setColumnOrder: Dispatch>; }) { + const sensors = useSensors( + useSensor(PointerSensor), + useSensor(KeyboardSensor, { + coordinateGetter: sortableKeyboardCoordinates, + }), + ); return ( @@ -20,22 +49,69 @@ export function ColumnsDropdown({ - {table - .getAllColumns() - .filter((column) => column.getCanHide()) - .map((column) => { - return ( - e.preventDefault()} - checked={column.getIsVisible()} - onCheckedChange={column.toggleVisibility} - > - {column.id} - - ); - })} + + + {columnOrder.map((columnId) => { + const column = table.getColumn(columnId); + if (!column) return null; + return ; + })} + + ); + function handleDragEnd(event: DragEndEvent) { + const { active, over } = event; + if (active.id !== over?.id) { + setColumnOrder((items) => { + const oldIndex = items.findIndex((id) => id === active.id); + const newIndex = items.findIndex((id) => id === over.id); + + return arrayMove(items, oldIndex, newIndex); + }); + } + } } + +const SortableItem = ({ column }: { column: Column }) => { + const { + attributes, + listeners, + setNodeRef, + setActivatorNodeRef, + transform, + transition, + } = useSortable({ id: column.id }); + + const style = { + transform: CSS.Transform.toString(transform), + transition, + }; + + return ( + e.preventDefault()} + checked={column.getIsVisible()} + onCheckedChange={column.toggleVisibility} + > +
+ {column.id} + +
+
+ ); +}; diff --git a/frontend/src/components/db-table-view/columns.tsx b/frontend/src/components/db-table-view/columns.tsx index 8a7ef85..abd96ff 100644 --- a/frontend/src/components/db-table-view/columns.tsx +++ b/frontend/src/components/db-table-view/columns.tsx @@ -20,6 +20,7 @@ const buildColumns = ({ accessorKey: column_name, title: column_name, size: 300, + id: column_name, header: () => { return (
( @@ -64,7 +65,13 @@ function Component() { const sortingState = useMemo(() => sortByToState(filters), [filters]); const columns = useColumns({ dbName, tableName }); - + const [columnOrder, setColumnOrder] = useState(() => + columns.map((c) => c.id ?? ""), + ); + useEffect(() => { + if (columnOrder.length !== 0) return; + setColumnOrder(columns.map((c) => c.id ?? "")); + }, [columns, columnOrder.length]); const { data, refetch } = useTableDataQuery({ whereQuery, tableName, @@ -115,12 +122,14 @@ function Component() { getCoreRowModel: getCoreRowModel(), manualPagination: true, manualSorting: true, + onColumnOrderChange: setColumnOrder, onColumnSizingChange: setColumnSizing, onColumnVisibilityChange: setColumnVisibility, onPaginationChange: handlePaginationChange, onSortingChange: handleSortingChange, rowCount: data?.count ?? 0, state: { + columnOrder, sorting: sortingState, columnSizing: columnSizing, columnVisibility, @@ -136,7 +145,11 @@ function Component() { {tableName} - +

Rows: {data?.count}