1.1.1 - ability to drag columns and rows

OvidijusParsiunas · Jan 2, 2024 · 4aad090 · 4aad090
1 parent 2e69b17
commit 4aad090
Show file tree

Hide file tree

Showing 15 changed files with 209 additions and 109 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,14 @@
 - Overflow handling
 - Everything is customizable!
 
+### :tada: Latest update
+
+Table [columns](https://activetable.io/docs/column#dragColumns) and [rows](https://activetable.io/docs/column#dragRows) can now be dragged using your mouse:
+
+<p align="center">
+    <img width="700" src="https://github.com/OvidijusParsiunas/active-table/assets/18709577/22095883-8beb-4be6-a75a-61beab3d6ea7" alt="Drag Feature">
+</p>
+
 ### :computer: Getting started
 
 ```
@@ -47,18 +55,6 @@ Check out the live codepen examples for your [UI framework/library](https://acti
 | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | <a href="https://codesandbox.io/s/active-table-react-cstm7k?file=/src/App.tsx" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/reactLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vue2-32f04e?file=/src/App.vue" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vueLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vue3-z729vs?file=/src/App.vue" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vueLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-angular-9v8nfe?file=/src/app/app.component.html" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/angularLogo.png" width="66"/></a> | <a href="https://stackblitz.com/edit/vitejs-vite-cm6j23?file=src%2FApp.svelte" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/svelteLogo.png" width="45"/></a> | <div align="center"><a href="https://codesandbox.io/p/sandbox/active-table-sveltekit-forked-fy9wlf" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/svelteLogo.png" width="45"/></a></div> | <a href="https://codesandbox.io/p/devbox/deep-chat-solidjs-forked-ngxphz" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/solidLogo.png" width="60"/></a> | <a href="https://codesandbox.io/p/sandbox/deep-chat-nextjs-9pv25f?file=%2Fpackage.json%3A6%2C19&selection=%5B%7B%22endColumn%22%3A30%2C%22endLineNumber%22%3A28%2C%22startColumn%22%3A30%2C%22startLineNumber%22%3A28%7D%5D" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/nextLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vanillajs-62yrrj?file=/index.html" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vanillaJSLogo.png" width="60"/></a> |
 
-### :dart: Roadmap
-
-- [x] Support csv, xls, xlsx, ods, txt files
-- [x] Data filtering
-- [ ] Column visibility
-- [ ] Move row/column by dragging
-- [ ] Procedural pagination rendering
-- [ ] Pick mode
-- [ ] Undo/Redo
-- [ ] Code refactoring
-- [ ] Unit tests
-
 ## :heart: Contributions
 
 Open source is built by the community for the community. All contributions to this project are welcome!

diff --git a/component/README.md b/component/README.md
@@ -49,18 +49,6 @@ Check out the live codepen examples for your [UI framework/library](https://acti
 | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | <a href="https://codesandbox.io/s/active-table-react-cstm7k?file=/src/App.tsx" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/reactLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vue2-32f04e?file=/src/App.vue" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vueLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vue3-z729vs?file=/src/App.vue" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vueLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-angular-9v8nfe?file=/src/app/app.component.html" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/angularLogo.png" width="66"/></a> | <a href="https://stackblitz.com/edit/vitejs-vite-cm6j23?file=src%2FApp.svelte" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/svelteLogo.png" width="45"/></a> | <div align="center"><a href="https://codesandbox.io/p/sandbox/active-table-sveltekit-forked-fy9wlf" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/svelteLogo.png" width="45"/></a></div> | <a href="https://codesandbox.io/p/devbox/deep-chat-solidjs-forked-ngxphz" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/solidLogo.png" width="60"/></a> | <a href="https://codesandbox.io/p/sandbox/deep-chat-nextjs-9pv25f?file=%2Fpackage.json%3A6%2C19&selection=%5B%7B%22endColumn%22%3A30%2C%22endLineNumber%22%3A28%2C%22startColumn%22%3A30%2C%22startLineNumber%22%3A28%7D%5D" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/nextLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vanillajs-62yrrj?file=/index.html" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vanillaJSLogo.png" width="60"/></a> |
 
-### :dart: Roadmap
-
-- [x] Support csv, xls, xlsx, ods, txt files
-- [x] Data filtering
-- [ ] Column visibility
-- [ ] Move row/column by dragging
-- [ ] Procedural pagination rendering
-- [ ] Pick mode
-- [ ] Undo/Redo
-- [ ] Code refactoring
-- [ ] Unit tests
-
 ## :construction_worker: Local setup
 
 ```

diff --git a/component/package-lock.json b/component/package-lock.json
diff --git a/component/package.json b/component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "active-table",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Framework agnostic table component for editable data experience",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",

diff --git a/component/src/activeTable.ts b/component/src/activeTable.ts
@@ -170,11 +170,17 @@ export class ActiveTable extends LitElement {
   @property({type: Object})
   rowHoverStyles?: RowHoverStyles;
 
-  @property({type: Boolean})
-  dragRow?: boolean = false;
+  @property({
+    type: Boolean,
+    converter: LITElementTypeConverters.convertToBoolean,
+  })
+  dragRows = true;
 
-  @property({type: Boolean})
-  dragColumn?: boolean = false;
+  @property({
+    type: Boolean,
+    converter: LITElementTypeConverters.convertToBoolean,
+  })
+  dragColumns = true;
 
   // when true - the table automatically holds an unlimited size via table-controlled-width class (dynamic table)
   // this property is not used internally and is being set/used in tableDimensions as it is overriden when resizing

diff --git a/component/src/utils/moveStructure/drag/dragColumn.ts b/component/src/utils/moveStructure/drag/dragColumn.ts
@@ -86,7 +86,7 @@ export class DragColumn extends Drag {
   }
 
   public static applyEventsToElement(at: ActiveTable, draggableElement: HTMLElement, cellElement: HTMLElement) {
-    if (at.dragColumn === false) return;
+    if (at.dragColumns === false) return;
     draggableElement.onmousedown = () => {
       DragColumn.IS_MOUSE_DOWN = true;
     };
@@ -120,7 +120,7 @@ export class DragColumn extends Drag {
   }
 
   public static windowDrag(at: ActiveTable, dragCell: HTMLElement, event: MouseEvent) {
-    if (at.dragColumn === false) return;
+    if (at.dragColumns === false) return;
     const minimumLeft = Math.max(DragColumn.MIN_LEFT, DragColumn.ACTIVE_CELL_LEFT_PX + event.movementX);
     const newDimension = Math.min(minimumLeft, DragColumn.MAX_LEFT);
     DragColumn.ACTIVE_CELL_LEFT_PX = newDimension;
@@ -134,7 +134,7 @@ export class DragColumn extends Drag {
 
   public static windowMouseUp(at: ActiveTable) {
     DragColumn.IS_MOUSE_DOWN = false;
-    if (at.dragColumn === false || !at._focusedElements.colDragEl) return;
+    if (at.dragColumns === false || !at._focusedElements.colDragEl) return;
     DragColumn.setHeaderElementsToDefault(at._focusedElements.colDragEl);
     delete at._focusedElements.colDragEl;
     DragColumn.INITIALISING_DRAG_PX = 0;

diff --git a/component/src/utils/moveStructure/drag/dragRow.ts b/component/src/utils/moveStructure/drag/dragRow.ts
@@ -201,6 +201,6 @@ export class DragRow extends Drag {
 
   // row dragging is cumbersome when filter/pagination enabled as some rows are hidden
   private static isDisabled(at: ActiveTable) {
-    return at.dragRow === false || at.filter || at.pagination;
+    return at.dragRows === false || at.filter || at.pagination;
   }
 }
diff --git a/other-packages/react/README.md b/other-packages/react/README.md
@@ -23,6 +23,14 @@ This package is an [Active Table](https://www.npmjs.com/package/active-table) co
 - Overflow handling
 - Everything is customizable!
 
+### :tada: Latest update
+
+Table [columns](https://activetable.io/docs/column#dragColumns) and [rows](https://activetable.io/docs/column#dragRows) can now be dragged using your mouse:
+
+<p align="center">
+    <img width="700" src="https://github.com/OvidijusParsiunas/active-table/assets/18709577/22095883-8beb-4be6-a75a-61beab3d6ea7" alt="Drag Feature">
+</p>
+
 ### :computer: Getting started
 
 ```
@@ -43,18 +51,6 @@ Check out the live codepen examples for your [UI framework/library](https://acti
 | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | <a href="https://codesandbox.io/s/active-table-react-cstm7k?file=/src/App.tsx" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/reactLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vue2-32f04e?file=/src/App.vue" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vueLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vue3-z729vs?file=/src/App.vue" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vueLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-angular-9v8nfe?file=/src/app/app.component.html" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/angularLogo.png" width="66"/></a> | <a href="https://stackblitz.com/edit/vitejs-vite-cm6j23?file=src%2FApp.svelte" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/svelteLogo.png" width="45"/></a> | <div align="center"><a href="https://codesandbox.io/p/sandbox/active-table-sveltekit-forked-fy9wlf" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/svelteLogo.png" width="45"/></a></div> | <a href="https://codesandbox.io/p/devbox/deep-chat-solidjs-forked-ngxphz" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/solidLogo.png" width="60"/></a> | <a href="https://codesandbox.io/p/sandbox/deep-chat-nextjs-9pv25f?file=%2Fpackage.json%3A6%2C19&selection=%5B%7B%22endColumn%22%3A30%2C%22endLineNumber%22%3A28%2C%22startColumn%22%3A30%2C%22startLineNumber%22%3A28%7D%5D" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/nextLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vanillajs-62yrrj?file=/index.html" target="_blank"><img src="https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vanillaJSLogo.png" width="60"/></a> |
 
-### :dart: Roadmap
-
-- [x] Support csv, xls, xlsx, ods, txt files
-- [x] Data filtering
-- [ ] Column visibility
-- [ ] Move row/column by dragging
-- [ ] Procedural pagination rendering
-- [ ] Pick mode
-- [ ] Undo/Redo
-- [ ] Code refactoring
-- [ ] Unit tests
-
 ## :construction_worker: Local setup
 
 ```