React-drag-tree-table NPM

react-drag-tree-table

📦 Install

npm i react-drag-tree-table

👽 Usage

import { DragTreeTable } from 'react-drag-tree-table'
import 'react-drag-tree-table/dist/index.css'

<DragTreeTable columns={columns} data={data} />

📁 Options

option	description	default	type
columns	table columns	-	DragTreeColumnProps
data	table data	-	-
key	key from render data	-	"id"
isdraggable	whether it can be dragged	-	true
height	table height	-	400(px)
border	table border	-	false
fixed	fixed table header	-	false
flex	automatic filling of remaining areas, follow the flex layout of CSS	-	false
onlySameLevelCanDrag	drag-and-drop hierarchy changes are prohibited	-	false

📁 Events

event	description	default	type
onDrag	Callback executed when the row is draged	function(current, target, whereInsert)	-
onExpand	Callback executed when the row expand icon is clicked	function(expanded, record)	-

⛱ Interface

export type render = (value: any, record: any, index: number) => ReactNode
export type onExpand = (expanded: boolean, record: any) => void

export interface DragTreeTableProps {
  data: Record<string, any>[]
  key?: string
  columns: DragTreeColumnProps[]
  isdraggable?: boolean
  onDrag?: (current: Record<string, any>, target: Record<string, any>, whereInsert: WHERE_INSERT | null) => void
  onExpand?: onExpand
  fixed?: boolean
  height?: string | number
  border?: boolean
  onlySameLevelCanDrag?: string
  hightRowChange?: string
  resize?: boolean
  beforeDragOver?: Function
}

export enum WHERE_INSERT {
  TOP = 'TOP', // drag onto target data
  CENTER = 'CENTER', // drag to the target data children
  BOTTOM = 'BOTTOM', // drag it below the target data
}

export interface DragTreeColumnProps {
  width?: number | string
  key?: string | number
  lable?: string
  flex?: number
  border?: boolean
  render?: render
}

export interface DragTreeRowProps {
  data: RowDataMap<any>[]
  depth?: number
  isdraggable?: boolean
  border?: boolean
  onClick: (event: React.MouseEvent<any, MouseEvent>, data: RowDataMap, current: RowDataProps) => void
}

export interface RowDataProps<T = any | undefined> {
  width?: number | string
  content: any
  flex?: number
  _data: T
  render?: render
}
export interface RowDataMap<T = any | undefined> {
  key: string
  parentKey: string | number | null
  props: RowDataProps<T>[]
  children: RowDataMap<T>[]
  open: boolean
  childOpen: boolean
  _data: T
}