(props.value)
+ const [edit, setEdit] = useState(!!props.edit)
+ const cache = useRef(null)
+ const className = classNames({
+ 'f-data-grid-cell': true,
+ 'is-disabled': disabled,
+ 'is-selected': selected && !disableSelect,
+ 'is-col-dragged': index == dragCol,
+ })
+
+ const refocus = () => {
+ // focus will return to the grid container
+ // so we put it back here
+ waitForRender(() => ref.current?.focus())
+ }
+
+ const editCell = () => {
+ if (!disableEdit) {
+ setEdit(true)
+ cache.current = value
+ }
+ }
+
+ const handleKeyDown = (e) => {
+ const { isEnter, isSpace, isBackspace, isEscape, isRight, isLeft, isUp, isDown, isShift } = getKey(e)
+ const isDirection = isRight || isLeft || isUp || isDown
+ const [_, row, col] = id.split('-')
+
+ if (selected) {
+ if (isEnter) {
+ if (edit) {
+ setEdit(false)
+ refocus()
+ } else {
+ stopEvent(e)
+ editCell()
+ }
+ } else if (isSpace) {
+ if (!edit) {
+ stopEvent(e)
+ editCell()
+ }
+ } else if (isBackspace) {
+ // we wait for state here rather
+ // TODO: optimistic update?
+ // setEdit(false)
+ // setValue('')
+ dispatchDataGridEvent('delete-cell', { instanceId, row: +row, col: +col })
+ } else if (isEscape) {
+ setEdit(false)
+ refocus()
+ } else if (isDirection) {
+ // TODO: directional selection
+ // if (edit) stopEvent(e)
+ } else if (isShift) {
+ // TODO: shift/multi selection
+ } else {
+ editCell()
+ }
+ }
+ }
+
+ const handleClick = (e) => {
+ if (!disableSelect) {
+ onSelect({ [id]: true })
+ }
+ }
+
+ const handleBlur = (e) => {
+ // TODO: should this deselect?
+ // setCellSelection({})
+ // setEdit(false)
+ // setValue(value)
+ }
+
+ const handleDoubleClick = (e) => {
+ editCell()
+ }
+
+ const handleCancel = (e) => {
+ refocus()
+ setEdit(false)
+ setValue(cache.current)
+ }
+
+ const handleEdit = (value) => {
+ const [_, row, col] = id.split('-')
+ setEdit(false)
+ refocus()
+ // NB: This is an optimistic update
+ setValue(value)
+ dispatchDataGridEvent('update-cell', { instanceId, value, row: +row, col: +col })
+ }
+
+ const handleContextMenuClick = (e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setMenu({ target: 'grid-cell', payload: props }, { x: e.clientX, y: e.clientY })
+ }
+
+ useEffect(() => {
+ if (selected) refocus()
+ }, [selected])
+
+ useEffect(() => {
+ setValue(props.value)
+ }, [props.value])
+
+ useLayoutEffect(() => {
+ const el: any = ref.current
+ if (el) el.addEventListener('contextmenu', handleContextMenuClick)
+ return () => el.removeEventListener('contextmenu', handleContextMenuClick)
+ })
+
+ return (
+
+
+ {props.children}
+
+
+ )
+}
diff --git a/packages/core/src/data-grid/data-grid-default-cell-component.tsx b/packages/core/src/data-grid/data-grid-default-cell-component.tsx
new file mode 100644
index 00000000..bca8f250
--- /dev/null
+++ b/packages/core/src/data-grid/data-grid-default-cell-component.tsx
@@ -0,0 +1,13 @@
+import { CommonProps, View } from '../'
+import React from 'react'
+
+export type DataGridDefaultCellComponentProps = {} & CommonProps
+
+export const DataGridDefaultCellComponent = (props: DataGridDefaultCellComponentProps) => (
+
+ {props.children}
+
+)
diff --git a/packages/core/src/data-grid/data-grid-header-cell-component.tsx b/packages/core/src/data-grid/data-grid-header-cell-component.tsx
new file mode 100644
index 00000000..bdd07544
--- /dev/null
+++ b/packages/core/src/data-grid/data-grid-header-cell-component.tsx
@@ -0,0 +1,69 @@
+import { CommonProps, ContextMenuContext, IconLib, Text } from '../'
+import React, { ReactNode, useContext } from 'react'
+
+export type DataGridHeaderCellComponentProps = {
+ id: string
+ label: string
+ sortOrder?: 'ASC' | 'DESC'
+ menu?: boolean
+ prefix?: ReactNode
+ suffix?: ReactNode
+ align?: 'left' | 'right' | 'center'
+ onClick: (value) => void
+} & CommonProps
+
+export const DataGridHeaderCellComponent = (props: DataGridHeaderCellComponentProps) => {
+ const { id, label, sortOrder, menu, prefix, suffix, align = 'left', onClick } = props
+ const { setMenu } = useContext(ContextMenuContext)
+
+ const handleMenuClick = (e) => {
+ e.preventDefault()
+ e.stopPropagation()
+
+ setMenu(
+ {
+ target: 'column',
+ payload: { id, label, sortOrder },
+ },
+ { x: e.clientX, y: e.clientY }
+ )
+ }
+
+ return (
+
+ {prefix}
+
+ {!!sortOrder && (
+
+ )}
+
+
+
+ {menu && (
+
+ )}
+
+ {suffix}
+
+
+ ${label}
+
+
+ `)
+ }
+ }, 150)
+ }
+
+ useLayoutEffect(() => {
+ const el: any = ref.current
+ if (el) el.addEventListener('contextmenu', handleContextMenuClick)
+ return () => el.removeEventListener('contextmenu', handleContextMenuClick)
+ })
+
+ return (
+
+
+ {props.children}
+
+
+ {!disableWidthChange && (
+ }
+ />
+ )}
+
+ )
+}
diff --git a/packages/core/src/data-grid/data-grid-header.tsx b/packages/core/src/data-grid/data-grid-header.tsx
new file mode 100644
index 00000000..61f63890
--- /dev/null
+++ b/packages/core/src/data-grid/data-grid-header.tsx
@@ -0,0 +1,85 @@
+import { Checkbox, CoreViewProps, View, classNames } from '../'
+import React, { FunctionComponent, ReactNode, useContext, useEffect, useMemo, useState } from 'react'
+import { DataGridContext } from './data-grid.provider'
+import { DataGridHeaderCell } from './data-grid-header-cell'
+import { DataGridDefaultCellComponent } from './data-grid-default-cell-component'
+import { DataGridTypes } from './data-grid.types'
+
+export type DataGridHeaderProps = {
+ sticky?: boolean
+ columns: DataGridTypes.Column[]
+ hideCheckbox?: boolean
+ component?: FunctionComponent
+ resizableColumns?: boolean
+ onWidthChange?: (index, value) => void
+ onColumnClick?: (index, value) => void
+} & CoreViewProps
+
+export const DataGridHeader = (props: DataGridHeaderProps) => {
+ const { columns, onWidthChange, hideCheckbox, component, resizableColumns, onColumnClick, ...rest } = props
+ const {
+ rowSelection,
+ setRowSelection,
+ cellSelection,
+ setCellSelection,
+ rowSelectionIndeterminate,
+ allRowsSelected,
+ selectAllRows,
+ maxRowsSelectable,
+ singleRowSelect,
+ dragCol,
+ setTotalColumns,
+ setWidths,
+ } = useContext(DataGridContext)
+ const id = `hr`
+ const selected = !!rowSelection[id]
+ const checked = useMemo(
+ () => allRowsSelected || rowSelectionIndeterminate,
+ [allRowsSelected, rowSelectionIndeterminate]
+ )
+ const showCheckbox = useMemo(() => {
+ if (hideCheckbox) return false
+ return !singleRowSelect
+ }, [singleRowSelect, hideCheckbox])
+ const className = classNames({
+ 'f-data-grid-row': true,
+ 'is-header': true,
+ 'is-selected': selected,
+ })
+
+ useEffect(() => {
+ setTotalColumns(columns.length)
+ }, [columns.length])
+
+ return (
+
+
+ {showCheckbox && (
+
+ )}
+
+
+ {columns.map((column: DataGridTypes.Column, index) => (
+ onWidthChange(index, width)}
+ onClick={(e) => onColumnClick(index, column)}
+ component={component}
+ {...column}
+ />
+ ))}
+
+ )
+}
diff --git a/packages/core/src/data-grid/data-grid-row.tsx b/packages/core/src/data-grid/data-grid-row.tsx
new file mode 100644
index 00000000..9bd912d6
--- /dev/null
+++ b/packages/core/src/data-grid/data-grid-row.tsx
@@ -0,0 +1,140 @@
+import { Checkbox, CommonProps, classNames, useDrag, windowObject } from '../'
+import React, { useContext, useMemo, useRef } from 'react'
+import { DataGridContext } from './data-grid.provider'
+import { dispatchDataGridEvent } from './data-grid.util'
+import { DataGridCell } from './data-grid-cell'
+import { DataGridDefaultCellComponent } from './data-grid-default-cell-component'
+import { DataGridTypes, FOLD_DATA_GRID_DRAG, FOLD_DATA_GRID_GHOST } from '../'
+
+export type DataGridRowProps = {
+ sticky?: boolean
+ columns: DataGridTypes.Cell[]
+ index: number
+ hideCheckbox?: boolean
+} & CommonProps
+
+export const DataGridRow = (props: any) => {
+ const { columns, index, hideCheckbox, ...rest } = props
+ const {
+ rowSelection,
+ setRowSelection,
+ cellSelection,
+ setCellSelection,
+ rowSelectionIndeterminate,
+ allRowsSelected,
+ selectAllRows,
+ maxRowsSelectable,
+ singleRowSelect,
+ dragCol,
+ setDragRow,
+ dragRow,
+ draggableRows,
+ instanceId,
+ } = useContext(DataGridContext)
+ const id = `r-${index}`
+ const ref = useRef(null)
+ const timeoutRef = useRef(null)
+ const { setGhostElement, setCustomGhostElementRotation } = useDrag()
+ const selected = useMemo(() => !!rowSelection[id], [rowSelection])
+ const showCheckbox = useMemo(() => !hideCheckbox, [hideCheckbox])
+ const className = classNames({
+ 'f-data-grid-row': true,
+ 'is-selected': selected,
+ 'is-draggable': draggableRows,
+ 'is-row-dragged': index == dragRow,
+ })
+
+ const handleCellSelection = (selection) => {
+ setCellSelection(selection)
+ }
+
+ const updateRowSelection = (selection) => {
+ setRowSelection(selection)
+ dispatchDataGridEvent('row-selection', { instanceId, selection })
+ }
+
+ const handleRowSelect = (e) => {
+ if (selected) {
+ const updatedRowSelection = { ...rowSelection }
+ delete updatedRowSelection[id]
+ updateRowSelection(updatedRowSelection)
+ } else {
+ // if there is max rows specified
+ // + max rows must be <= current selection
+ const numRowsSelected = Object.keys(rowSelection).length
+ if (!!maxRowsSelectable && maxRowsSelectable <= numRowsSelected) return
+
+ if (singleRowSelect) {
+ updateRowSelection({ [id]: true })
+ } else {
+ updateRowSelection({ ...rowSelection, [id]: true })
+ }
+ }
+ }
+
+ const handleMouseUp = (e) => {
+ clearTimeout(timeoutRef.current)
+ }
+
+ const handleMouseDown = (e) => {
+ if (e.target != e.currentTarget) return
+
+ timeoutRef.current = setTimeout(() => {
+ if (draggableRows) {
+ windowObject[FOLD_DATA_GRID_DRAG] = index
+ setDragRow(index)
+ setCustomGhostElementRotation('0deg')
+ setGhostElement(`
+
+
+ ${columns[0].value}
+
+
+ `)
+ }
+ }, 150)
+ }
+
+ return (
+
+ null}
+ component={DataGridDefaultCellComponent}>
+ {index + 1}
+
+ {showCheckbox && (
+
+ )}
+
+
+ {columns.map((cell, index1) => {
+ const id = `c-${index}-${index1}`
+ const selected = !!cellSelection[id]
+
+ return (
+
+ )
+ })}
+
+ )
+}
diff --git a/packages/core/src/data-grid/data-grid.css b/packages/core/src/data-grid/data-grid.css
new file mode 100644
index 00000000..24383ff7
--- /dev/null
+++ b/packages/core/src/data-grid/data-grid.css
@@ -0,0 +1,347 @@
+:root {
+ --f-data-grid-gutter-width: 100px;
+}
+
+:root {
+ --f-data-grid-selected-width: 0.2rem;
+ --f-data-grid-border: none;
+ --f-data-grid-background: var(--f-color-surface);
+ --f-data-grid-columns: var(--f-data-grid-gutter-width) 300px 200px 200px 200px 200px 200px 200px 150px 150px 150px 150px 150px;
+ --f-data-grid-cell-height: 40px;
+ --f-data-grid-border-bottom: 1px solid var(--f-color-surface-stronger);
+ --f-data-grid-border-right: 1px solid var(--f-color-surface-stronger);
+ --f-data-grid-background-selected: var(--f-color-surface-stronger);
+ --f-data-grid-background-hover: var(--f-color-surface-strong);
+ --f-data-grid-background-header: var(--f-color-surface-strong);
+ --f-data-grid-background-header-hover: var(--f-color-surface-stronger);
+}
+
+.f-data-grid-container {
+ width: 100%;
+ position: relative;
+}
+
+.f-data-grid {
+ width: 100%;
+ background: var(--f-data-grid-background);
+ position: relative;
+ border: var(--f-data-grid-border);
+ padding: 0px;
+}
+
+.f-data-grid.is-default {
+ overflow: auto;
+}
+
+.f-data-grid__list {
+ padding-right: 0px;
+ position: relative;
+ overflow: auto;
+ scroll-behavior: smooth !important;
+}
+
+.f-data-grid__scroll-spacer {
+ position: relative;
+ width: fit-content;
+ min-width: 100%;
+}
+
+/* row */
+/* ----------------------------------------------- */
+
+:root {
+ --f-data-grid-row-padding-left: 1rem;
+ --f-data-grid-row-padding-right: 5rem;
+}
+
+.f-data-grid-row {
+ display: grid;
+ padding-left: var(--f-data-grid-row-padding-left);
+ padding-right: var(--f-data-grid-row-padding-right);
+ grid-template-columns: var(--f-data-grid-columns);
+ transition: grid-template-columns 0.1s ease-out;
+ border-bottom: var(--f-data-grid-border-bottom);
+ min-width: 100%;
+ width: fit-content;
+ height: var(--f-data-grid-cell-height);
+ position: relative;
+}
+
+.f-data-grid-row.is-draggable {
+ cursor: grab;
+}
+
+.f-data-grid-row:last-child {
+ border-bottom: none;
+}
+
+.f-data-grid-row:focus-within {
+ outline: none;
+}
+
+.f-data-grid-row.is-selected,
+.f-data-grid-row.is-selected > .f-data-grid-cell {
+ background: var(--f-data-grid-background-selected);
+}
+
+.f-data-grid:not(.is-dragging) .f-data-grid-row:hover {
+ background: var(--f-data-grid-background-hover);
+}
+
+.f-data-grid:not(.is-dragging) .f-data-grid-row:hover .f-data-grid-cell,
+.f-data-grid:not(.is-dragging) .f-data-grid-row:hover .f-data-grid-cell.is-selected {
+ background: var(--f-data-grid-background-hover);
+}
+
+.f-data-grid-row.is-header,
+.f-data-grid-row.is-header:hover {
+ background: var(--f-data-grid-background-header) !important;
+ z-index: 20;
+ position: sticky;
+ top: 0px;
+}
+
+/* cell */
+/* ----------------------------------------------- */
+
+.f-data-grid-cell {
+ position: relative;
+ user-select: none;
+ cursor: pointer;
+ border-right: var(--f-data-grid-border-right);
+}
+
+.f-data-grid-row .f-data-grid-header-cell:last-child,
+.f-data-grid-row .f-data-grid-cell:last-child {
+ border-right: none;
+}
+
+.f-data-grid-cell:focus-within {
+ outline: none;
+}
+
+/* states */
+/* ----------------------------------------------- */
+
+.f-data-grid-cell.is-disabled {
+ cursor: not-allowed;
+}
+
+.f-data-grid-cell.is-disabled > * {
+ opacity: 0.5;
+}
+
+.f-data-grid-cell.is-selected::after {
+ content: ' ';
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ pointer-events: none;
+ border: var(--f-data-grid-selected-width) solid var(--f-color-accent);
+}
+
+/* pin first */
+/* ----------------------------------------------- */
+
+.f-data-grid.pin-first .f-data-grid-row .f-data-grid-cell:nth-child(2) {
+ position: sticky !important;
+ left: 0;
+ background: var(--f-data-grid-background);
+ z-index: 10;
+}
+
+.f-data-grid.pin-first .f-data-grid-row .f-data-grid-cell.is-selected:nth-child(2) {
+ z-index: 11;
+}
+
+.f-data-grid.pin-first .f-data-grid-row .f-data-grid-header-cell:nth-child(2) {
+ position: sticky !important;
+ left: 0;
+ background: var(--f-data-grid-background-header);
+ z-index: 2;
+}
+
+.f-data-grid.pin-first .f-data-grid-row.is-selected .f-data-grid-cell:nth-child(2) {
+ background: var(--f-data-grid-background-selected);
+}
+
+.f-data-grid.pin-first:not(.is-dragging) .f-data-grid-row:hover .f-data-grid-cell:nth-child(2) {
+ background: var(--f-data-grid-background-hover);
+}
+
+/* pin last */
+/* ----------------------------------------------- */
+
+.f-data-grid.pin-last .f-data-grid-row .f-data-grid-header-cell:nth-last-child(1),
+.f-data-grid.pin-last .f-data-grid-row .f-data-grid-cell:nth-last-child(1) {
+ position: sticky;
+ right: 0px;
+ background: var(--f-data-grid-background);
+ z-index: 10;
+ border-left: var(--f-data-grid-border-right);
+ margin-left: -1px;
+}
+
+.f-data-grid.pin-last .f-data-grid-row .f-data-grid-cell.is-selected:nth-last-child(1) {
+ z-index: 11;
+}
+
+.f-data-grid.pin-last .f-data-grid-row .f-data-grid-header-cell:nth-last-child(1) {
+ background: var(--f-data-grid-background-header);
+}
+
+.f-data-grid.pin-last .f-data-grid-row.is-selected .f-data-grid-cell:nth-last-child(1) {
+ background: var(--f-data-grid-background-selected);
+}
+
+.f-data-grid.pin-last:not(.is-dragging) .f-data-grid-row:hover .f-data-grid-cell:nth-last-child(1) {
+ background: var(--f-data-grid-background-hover);
+}
+
+/* gutter */
+
+:root {
+ --f-data-grid-gutter-number-display: block;
+ --f-data-grid-gutter-number-left: 0px;
+ --f-data-grid-gutter-number-size: var(--f-font-size-md);
+}
+
+.f-data-grid-row__gutter-number {
+ display: var(--f-data-grid-gutter-number-display);
+ position: absolute;
+ left: var(--f-data-grid-gutter-number-left);
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none;
+ user-select: none;
+ font-size: var(--f-data-grid-gutter-number-size);
+ color: var(--f-color-text-weakest);
+}
+
+.f-data-grid-row > .f-data-grid-cell:first-child {
+ pointer-events: none;
+ user-select: none;
+}
+
+.f-data-grid-row > .f-data-grid-cell:first-child .f-checkbox {
+ pointer-events: all;
+}
+
+/* header cell */
+/* ----------------------------------------------- */
+
+.f-data-grid-header-cell {
+ position: relative;
+ user-select: none;
+ border-right: var(--f-data-grid-border-right);
+ background: var(--f-data-grid-background-header);
+}
+
+/* default header cell */
+/* ----------------------------------------------- */
+
+.f-data-grid-header-cell-component {
+ position: absolute;
+ cursor: pointer;
+ inset: 0;
+ justify-content: flex-start;
+ padding: 0 var(--f-space-3);
+ gap: var(--f-space-2);
+}
+
+.f-data-grid-header-cell-component:hover {
+ background: var(--f-data-grid-background-header-hover);
+}
+
+.f-data-grid-header-cell-component .f-icon {
+ color: var(--f-color-text-weak);
+}
+
+.f-data-grid-header-cell-component .f-data-grid-header-cell-component__sort-icon {
+ stroke-width: 3px;
+ color: var(--f-color-text-weak);
+}
+
+.f-data-grid-header-cell-component__text {
+ flex: 1;
+ justify-content: flex-start;
+ overflow: hidden;
+ white-space: nowrap;
+ position: relative;
+}
+
+/* default text cell */
+/* ----------------------------------------------- */
+
+.f-data-grid-cell-component {
+ position: absolute;
+ inset: 0;
+ justify-content: flex-start;
+ padding: 0 var(--f-space-3);
+ background: transparent;
+ overflow: hidden;
+}
+
+.f-data-grid-cell-component.is-edit input {
+ padding: 0 var(--f-space-3);
+ border: 0;
+ position: absolute;
+ background: transparent;
+ inset: 0;
+ font-family: var(--f-font-body);
+ color: var(--f-color-text);
+ outline: none;
+}
+
+.f-data-grid-cell-component.is-edit {
+}
+
+/* colors */
+
+.f-data-grid-cell-component.is-color,
+.f-data-grid-cell-component.is-color.is-edit > *,
+.f-data-grid-cell-component.is-color > * {
+ color: inherit;
+}
+
+/* dragging */
+/* ----------------------------------------------- */
+
+.f-data-grid.is-dragging .f-data-grid-cell > *,
+.f-data-grid.is-dragging .f-data-grid-header-cell > * {
+ pointer-events: none;
+}
+
+.f-data-grid.is-dragging,
+.f-data-grid.is-dragging * {
+ cursor: grabbing !important;
+}
+
+.f-data-grid-row .f-data-grid-cell.is-col-dragged::before,
+.f-data-grid-row .f-data-grid-header-cell.is-col-dragged::before {
+ content: " ";
+ position: absolute;
+ pointer-events: none;
+ background: var(--f-color-accent);
+ z-index: 1000;
+ top: 0px;
+ height: calc(100% + 1px);
+ right: -1px;
+ width: 0.2rem;
+}
+
+.f-data-grid-row.is-row-dragged::before {
+ content: " ";
+ position: absolute;
+ pointer-events: none;
+ background: var(--f-color-accent);
+ z-index: 1000;
+ top: -1px;
+ height: 0.2rem;
+ right: 0px;
+ width: 100%;
+}
diff --git a/packages/core/src/data-grid/data-grid.provider.tsx b/packages/core/src/data-grid/data-grid.provider.tsx
new file mode 100644
index 00000000..f6da2953
--- /dev/null
+++ b/packages/core/src/data-grid/data-grid.provider.tsx
@@ -0,0 +1,271 @@
+import { documentObject, getKey, useEvent, useId, windowObject } from '../'
+import React, {
+ FunctionComponent,
+ ReactElement,
+ ReactNode,
+ createContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react'
+import { dispatchDataGridEvent, useDataGridEvent } from './data-grid.util'
+import { FOLD_DATA_GRID_ROW_HEIGHT } from './data-grid'
+
+export type DataGridProviderProps = {
+ id?: string
+ columnWidths: any[]
+ columnTypes?: (FunctionComponent | undefined)[]
+ defaultCellSelection?: any
+ defaultRowSelection?: any
+ draggableColumns?: boolean
+ draggableRows?: boolean
+ maxRowsSelectable?: number
+ singleRowSelect?: boolean
+ onSelect?: (value) => void
+ children?: ReactNode
+}
+
+export const DataGridContext = createContext({})
+
+export const DataGridProvider = (props: DataGridProviderProps) => {
+ const {
+ id,
+ children,
+ defaultCellSelection = {},
+ defaultRowSelection = {},
+ draggableColumns,
+ draggableRows,
+ maxRowsSelectable = 0,
+ singleRowSelect = false,
+ columnWidths,
+ columnTypes,
+ onSelect,
+ } = props
+ const ref = useRef(null)
+ const instanceId = useId(id)
+ const selectionLockRef = useRef(false)
+ const iid = instanceId
+ const cellSelectionCache = useRef(null)
+ const [isShift, setIsShift] = useState(false)
+ const [dragCol, setDragCol] = useState(-1)
+ const [dragRow, setDragRow] = useState(-1)
+ const [cellSelection, setCellSelection] = useState(defaultCellSelection)
+ const [rowSelection, setRowSelection] = useState(defaultRowSelection)
+ const [totalRows, setTotalRows] = useState(0)
+ const [totalColumns, setTotalColumns] = useState(0)
+ const { allRowsSelected, rowSelectionIndeterminate } = useMemo(() => {
+ const totalSelected = Object.keys(rowSelection).length
+ const allRowsSelected = totalSelected == totalRows
+ const rowSelectionIndeterminate = totalSelected > 0 && totalSelected != totalRows
+ return { allRowsSelected, rowSelectionIndeterminate }
+ }, [rowSelection, totalRows])
+ const styles: any = useMemo(() => {
+ return { '--f-data-grid-columns': `var(--f-data-grid-gutter-width) ${columnWidths.join(' ')}` }
+ }, [columnWidths])
+
+ const selectionLock = (locked) => {
+ selectionLockRef.current = locked
+ }
+
+ const refocus = () => {
+ ref.current.focus()
+ }
+
+ const handleKeyUp = (e) => {
+ setIsShift(false)
+ }
+
+ const handleBlur = (e) => {
+ cellSelectionCache.current = cellSelection
+ }
+
+ const handleDocumentClick = (e) => {
+ if (!ref.current.contains(e?.target)) {
+ setCellSelection({})
+ }
+ }
+
+ const handleFocus = (e) => {
+ if (cellSelectionCache.current) {
+ setCellSelection(cellSelectionCache.current)
+ cellSelectionCache.current = null
+ }
+ }
+
+ const handleKeyDown = (e) => {
+ const { isShift, isEscape } = getKey(e)
+ setIsShift(isShift)
+ if (isEscape) {
+ // TODO: is this correct UX?
+ // setCellSelection({})
+ }
+ }
+
+ const scrollIntoView = (row, col) => {
+ const rowHeight = windowObject[FOLD_DATA_GRID_ROW_HEIGHT]
+ const id = instanceId + '-scrollview'
+
+ // only virtual lists will have row height
+ // the default list will be scrolled used the focus() logic on each cell
+ if (!!rowHeight) {
+ const container = documentObject.getElementById(id)
+ const amount = container.offsetHeight / 2
+ const top = row * rowHeight
+
+ // scroll up
+ // add rowHeight to make it go right to the edge
+ if (top + rowHeight < container.scrollTop) {
+ container.scrollTo({
+ top: top - amount,
+ behaviour: 'smooth',
+ })
+ }
+
+ // scroll down
+ if (top > container.scrollTop + container.offsetHeight) {
+ container.scrollTo({
+ top: top + amount,
+ behaviour: 'smooth',
+ })
+ }
+ }
+ }
+
+ const handleKeyDownContainer = (e) => {
+ const { isLeft, isRight, isUp, isDown } = getKey(e)
+
+ if ((isLeft || isRight || isUp || isDown) && selectionLockRef.current == false) {
+ e.preventDefault()
+ e.stopPropagation()
+
+ const selection = Object.keys(cellSelection)
+
+ if (selection[0]) {
+ const parts = selection[0].split('-')
+ const row = +parts[1]
+ const col = +parts[2]
+
+ if (isDown) {
+ const nextRow = row + 1 > totalRows ? 0 : row + 1
+ setCellSelection({ [`c-${nextRow}-${col}`]: true })
+ scrollIntoView(nextRow, col)
+ }
+
+ if (isUp) {
+ const prevRow = row - 1 < 0 ? totalRows - 1 : row - 1
+ setCellSelection({ [`c-${prevRow}-${col}`]: true })
+ scrollIntoView(prevRow, col)
+ }
+
+ if (isRight) {
+ const nextCol = col + 1 > totalColumns ? 0 : col + 1
+ setCellSelection({ [`c-${row}-${nextCol}`]: true })
+ scrollIntoView(row, nextCol)
+ }
+
+ if (isLeft) {
+ const prevCol = col - 1 < 0 ? totalColumns - 1 : col - 1
+ setCellSelection({ [`c-${row}-${prevCol}`]: true })
+ scrollIntoView(row, prevCol)
+ }
+ } else if (cellSelectionCache.current) {
+ setCellSelection(cellSelectionCache.current)
+ } else {
+ setCellSelection({ 'c-0-0': true })
+ }
+ }
+ }
+
+ const handleCellSelection = (selection) => {
+ setCellSelection(isShift ? { ...cellSelection, ...selection } : selection)
+ }
+
+ const updateRowSelection = (selection) => {
+ setRowSelection(selection)
+ dispatchDataGridEvent('row-selection', { instanceId, selection })
+ }
+
+ const selectAllRows = () => {
+ if (allRowsSelected) {
+ updateRowSelection({})
+ } else {
+ // if there is max rows specified
+ // + max rows must = total rows
+ if (!!maxRowsSelectable && maxRowsSelectable != totalRows) return
+ const ids = {}
+ new Array(totalRows).fill(null).map((_, index) => {
+ const id = `r-${index}`
+ ids[id] = true
+ })
+ updateRowSelection(ids)
+ }
+ }
+
+ const handleClearRowSelection = ({ detail: { instanceId } }) => {
+ if (iid == instanceId) setRowSelection({})
+ }
+
+ const handleSelectRows = ({ detail: { instanceId, ...rest } }) => {
+ if (iid == instanceId) setRowSelection({ ...rest })
+ }
+
+ const handleSelectCells = ({ detail: { instanceId, ...rest } }) => {
+ if (iid == instanceId) setCellSelection({ ...rest })
+ }
+
+ useDataGridEvent('clear-row-selection', handleClearRowSelection)
+ useDataGridEvent('select-rows', handleSelectRows)
+ useDataGridEvent('select-cells', handleSelectCells)
+
+ useEvent('keydown', handleKeyDown)
+ useEvent('keyup', handleKeyUp)
+ useEvent('click', handleDocumentClick)
+
+ useEffect(() => {
+ if (onSelect) {
+ onSelect({
+ rows: rowSelection,
+ cells: cellSelection,
+ })
+ }
+ }, [rowSelection, cellSelection])
+
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/packages/core/src/data-grid/data-grid.stories.tsx b/packages/core/src/data-grid/data-grid.stories.tsx
new file mode 100644
index 00000000..6d950a6f
--- /dev/null
+++ b/packages/core/src/data-grid/data-grid.stories.tsx
@@ -0,0 +1,276 @@
+import {
+ Button,
+ DataGrid, DataGridHeader, DataGridProvider, DataGridTypes,
+ FIBin,
+ Icon,
+ Menu,
+ MenuProvider,
+ MenuSection,
+ Portal,
+ Text,
+ View,
+ dataGridState, dispatchDataGridEvent,
+ useDialog
+} from '@fold-dev/core'
+import React, { useState } from 'react'
+import * as data from '../../../../dummy-data'
+
+export default {
+ title: 'Components/DataGrid',
+ component: <>,
+ excludeStories: 'docs',
+}
+
+export const docs = {
+ title: 'Data Grid',
+ subtitle: 'A robust & flexible Data Grid component engineered to handle diverse datasets with ease.',
+ description:
+ 'The Data Grid component enables you to customize & extend virtually every part of it, enabling you accommodate a wide variety of data types.',
+ experimental: true,
+}
+
+export const Usage = () => {
+ const [columnWidths, setColumnWidths] = useState(data.widths)
+ const [columns, setColumns] = useState(data.columns)
+ const [footerColumns, setFooterColumns] = useState(data.footer)
+ const [columnTypes, setColumnTypes] = useState(data.columnTypes)
+ //const [rows, setRows] = useState(data.rows)
+ const [rows, setRows] = useState(data.lessRows)
+ const { setDialog, closeDialog } = useDialog()
+
+ const handleColumnMove = ({ origin, target }) => {
+ dataGridState({
+ columnWidths,
+ setColumnWidths,
+ columnTypes,
+ setColumnTypes,
+ columns,
+ setColumns,
+ footerColumns,
+ setFooterColumns,
+ rows,
+ setRows,
+ }).handleColumnMove({ origin, target })
+ }
+
+ const handleRowMove = ({ origin, target }) => {
+ dataGridState({
+ columnWidths,
+ setColumnWidths,
+ columnTypes,
+ setColumnTypes,
+ columns,
+ setColumns,
+ footerColumns,
+ setFooterColumns,
+ rows,
+ setRows,
+ }).handleRowMove({ origin, target })
+ }
+
+ const handleColumnClick = (index, column: DataGridTypes.Column) => {
+ dataGridState({
+ columnWidths,
+ setColumnWidths,
+ columnTypes,
+ setColumnTypes,
+ columns,
+ setColumns,
+ footerColumns,
+ setFooterColumns,
+ rows,
+ setRows,
+ }).handleColumnClick(index, column)
+ }
+
+ const handleCellUpdate = ({ value, row, col }) => {
+ dataGridState({
+ columnWidths,
+ setColumnWidths,
+ columnTypes,
+ setColumnTypes,
+ columns,
+ setColumns,
+ footerColumns,
+ setFooterColumns,
+ rows,
+ setRows,
+ }).handleCellUpdate({ value, row, col })
+ }
+
+ const handleCellDelete = ({ row, col }) => {
+ dataGridState({
+ columnWidths,
+ setColumnWidths,
+ columnTypes,
+ setColumnTypes,
+ columns,
+ setColumns,
+ footerColumns,
+ setFooterColumns,
+ rows,
+ setRows,
+ }).handleCellDelete({ row, col })
+ }
+
+ return (
+ <>
+
+ (
+
+ )}>
+ null}>
+
+ setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w)))
+ }
+ />
+ }
+ footer={
+
+ }
+ pinFirst
+ pinLast
+ onCellUpdate={handleCellUpdate}
+ onCellDelete={handleCellDelete}
+ onColumnMove={handleColumnMove}
+ onRowMove={handleRowMove}
+ onScroll={(e) => null}
+ toolbar={({ rowSelection, cellSelection }) => (
+
+
+ {Object.values(rowSelection).length}{' '}
+ {Object.values(rowSelection).length == 1 ? 'row' : 'rows'} selected
+
+ {
+ setDialog({
+ title: 'Are you sure?',
+ description: 'This action cannot be undone.',
+ portal: Portal,
+ footer: (
+
+
+
+
+ ),
+ })
+ }}
+ />
+
+ )}
+ />
+
+
+
+ )
+}
diff --git a/packages/core/src/data-grid/data-grid.tsx b/packages/core/src/data-grid/data-grid.tsx
new file mode 100644
index 00000000..eed1f5ef
--- /dev/null
+++ b/packages/core/src/data-grid/data-grid.tsx
@@ -0,0 +1,258 @@
+import {
+ CoreViewProps,
+ View,
+ classNames,
+ documentObject,
+ positionDOMElement,
+ useDrag,
+ useEvent,
+} from '../'
+import { globalCursor, windowObject } from '../helpers'
+import React, { ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { DataGridRow } from './data-grid-row'
+import { DataGridContext } from './data-grid.provider'
+import { DataGridTypes } from './data-grid.types'
+import { useDataGridEvent } from './data-grid.util'
+
+export type DataGridProps = {
+ variant?: 'virtual' | 'default'
+ virtual?: {
+ rows: number
+ rowHeight: number
+ paddingTop: number
+ paddingBottom: number
+ }
+ hideCheckbox?: boolean
+ useFoldScroll?: boolean
+ rows: DataGridTypes.Cell[][]
+ footer?: ReactNode
+ header?: ReactNode
+ pinFirst?: boolean
+ pinLast?: boolean
+ onCellUpdate?: (value) => void
+ onCellDelete?: (value) => void
+ onColumnMove?: (value) => void
+ onRowMove?: (value) => void
+ onScroll?: (value) => void
+ toolbar?: (selection: any) => ReactNode
+} & CoreViewProps
+
+let xCache = 0
+let yCache = 0
+let moveThreshold = 2
+
+export const FOLD_DATA_GRID_GHOST = 'FOLD_DATA_GRID_GHOST'
+export const FOLD_DATA_GRID_DRAG = 'FOLD_DATA_GRID_DRAG'
+export const FOLD_DATA_GRID_ROW_HEIGHT = 'FOLD_DATA_GRID_ROW_HEIGHT'
+
+windowObject[FOLD_DATA_GRID_GHOST] = null
+windowObject[FOLD_DATA_GRID_DRAG] = null
+windowObject[FOLD_DATA_GRID_ROW_HEIGHT] = null
+
+export const DataGrid = (props: DataGridProps) => {
+ const {
+ variant = 'default',
+ virtual = {
+ rows: 10,
+ rowHeight: 40,
+ paddingTop: 40,
+ paddingBottom: 0,
+ },
+ hideCheckbox,
+ useFoldScroll = true,
+ rows = [],
+ header,
+ footer,
+ pinFirst,
+ pinLast,
+ onCellUpdate,
+ onCellDelete,
+ onColumnMove,
+ onRowMove,
+ onScroll,
+ toolbar,
+ style = {},
+ ...rest
+ } = props
+ const {
+ cellSelection,
+ setCellSelection,
+ rowSelection,
+ setRowSelection,
+ dragRow,
+ setDragRow,
+ dragCol,
+ setDragCol,
+ setTotalRows,
+ instanceId,
+ } = useContext(DataGridContext)
+ const iid = instanceId
+ const isDefault = variant == 'default'
+ const isVirtual = variant == 'virtual'
+ const scrollRef = useRef(null)
+ const { getGhostElement } = useDrag()
+ const [scrollTop, setScrollTop] = useState(0)
+ const isDragging = useMemo(() => dragCol != -1 || dragRow != -1, [dragRow, dragCol])
+ const className = classNames(
+ {
+ 'f-data-grid': true,
+ 'f-scrollbar': useFoldScroll,
+ 'is-default': isDefault,
+ 'is-dragging': isDragging,
+ 'pin-first': pinFirst,
+ 'pin-last': pinLast,
+ },
+ [props.className]
+ )
+
+ const handleVirtualScroll = (e) => {
+ setScrollTop(e.currentTarget.scrollTop)
+ if (onScroll) onScroll(e)
+ }
+
+ const handleMouseUp = (e) => {
+ const origin = windowObject[FOLD_DATA_GRID_DRAG]
+
+ if (dragCol != -1) {
+ onColumnMove({
+ origin,
+ target: origin < dragCol ? dragCol - 1 : dragCol,
+ })
+ }
+ if (dragRow != -1) {
+ onRowMove({
+ origin,
+ target: origin < dragRow ? dragRow - 1 : dragRow,
+ })
+ }
+
+ // reset drag parameters
+ setDragCol(-1)
+ setDragRow(-1)
+ const ghostElement = getGhostElement()
+ ghostElement.style.display = 'none'
+ }
+
+ const handleMouseMove = (e) => {
+ if (!isDragging) return
+
+ const rowDragged = dragRow != -1
+ const colDragged = dragCol != -1
+ let direction: 'right' | 'left' | 'up' | 'down' = undefined
+
+ const mouseY = e.clientY
+ const mouseX = e.clientX
+
+ if (mouseX < xCache - moveThreshold) direction = 'left'
+ if (mouseX > xCache - moveThreshold) direction = 'right'
+ if (mouseY < yCache - moveThreshold) direction = 'up'
+ if (mouseY > yCache - moveThreshold) direction = 'down'
+
+ xCache = e.pageX
+ yCache = e.pageY
+
+ const element = documentObject.elementFromPoint(mouseX, mouseY)
+ const index = rowDragged ? +element.dataset.row : colDragged ? +element.dataset.col : -1
+
+ if (colDragged) setDragCol(index)
+ if (rowDragged) setDragRow(index)
+
+ const ghostElement = getGhostElement()
+ ghostElement.style.display = 'block'
+ ghostElement.style.opacity = '1'
+
+ positionDOMElement(mouseX, mouseY, ghostElement, () => {})
+ }
+
+ const handleCellDelete = ({ detail: { instanceId, ...rest } }) => {
+ if (iid == instanceId) onCellDelete({ ...rest })
+ }
+
+ const handleCellUpdate = ({ detail: { instanceId, ...rest } }) => {
+ if (iid == instanceId) onCellUpdate({ ...rest })
+ }
+
+ const numItems = rows.length
+ const itemHeight = virtual.rowHeight
+ const maxHeight = virtual.rowHeight * (virtual.rows + 1)
+ const innerHeight = numItems * itemHeight + virtual.paddingTop
+ const height = (innerHeight < maxHeight ? innerHeight : maxHeight) + virtual.paddingBottom
+ const startIndex = Math.floor(scrollTop / itemHeight)
+ const endIndex = Math.min(numItems - 1, Math.floor((scrollTop + height) / itemHeight))
+ const items: any = useMemo(() => {
+ const items: any = []
+
+ for (let index = startIndex; index <= endIndex; index++) {
+ items.push(
+
+ )
+ }
+
+ return items
+ }, [startIndex, endIndex, numItems, itemHeight, rows])
+
+ useEvent('mousemove', handleMouseMove)
+ useEvent('mouseup', handleMouseUp)
+
+ useDataGridEvent('delete-cell', handleCellDelete)
+ useDataGridEvent('update-cell', handleCellUpdate)
+
+ useEffect(() => {
+ if (variant == 'virtual') windowObject[FOLD_DATA_GRID_ROW_HEIGHT] = virtual.rowHeight
+ }, [variant])
+
+ useEffect(() => {
+ setTotalRows(rows.length)
+ }, [rows.length])
+
+ return (
+ <>
+
+ {isVirtual && (
+
+
+ {header}
+ {items}
+
+ {footer}
+