@kaspernj/api-maker 1.0.445 → 1.0.446

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.445",
+  "version": "1.0.446",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -35,6 +35,7 @@
     "object-to-formdata": ">= 4.1.0",
     "on-location-changed": ">= 1.0.13",
     "qs": ">= 6.9.3",
+    "react-native-draglist": "^3.8.0",
     "react-native-vector-icons": "^10.2.0",
     "replaceall": ">= 0.1.6",
     "set-state-compare": ">= 1.0.53",

package/src/draggable-sort/controller.mjs

@@ -0,0 +1,137 @@
+import {digg} from "diggerize"
+import EventEmitter from "events"
+
+export default class DraggableSortController {
+  constructor({data, events, keyExtractor}) {
+    this.data = data
+    this.currentOrder = [...data]
+    this.events = events || new EventEmitter()
+    this.keyExtractor = keyExtractor
+
+    this.draggedItem = null
+    this.draggedItemData = null
+    this.draggedItemNewPosition = null
+
+    this.draggedOverItem = null
+    this.draggedOverItemData = null
+
+    this.itemData = {}
+
+    for (const itemIndex in data) {
+      this.itemData[itemIndex] = {
+        index: itemIndex,
+        item: data[itemIndex],
+        position: itemIndex
+      }
+    }
+  }
+
+  getEvents = () => this.events
+  getItemDataForItem = (item) => this.getItemDataForIndex(this.data.indexOf(item))
+  getItemDataForKey = (key) => this.itemData.find((itemDataI) => digg(itemDataI, "key") == key)
+  getItemDataForIndex = (index) => digg(this, "itemData", index)
+
+  onDragStart = ({item, itemIndex}) => {
+    if (item) {
+      this.draggedItem = item
+      this.draggedItemData = this.getItemDataForIndex(itemIndex)
+      this.draggedItemIndex = itemIndex
+      this.draggedItemPosition = this.draggedItemData.position
+      this.events.emit("onDragStart", {item, itemData: this.draggedItemData})
+    }
+  }
+
+  onDragEnd = () => {
+    const itemData = this.draggedItemData
+    const fromIndex = itemData.index
+    const fromPosition = digg(this, "draggedItemPosition")
+    const toPosition = this.draggedItemNewPosition
+    const fromItem = this.draggedItem
+    const toItem = this.draggedOverItem
+    const callbackArgs = {item: itemData.item, itemData, fromIndex, fromItem, fromPosition, toItem, toPosition}
+
+    this.draggedItemData.events.emit("resetPosition", {
+      callback: () => {
+        this.events.emit("onDragEndAnimation", callbackArgs)
+      }
+    })
+
+    this.draggedItem = null
+    this.draggedItemData = null
+    this.draggedItemNewPosition = null
+
+    this.draggedOverItem = null
+    this.draggedOverItemData = null
+
+    this.events.emit("onDragEnd", callbackArgs)
+  }
+
+  onItemLayout = ({events, index, item, layout}) => {
+    if (!(index in this.itemData)) throw new Error(`Item not found for index ${index}`)
+
+    const itemData = this.itemData[index]
+
+    itemData.layout = layout
+
+    if (!itemData.initialLayout) {
+      itemData.baseX = layout.x
+      itemData.events = events
+      itemData.initialLayout = layout
+      itemData.key = this.keyExtractor(item)
+    }
+  }
+
+  onMove = ({gestate}) => {
+    // Send move-event to the item being dragged so it will actually move around
+    this.draggedItemData?.events?.emit("move", {gestate})
+
+    const moveX = gestate.dx + this.initialDragPosition.x
+
+    for (const itemIndex in this.itemData) {
+      const itemData = this.getItemDataForIndex(itemIndex)
+      const baseX = digg(itemData, "baseX")
+      let smallestWidth = this.draggedItemData.layout.width
+
+      if (itemData.layout.width < smallestWidth) smallestWidth = itemData.layout.width
+
+      if (moveX > baseX && moveX < (baseX + smallestWidth) && itemIndex != this.draggedItemData.index) {
+        this.draggedOverItem = itemData.item
+        this.draggedOverItemData = itemData
+
+        const positionOfDraggedItem = this.currentOrder.indexOf(this.draggedItemData.item)
+        const positionOfOverItem = this.currentOrder.indexOf(this.draggedOverItemData.item)
+
+        this.currentOrder[positionOfDraggedItem] = this.draggedOverItemData.item
+        this.currentOrder[positionOfOverItem] = this.draggedItemData.item
+
+        this.draggedItemData.position = positionOfOverItem
+        this.draggedOverItemData.position = positionOfDraggedItem
+
+        this.updatePositionOfItems()
+        this.draggedItemNewPosition = positionOfOverItem
+      }
+    }
+  }
+
+  setInitialDragPosition = (initialDragPosition) => {
+    this.initialDragPosition = initialDragPosition
+  }
+
+  updatePositionOfItems() {
+    let currentPosition = 0
+
+    for (const item of this.currentOrder) {
+      const itemData = this.getItemDataForItem(item)
+
+      if (digg(itemData, "index") != digg(this, "draggedItemData", "index")) { // Dont animate dragged element to a new position because it is currently being dragged
+        itemData.events.emit("moveToPosition", {
+          x: currentPosition,
+          y: 0
+        })
+      }
+
+      itemData.baseX = currentPosition
+      currentPosition += digg(itemData, "layout", "width")
+    }
+  }
+}

package/src/draggable-sort/index.jsx

@@ -0,0 +1,108 @@
+import {useMemo} from "react"
+import {Animated, PanResponder} from "react-native"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import Controller from "./controller.mjs"
+import DraggableSortItem from "./item"
+import EventEmitter from "events"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import useEventEmitter from "../use-event-emitter.mjs"
+
+export default memo(shapeComponent(class DraggableSort extends ShapeComponent {
+  static defaultProps = {
+    horizontal: false
+  }
+
+  static propTypes = propTypesExact({
+    cacheKeyExtractor: PropTypes.func,
+    data: PropTypes.array.isRequired,
+    dataSet: PropTypes.object,
+    events: PropTypes.instanceOf(EventEmitter),
+    horizontal: PropTypes.bool.isRequired,
+    keyExtractor: PropTypes.func.isRequired,
+    onDragItemEnd: PropTypes.func,
+    onDragItemStart: PropTypes.func,
+    onItemMoved: PropTypes.func,
+    onReordered: PropTypes.func.isRequired,
+    renderItem: PropTypes.func.isRequired
+  })
+
+  setup() {
+    const {data, keyExtractor} = this.p
+    const {events} = this.props
+
+    this.controller = useMemo(() => new Controller({data, events, keyExtractor}), [])
+    this.panResponder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: (e) => {
+          const initialDragPosition = {x: e.nativeEvent.locationX, y: e.nativeEvent.locationY}
+
+          this.controller.setInitialDragPosition(initialDragPosition)
+
+          if (this.controller.draggedItemData) {
+            return true
+          }
+        },
+        onPanResponderMove: (e, gestate) => {
+          this.tt.controller.onMove({gestate})
+        },
+        onPanResponderRelease: (e, gestate) => {
+          if (this.controller.draggedItem) {
+            this.tt.controller.onDragEnd()
+          }
+        }
+      }),
+      []
+    )
+
+    useEventEmitter(this.controller.getEvents(), "onDragStart", this.tt.onDragItemStart)
+    useEventEmitter(this.controller.getEvents(), "onDragEnd", this.tt.onDragItemEnd)
+  }
+
+  render() {
+    const {data, horizontal, keyExtractor, renderItem} = this.p
+    const {cacheKeyExtractor, dataSet} = this.props
+    const actualDataSet = useMemo(
+      () => Object.assign(
+        {
+          component: "draggable-sort"
+        },
+        dataSet
+      ),
+      [dataSet]
+    )
+
+    return (
+      <Animated.View dataSet={actualDataSet} style={{flexDirection: horizontal ? "row" : "column"}} {...this.tt.panResponder.panHandlers}>
+        {data.map((item, itemIndex) =>
+          <DraggableSortItem
+            cacheKey={cacheKeyExtractor ? cacheKeyExtractor(item) : undefined}
+            controller={this.tt.controller}
+            item={item}
+            itemIndex={itemIndex}
+            key={keyExtractor(item)}
+            onItemMoved={this.props.onItemMoved}
+            renderItem={renderItem}
+          />
+        )}
+      </Animated.View>
+    )
+  }
+
+  onDragItemStart = ({itemData}) => {
+    if (this.props.onDragItemStart) {
+      this.p.onDragItemStart({itemData})
+    }
+  }
+
+  onDragItemEnd = (args) => {
+    if (args.toPosition !== null) {
+      this.p.onReordered(args)
+    }
+
+    if (this.props.onDragItemEnd) {
+      this.p.onDragItemEnd(args)
+    }
+  }
+}))

package/src/draggable-sort/item.jsx

@@ -0,0 +1,174 @@
+import {useMemo} from "react"
+import {Animated, Easing, PanResponder} from "react-native"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import EventEmitter from "events"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import useEventEmitter from "../use-event-emitter.mjs"
+
+export default memo(shapeComponent(class DraggableSortItem extends ShapeComponent {
+  static propTypes = propTypesExact({
+    cacheKey: PropTypes.string,
+    controller: PropTypes.object.isRequired,
+    item: PropTypes.any.isRequired,
+    itemIndex: PropTypes.number.isRequired,
+    onItemMoved: PropTypes.func,
+    renderItem: PropTypes.func.isRequired
+  })
+
+  initialLayout = null
+
+  setup() {
+    this.useStates({
+      active: false,
+      dragging: false
+    })
+
+    this.events = useMemo(() => new EventEmitter(), [])
+    this.position = useMemo(() => new Animated.ValueXY(), [])
+    this.panResponder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: (e, ) => {
+          this.setState({dragging: true})
+          this.p.controller.onDragStart({item: this.p.item, itemIndex: this.p.itemIndex})
+
+          return false
+        }
+      }),
+      []
+    )
+
+    useEventEmitter(this.p.controller.getEvents(), "onDragStart", this.tt.onDragStart)
+    useEventEmitter(this.p.controller.getEvents(), "onDragEndAnimation", this.tt.onDragEndAnimation)
+    useEventEmitter(this.tt.events, "move", this.tt.onMove)
+    useEventEmitter(this.tt.events, "moveToPosition", this.tt.onMoveToPosition)
+    useEventEmitter(this.tt.events, "resetPosition", this.tt.onResetPosition)
+  }
+
+  render() {
+    const {item, renderItem} = this.p
+    const {active} = this.s
+    const style = useMemo(
+      () => {
+        const style = {
+          transform: this.tt.position.getTranslateTransform()
+        }
+
+        if (active) {
+          style.backgroundColor = "#fff"
+          style.elevation = 2
+          style.zIndex = 99999
+        }
+
+        return style
+      },
+      [active]
+    )
+
+    return (
+      <Animated.View dataSet={{component: "draggable-sort/item"}} onLayout={this.tt.onLayout} style={style}>
+        {renderItem({isActive: active, item, touchProps: this.tt.panResponder.panHandlers})}
+      </Animated.View>
+    )
+  }
+
+  onDragStart = ({itemData}) => {
+    const newState = {dragging: true}
+
+    if (itemData.index == this.p.itemIndex) {
+      newState.active = true
+      this.baseXAtStartedDragging = this.getBaseX()
+    }
+
+    this.setState(newState)
+  }
+
+  onDragEndAnimation = () => this.setState({active: false, dragging: false})
+
+  onLayout = (e) => {
+    const {controller, item, itemIndex} = this.p
+
+    controller.onItemLayout({events: this.tt.events, index: itemIndex, item, layout: e.nativeEvent.layout})
+
+    if (!this.tt.initialLayout) {
+      this.initialLayout = e.nativeEvent.layout
+    }
+  }
+
+  onMove = ({gestate}) => {
+    const x = gestate.dx + this.tt.baseXAtStartedDragging - this.tt.initialLayout.x
+    const y = this.tt.initialLayout.y
+
+    this.tt.position.setValue({x, y})
+
+    if (this.props.onItemMoved) {
+      this.p.onItemMoved({itemIndex: this.p.itemIndex, x, y})
+    }
+  }
+
+  onMoveToPosition = ({x, y}) => {
+    const calculatedXFromStartingPosition = x - this.tt.initialLayout.x
+    const animationArgs = {
+      duration: 200,
+      easing: Easing.inOut(Easing.linear),
+      toValue: {
+        x: calculatedXFromStartingPosition,
+        y
+      },
+      useNativeDriver: true,
+    }
+    const animationEventArgs = {animationArgs, animationType: "moveToPosition", item: this.p.item}
+
+    this.p.controller.events.emit("onAnimationStart", animationEventArgs)
+
+    Animated
+      .timing(this.tt.position, animationArgs)
+      .start(() => {
+        this.p.controller.events.emit("onAnimationEnd", animationEventArgs)
+      })
+
+    if (this.props.onItemMoved) {
+      this.p.onItemMoved({
+        animationArgs,
+        itemIndex: this.p.itemIndex,
+        x: calculatedXFromStartingPosition,
+        y
+      })
+    }
+  }
+
+  getBaseX = () => this.p.controller.getItemDataForIndex(this.p.itemIndex).baseX
+
+  onResetPosition = (args) => {
+    const baseX = this.getBaseX() - this.tt.initialLayout.x
+    const animationArgs = {
+      duration: 200,
+      easing: Easing.inOut(Easing.linear),
+      toValue: {
+        x: baseX,
+        y: 0
+      },
+      useNativeDriver: true,
+    }
+    const animationEventArgs = {animationArgs, animationType: "resetPosition", item: this.p.item}
+
+    this.p.controller.events.emit("onAnimationStart", animationEventArgs)
+
+    Animated
+      .timing(this.tt.position, animationArgs)
+      .start(() => {
+        this.p.controller.events.emit("onAnimationEnd", animationEventArgs)
+        if (args?.callback) args.callback()
+      })
+
+    if (this.props.onItemMoved) {
+      this.p.onItemMoved({
+        animationArgs,
+        itemIndex: this.p.itemIndex,
+        x: baseX,
+        y: 0
+      })
+    }
+  }
+}))

package/src/table/components/column.jsx

@@ -1,12 +1,18 @@
 import BaseComponent from "../../base-component"
 import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
-import {View} from "react-native"
+import {Animated, View} from "react-native"
 
 export default memo(shapeComponent(class SharedTableColumn extends BaseComponent {
   render() {
+    const {dataSet, ...restProps} = this.props
+    const actualDataSet = Object.assign(
+      {component: "api-maker/table/components/column"},
+      dataSet
+    )
+
     return (
-      <View {...this.props} />
+      <Animated.View dataSet={actualDataSet} {...restProps} />
     )
   }
 }))

package/src/table/components/header.jsx

@@ -2,7 +2,7 @@ import BaseComponent from "../../base-component"
 import classNames from "classnames"
 import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
-import {View} from "react-native"
+import {Animated} from "react-native"
 
 export default memo(shapeComponent(class SharedTableHeader extends BaseComponent {
   render() {
@@ -14,7 +14,7 @@ export default memo(shapeComponent(class SharedTableHeader extends BaseComponent
     )
 
     return (
-      <View dataSet={actualDataSet} {...restProps} />
+      <Animated.View dataSet={actualDataSet} {...restProps} />
     )
   }
 }))

package/src/table/header-column.jsx

@@ -1,23 +1,27 @@
+import {useMemo} from "react"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import Header from "./components/header"
 import HeaderColumnContent from "./header-column-content"
 import memo from "set-state-compare/src/memo"
-import {Platform, Pressable} from "react-native"
+import {Animated, PanResponder} from "react-native"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import useBreakpoint from "../use-breakpoint"
-import useEventListener from "../use-event-listener.mjs"
 import Widths from "./widths"
 
 export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
   static propTypes = propTypesExact({
+    active: PropTypes.bool.isRequired,
+    animatedWidth: PropTypes.instanceOf(Animated.Value).isRequired,
+    animatedZIndex: PropTypes.instanceOf(Animated.Value).isRequired,
     column: PropTypes.object.isRequired,
     resizing: PropTypes.bool.isRequired,
     table: PropTypes.object.isRequired,
     tableSettingColumn: PropTypes.object.isRequired,
-    width: PropTypes.number.isRequired,
+    touchProps: PropTypes.object.isRequired,
     widths: PropTypes.instanceOf(Widths).isRequired
   })
 
@@ -25,29 +29,64 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
     const {name: breakpoint, mdUp, smDown} = useBreakpoint()
 
     this.setInstance({breakpoint, mdUp, smDown})
-
-    useEventListener(window, "mousemove", this.tt.onWindowMouseMove)
-    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
-
     this.useStates({
-      cursorX: undefined,
-      originalWidth: undefined,
       resizing: false
     })
+
+    this.resizePanResponder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: (_e) => {
+          this.originalWidth = this.currentWidth
+          this.setState({resizing: true})
+          this.p.table.setState({resizing: true})
+
+          return true
+        },
+        onPanResponderMove: (_e, gestate) => {
+          const newWidth = this.tt.originalWidth + gestate.dx
+
+          this.p.widths.setWidthOfColumn({
+            identifier: this.p.tableSettingColumn.identifier(),
+            width: newWidth
+          })
+        },
+        onPanResponderRelease: this.tt.onResizeEnd,
+        onPanResponderTerminate: this.tt.onResizeEnd,
+        onPanResponderTerminationRequest: () => false // Don't let another PanResponder steal focus and stop resizing until release
+      }),
+      []
+    )
+  }
+
+  onResizeEnd = async () => {
+    this.p.table.setState({lastUpdate: new Date(), resizing: false})
+    this.setState({resizing: false})
+
+    const width = this.p.widths.getWidthOfColumn(this.p.tableSettingColumn.identifier())
+
+    await this.p.tableSettingColumn.update({width})
   }
 
   render() {
     const {mdUp} = this.tt
-    const {column, resizing, table, tableSettingColumn, width} = this.p
+    const {active, animatedWidth, column, resizing, table, tableSettingColumn, touchProps} = this.p
     const {styleForHeader} = table.tt
     const headerProps = table.headerProps(column)
     const {style, ...restColumnProps} = headerProps
-    const actualStyle = Object.assign(
-      {
-        cursor: resizing ? "col-resize" : undefined,
-        width: mdUp ? width : "100%"
+    const actualStyle = useMemo(
+      () => {
+        const actualStyle = Object.assign(
+          {
+            cursor: resizing ? "col-resize" : undefined,
+            width: mdUp ? animatedWidth : "100%",
+            height: mdUp ? "100%" : undefined
+          },
+          style
+        )
+
+        return actualStyle
       },
-      style
+      [active, animatedWidth, mdUp, resizing, style]
     )
 
     return (
@@ -60,11 +99,12 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
         style={styleForHeader({style: actualStyle})}
         {...restColumnProps}
       >
+        {mdUp &&
+          <FontAwesomeIcon name="bars" style={{marginRight: 3, fontSize: 12}} {...touchProps} />
+        }
         <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} />
         {mdUp &&
-          <Pressable
-            onMouseDown={Platform.OS == "web" ? this.tt.onResizeMouseDown : undefined}
-            onPressIn={this.tt.onResizePressIn}
+          <Animated.View
             style={{
               position: "absolute",
               top: 0,
@@ -74,6 +114,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
               cursor: "col-resize",
               zIndex: 9999
             }}
+            {...this.tt.resizePanResponder.panHandlers}
           />
         }
       </Header>
@@ -85,65 +126,4 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
 
     this.currentWidth = width
   }
-
-  onResizeEnd = async () => {
-    this.setState({cursorX: undefined, resizing: false})
-    this.p.table.setState({resizing: false})
-
-    const width = this.p.widths.getWidthOfColumn(this.p.tableSettingColumn.identifier())
-
-    await this.p.tableSettingColumn.update({width})
-  }
-
-  // Otherwise text is selectable on web
-  onResizeMouseDown = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    const originalWidth = this.currentWidth
-    const cursorX = e.nativeEvent.pageX
-
-    this.setState({
-      cursorX,
-      originalWidth,
-      resizing: true
-    })
-    this.p.table.setState({resizing: true})
-  }
-
-  onResizePressIn = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    const originalWidth = this.currentWidth
-    const cursorX = e.nativeEvent.pageX
-
-    this.setState({
-      cursorX,
-      originalWidth,
-      resizing: true
-    })
-    this.p.table.setState({resizing: true})
-  }
-
-  onWindowMouseMove = (e) => {
-    const {cursorX, resizing, originalWidth} = this.s
-
-    if (resizing) {
-      const newCursorX = e.pageX
-      const diffX = newCursorX - cursorX
-      const newWidth = originalWidth + diffX
-
-      this.p.widths.setWidthOfColumn({
-        identifier: this.p.tableSettingColumn.identifier(),
-        width: newWidth
-      })
-    }
-  }
-
-  onWindowMouseUp = () => {
-    if (this.s.resizing) {
-      this.onResizeEnd()
-    }
-  }
 }))

package/src/table/model-column.jsx

@@ -1,9 +1,10 @@
-import {View} from "react-native"
+import {Animated, View} from "react-native"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
 import Column from "./components/column"
 import ColumnContent from "./column-content"
 import columnIdentifier from "./column-identifier.mjs"
+import EventEmitter from "events"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import memo from "set-state-compare/src/memo"
@@ -13,18 +14,21 @@ import useBreakpoint from "../use-breakpoint"
 
 export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseComponent {
   static propTypes = propTypesExact({
+    animatedPosition: PropTypes.instanceOf(Animated.ValueXY).isRequired,
+    animatedWidth: PropTypes.instanceOf(Animated.Value).isRequired,
+    animatedZIndex: PropTypes.instanceOf(Animated.Value).isRequired,
     column: PropTypes.object.isRequired,
     columnIndex: PropTypes.number.isRequired,
     even: PropTypes.bool.isRequired,
+    events: PropTypes.instanceOf(EventEmitter).isRequired,
     model: PropTypes.object.isRequired,
     table: PropTypes.object.isRequired,
-    tableSettingColumn: PropTypes.object.isRequired,
-    width: PropTypes.number.isRequired
+    tableSettingColumn: PropTypes.object.isRequired
   })
 
   render() {
     const {mdUp} = useBreakpoint()
-    const {column, columnIndex, even, model, table, width} = this.props
+    const {animatedWidth, animatedZIndex, column, columnIndex, even, model, table} = this.props
     const columnProps = table.columnProps(column)
     const {style, ...restColumnProps} = columnProps
     const actualStyle = Object.assign(
@@ -33,7 +37,9 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
         columnIndex,
         even,
         style: {
-          width: mdUp ? width : "100%"
+          zIndex: animatedZIndex,
+          transform: this.p.animatedPosition.getTranslateTransform(),
+          width: mdUp ? animatedWidth : "100%"
         }
       }),
       style

package/src/table/model-row.jsx

@@ -2,7 +2,7 @@ import {Pressable} from "react-native"
 import BaseComponent from "../base-component"
 import Column from "./components/column"
 import columnIdentifier from "./column-identifier.mjs"
-import columnVisible from "./column-visible.mjs"
+import EventEmitter from "events"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import * as inflection from "inflection"
 import modelCallbackArgs from "./model-callback-args.mjs"
@@ -19,11 +19,12 @@ const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox
 export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
   static propTypes = propTypesExact({
     cacheKey: PropTypes.string.isRequired,
+    columns: PropTypes.array,
     columnWidths: PropTypes.object.isRequired,
+    events: PropTypes.instanceOf(EventEmitter).isRequired,
     index: PropTypes.number.isRequired,
     model: PropTypes.object.isRequired,
     table: PropTypes.object.isRequired,
-    preparedColumns: PropTypes.array,
     tableSettingFullCacheKey: PropTypes.string.isRequired
   })
 
@@ -85,18 +86,21 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   columnsContentFromColumns(model, even) {
-    const {table, preparedColumns} = this.p
+    const {columns, events, table} = this.p
 
-    return preparedColumns?.map(({column, tableSettingColumn, width}, columnIndex) => columnVisible(column, tableSettingColumn) &&
+    return columns?.map(({animatedPosition, animatedWidth, animatedZIndex, column, tableSettingColumn}, columnIndex) =>
       <ModelColumn
+        animatedPosition={animatedPosition}
+        animatedWidth={animatedWidth}
+        animatedZIndex={animatedZIndex}
         column={column}
         columnIndex={columnIndex}
         even={even}
+        events={events}
         key={columnIdentifier(column)}
         model={model}
         table={table}
         tableSettingColumn={tableSettingColumn}
-        width={width}
       />
     )
   }

package/src/table/settings/column-row.jsx

@@ -87,6 +87,7 @@ export default memo(shapeComponent(class ColumnRow extends BaseComponent {
     const {table, tableSettingColumn} = this.p
 
     await tableSettingColumn.update({visible: this.checked})
-    table.updateSettingsFullCacheKey()
+
+    table.events.emit("columnVisibilityUpdated", {tableSettingColumn})
   }
 }))

package/src/table/table.jsx

@@ -1,11 +1,14 @@
 import {digg, digs} from "diggerize"
-import {Pressable, StyleSheet, View} from "react-native"
+import React, {createContext, useContext, useMemo, useRef} from "react"
+import {Animated, Pressable, View} from "react-native"
 import BaseComponent from "../base-component"
 import Card from "../bootstrap/card"
 import classNames from "classnames"
 import Collection from "../collection"
 import columnVisible from "./column-visible.mjs"
 import debounce from "debounce"
+import DraggableSort from "../draggable-sort/index.jsx"
+import EventEmitter from "events"
 import Filters from "./filters"
 import FlatList from "./components/flat-list"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
@@ -20,7 +23,6 @@ import ModelRow from "./model-row"
 import Paginate from "../bootstrap/paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React, {createContext, useContext, useMemo, useRef} from "react"
 import Row from "./components/row"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
@@ -32,6 +34,7 @@ import uniqunize from "uniqunize"
 import useBreakpoint from "../use-breakpoint"
 import useCollection from "../use-collection"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import useEventEmitter from "../use-event-emitter.mjs"
 import useModelEvent from "../use-model-event.js"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
 import Widths from "./widths"
@@ -40,43 +43,55 @@ const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
 const TableContext = createContext()
 
-const ListHeaderComponent = memo(() => {
-  const {mdUp} = useBreakpoint()
-  const tableContextValue = useContext(TableContext)
-  const table = tableContextValue.table
-  const {collection, queryWithoutPagination, t} = table.tt
-  const {query} = digs(collection, "query")
-
-  return (
-    <Row dataSet={{class: "api-maker/table/header-row"}} style={table.styleForRowHeader()}>
-      {table.p.workplace && table.s.currentWorkplace &&
-        <Header style={table.styleForHeader({style: {width: mdUp ? 41 : undefined}})}>
-          <WorkerPluginsCheckAllCheckbox
-            currentWorkplace={table.s.currentWorkplace}
-            query={queryWithoutPagination}
-            style={{marginHorizontal: "auto"}}
-          />
-          {!mdUp &&
-            <Text style={{marginLeft: 3}}>
-              {t(".select_all_found", {defaultValue: "Select all found"})}
-            </Text>
-          }
-        </Header>
-      }
-      {!mdUp &&
-        <Header style={table.styleForHeader({style: {}})}>
-          <HeaderSelect preparedColumns={table.s.preparedColumns} query={query} table={table} />
-        </Header>
-      }
-      {mdUp &&
-        <>
-          {table.headersContentFromColumns()}
-          <Header style={table.styleForHeader({style: {}, type: "actions"})} />
-        </>
-      }
-    </Row>
-  )
-})
+const ListHeaderComponent = memo(shapeComponent(class ListHeaderComponent extends BaseComponent {
+  setup() {
+    this.useStates({
+      lastUpdate: new Date()
+    })
+  }
+
+  render() {
+    const {mdUp} = useBreakpoint()
+    const tableContextValue = useContext(TableContext)
+    const table = tableContextValue.table
+    const {collection, events, queryWithoutPagination, t} = table.tt
+    const {query} = digs(collection, "query")
+
+    useEventEmitter(events, "columnVisibilityUpdated", this.tt.onColumnVisibilityUpdated)
+
+    return (
+      <Row dataSet={{class: "api-maker/table/header-row"}} style={table.styleForRowHeader()}>
+        {table.p.workplace && table.s.currentWorkplace &&
+          <Header style={table.styleForHeader({style: {width: mdUp ? 41 : undefined}})}>
+            <WorkerPluginsCheckAllCheckbox
+              currentWorkplace={table.s.currentWorkplace}
+              query={queryWithoutPagination}
+              style={{marginHorizontal: "auto"}}
+            />
+            {!mdUp &&
+              <Text style={{marginLeft: 3}}>
+                {t(".select_all_found", {defaultValue: "Select all found"})}
+              </Text>
+            }
+          </Header>
+        }
+        {!mdUp &&
+          <Header style={table.styleForHeader({style: {}})}>
+            <HeaderSelect preparedColumns={table.s.preparedColumns} query={query} table={table} />
+          </Header>
+        }
+        {mdUp &&
+          <>
+            {table.headersContentFromColumns()}
+            <Header style={table.styleForHeader({style: {}, type: "actions"})} />
+          </>
+        }
+      </Row>
+    )
+  }
+
+  onColumnVisibilityUpdated = () => this.setState({lastUpdate: new Date()})
+}))
 
 export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   static defaultProps = {
@@ -132,7 +147,9 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     workplace: PropTypes.bool.isRequired
   }
 
-  tableSetting = null
+  draggableSortEvents = new EventEmitter()
+  events = new EventEmitter()
+  tableSettings = null
 
   setup() {
     const {t} = useI18n({namespace: "js.api_maker.table"})
@@ -151,14 +168,15 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
     if (!queryName) queryName = collectionKey
 
-    const columnsAsArray = this.columnsAsArray()
     const querySName = `${queryName}_s`
 
     this.useStates({
-      columns: columnsAsArray,
+      columns: () => this.columnsAsArray(),
       currentWorkplace: undefined,
       currentWorkplaceCount: null,
       filterForm: null,
+      columnsToShow: null,
+      draggedColumn: null,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       lastUpdate: () => new Date(),
       preload: undefined,
@@ -181,9 +199,10 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       () => ({
         cacheKey: this.s.tableSettingFullCacheKey,
         lastUpdate: this.s.lastUpdate,
+        resizing: this.s.resizing,
         table: this
       }),
-      [this.s.lastUpdate, this.s.tableSettingFullCacheKey]
+      [this.s.lastUpdate, this.s.resizing, this.s.tableSettingFullCacheKey]
     )
 
     useMemo(() => {
@@ -195,7 +214,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }, [this.p.currentUser?.id()])
 
     useMemo(() => {
-      if (!this.tt.tableSetting && this.s.width) {
+      if (!this.tt.tableSettings && this.s.width) {
         this.loadTableSetting()
       }
     }, [this.p.currentUser?.id(), this.s.width])
@@ -235,8 +254,16 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       () => this.collection?.query?.clone()?.except("page"),
       [this.collection.query]
     )
+
+    useEventEmitter(this.tt.draggableSortEvents, "onDragStart", this.tt.onDragStart)
+    useEventEmitter(this.tt.draggableSortEvents, "onDragEndAnimation", this.tt.onDragEndAnimation)
+    useEventEmitter(this.tt.events, "columnVisibilityUpdated", this.tt.onColumnVisibilityUpdated)
   }
 
+  onColumnVisibilityUpdated = () => this.setState({columnsToShow: this.getColumnsToShow(this.s.columns), lastUpdate: new Date()})
+  onDragStart = ({item}) => item.animatedZIndex.setValue(9999)
+  onDragEndAnimation = ({item}) => item.animatedZIndex.setValue(0)
+
   async loadCurrentWorkplace() {
     const Workplace = modelClassRequire("Workplace")
     const result = await Workplace.current()
@@ -257,6 +284,12 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.setState({currentWorkplaceCount})
   }
 
+  getColumnsToShow(columns) {
+    return columns
+      .filter(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn))
+      .sort((a, b) => a.tableSettingColumn.position() - b.tableSettingColumn.position())
+  }
+
   async loadTableSetting() {
     this.tableSettings = new TableSettings({table: this})
 
@@ -264,8 +297,11 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {columns, preload} = this.tableSettings.preparedColumns(tableSetting)
     const {width} = this.s
     const widths = new Widths({columns, table: this, width})
+    const columnsToShow = this.getColumnsToShow(columns)
 
     this.setState({
+      columns,
+      columnsToShow,
       preparedColumns: columns,
       preload: this.mergedPreloads(preload),
       tableSetting,
@@ -450,7 +486,11 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       <TableContext.Provider value={this.tt.tableContextValue}>
         <FlatList
           data={models}
-          dataSet={{class: classNames("api-maker--table", className), cacheKey: this.s.tableSettingFullCacheKey}}
+          dataSet={{
+            class: classNames("api-maker--table", className),
+            cacheKey: this.s.tableSettingFullCacheKey,
+            lastUpdate: this.s.lastUpdate
+          }}
           extraData={this.s.lastUpdate}
           keyExtractor={this.tt.keyExtrator}
           ListHeaderComponent={ListHeaderComponent}
@@ -575,8 +615,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   }
 
   renderItem = ({index, item: model}) => {
-    const {preparedColumns, tableSettingFullCacheKey} = this.s
-
     if (!this.s.tableSettingLoaded) {
       return (
         <View>
@@ -590,13 +628,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return (
       <ModelRow
         cacheKey={model.cacheKey()}
+        columns={this.s.columnsToShow}
         columnWidths={this.columnWidths()}
+        events={this.tt.events}
         index={index}
         key={model.id()}
         model={model}
-        preparedColumns={preparedColumns}
         table={this}
-        tableSettingFullCacheKey={tableSettingFullCacheKey}
+        tableSettingFullCacheKey={this.s.tableSettingFullCacheKey}
       />
     )
   }
@@ -611,7 +650,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
     if (styleUI) {
       Object.assign(defaultStyle, {
-        backgroundColor: even ? "#f5f5f5" : undefined
+        backgroundColor: even ? "#f5f5f5" : "#fff"
       })
     }
 
@@ -648,10 +687,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       defaultStyle.borderRight = "1px solid #dbdbdb"
     }
 
-    if (mdUp) {
-
-    }
-
     const actualStyle = Object.assign(
       defaultStyle,
       style
@@ -798,17 +833,60 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return columnWidths
   }
 
-  headersContentFromColumns = () => this.s.preparedColumns?.map(({column, tableSettingColumn, width}) => columnVisible(column, tableSettingColumn) &&
-    <HeaderColumn
-      column={column}
-      key={tableSettingColumn.identifier()}
-      resizing={this.s.resizing}
-      table={this}
-      tableSettingColumn={tableSettingColumn}
-      width={width}
-      widths={this.s.widths}
-    />
-  )
+  headersContentFromColumns = () => {
+    return (
+      <DraggableSort
+        data={this.s.columnsToShow}
+        events={this.tt.draggableSortEvents}
+        horizontal
+        keyExtractor={this.tt.dragListkeyExtractor}
+        onItemMoved={this.tt.onItemMoved}
+        onReordered={this.tt.onReordered}
+        renderItem={this.tt.dragListRenderItemContent}
+      />
+    )
+  }
+
+  dragListCacheKeyExtractor = (item) => `${item.tableSettingColumn.identifier()}-${this.s.resizing}`
+  dragListkeyExtractor = (item) => item.tableSettingColumn.identifier()
+
+  onItemMoved = ({animationArgs, itemIndex, x, y}) => {
+    const animatedPosition = digg(this, "s", "columnsToShow", itemIndex, "animatedPosition")
+
+    if (animationArgs) {
+      Animated.timing(animatedPosition, animationArgs).start()
+    } else {
+      animatedPosition.setValue({x, y})
+    }
+  }
+
+  onReordered = async ({fromItem, fromPosition, toItem, toPosition}) => {
+    if (fromPosition == toPosition) return // Only do requests and queries if changed
+
+    const TableSettingColumn = fromItem.tableSettingColumn.constructor
+    const toColumn = await TableSettingColumn.find(toItem.tableSettingColumn.id()) // Need to load latest position because ActsAsList might have changed it
+
+    await fromItem.tableSettingColumn.update({position: toColumn.position()})
+  }
+
+  dragListRenderItemContent = ({isActive, item, touchProps}) => {
+    const {animatedWidth, animatedZIndex, column, tableSettingColumn} = item
+
+    return (
+      <HeaderColumn
+        active={isActive}
+        animatedWidth={animatedWidth}
+        animatedZIndex={animatedZIndex}
+        column={column}
+        key={tableSettingColumn.identifier()}
+        resizing={this.s.resizing}
+        table={this}
+        tableSettingColumn={tableSettingColumn}
+        touchProps={touchProps}
+        widths={this.s.widths}
+      />
+    )
+  }
 
   headerClassNameForColumn(column) {
     const classNames = []

package/src/table/{widths.mjs → widths.jsx}

@@ -1,3 +1,4 @@
+import {Animated, Easing} from "react-native"
 import {digg} from "diggerize"
 
 export default class TableWidths {
@@ -19,7 +20,15 @@ export default class TableWidths {
       const column = this.columns[columnIndex]
       const tableSettingColumn = column.tableSettingColumn
 
+      if (column.animatedPosition) throw new Error("Column already had an animated position")
+
+      column.animatedPosition = new Animated.ValueXY()
+      column.animatedZIndex = new Animated.Value(0)
+
       if (tableSettingColumn.hasWidth()) {
+        if (column.animatedWidth) throw new Error("Column already had an animated width")
+
+        column.animatedWidth = new Animated.Value(tableSettingColumn.width())
         column.width = tableSettingColumn.width()
 
         widthLeft -= tableSettingColumn.width()
@@ -44,6 +53,7 @@ export default class TableWidths {
 
         if (newWidth < 200) newWidth = 200
 
+        column.animatedWidth = new Animated.Value(newWidth)
         column.width = newWidth
 
         updateData << {
@@ -72,7 +82,6 @@ export default class TableWidths {
     if (!column) throw new Error(`No such column: ${identifier}`)
 
     column.width = width
-
-    this.table.setState({lastUpdate: new Date()})
+    column.animatedWidth.setValue(width)
   }
 }