prosekit/react/table-handle

import {
  TableHandleColumnMenuRoot,
  TableHandleColumnMenuTrigger,
  TableHandleColumnPopup,
  TableHandleColumnPositioner,
  TableHandleDragPreview,
  TableHandleDropIndicator,
  TableHandleRoot,
  TableHandleRowMenuRoot,
  TableHandleRowMenuTrigger,
  TableHandleRowPopup,
  TableHandleRowPositioner,
} from 'prosekit/react/table-handle'
import {
  MenuItem,
  MenuPopup,
  MenuPositioner,
} from 'prosekit/react/menu'

<TableHandleRoot>
  <TableHandleDragPreview />
  <TableHandleDropIndicator />
  <TableHandleColumnPositioner>
    <TableHandleColumnPopup>
      <TableHandleColumnMenuRoot>
        <TableHandleColumnMenuTrigger>...</TableHandleColumnMenuTrigger>
        <MenuPositioner>
          <MenuPopup>
            <MenuItem>...</MenuItem>
          </MenuPopup>
        </MenuPositioner>
      </TableHandleColumnMenuRoot>
    </TableHandleColumnPopup>
  </TableHandleColumnPositioner>
  <TableHandleRowPositioner>
    <TableHandleRowPopup>
      <TableHandleRowMenuRoot>
        <TableHandleRowMenuTrigger>...</TableHandleRowMenuTrigger>
        <MenuPositioner>
          <MenuPopup>
            <MenuItem>...</MenuItem>
          </MenuPopup>
        </MenuPositioner>
      </TableHandleRowMenuRoot>
    </TableHandleRowPopup>
  </TableHandleRowPositioner>
</TableHandleRoot>

Props for the TableHandleColumnMenuRoot React component.

defaultOpen?: boolean

Whether the overlay is initially open.

Default

Section titled “Default”

false

open?: boolean | null

Whether the overlay is currently open.

Default

Section titled “Default”

null

disabled?: boolean

Whether the component should ignore user interaction.

Default

Section titled “Default”

false

onOpenChange?: (event: OpenChangeEvent) => void

Emitted when the menu is opened or closed.

onOpenChangeComplete?: (event: OpenChangeCompleteEvent) => void

Emitted after the menu finishes opening or closing, including its animations.

Props for the TableHandleColumnMenuTrigger React component.

Props for the TableHandleColumnPopup React component.

Props for the TableHandleColumnPositioner React component.

placement?: Placement

The placement of the popover, relative to the hovered table cell.

Default

Section titled “Default”

"top"

strategy?: "fixed" | "absolute"

The strategy to use for positioning

Default

Section titled “Default”

"absolute"

autoUpdate?: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

Section titled “See”

https://floating-ui.com/docs/autoUpdate

Default

Section titled “Default”

true

hoist?: boolean

Whether to use the browser Popover API to place the floating element on top of other page content.

Default

Section titled “Default”

false

overlap?: boolean

Whether the floating element can overlap the reference element to keep it in view.

Default

Section titled “Default”

false

fitViewport?: boolean

Whether to constrain the floating element’s width and height to not exceed the viewport.

Default

Section titled “Default”

false

sameWidth?: boolean

Whether to constrain the floating element’s width so that it matches the reference element.

Default

Section titled “Default”

false

sameHeight?: boolean

Whether to constrain the floating element’s height so that it matches the reference element.

Default

Section titled “Default”

false

inline?: boolean

Whether to improve positioning for inline reference elements that span over multiple lines.

Default

Section titled “Default”

false

boundary?: Boundary

Describes the clipping element(s) or area that overflow will be checked relative to. Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.

Default

Section titled “Default”

'clippingAncestors'

rootBoundary?: RootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Default

Section titled “Default”

'viewport'

overflowPadding?: number

Describes the virtual padding around the boundary to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#padding for more information.

Default

Section titled “Default”

4

elementContext?: ElementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Default

Section titled “Default”

'floating'

altBoundary?: boolean

Whether to check the alternate elementContext’s boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Default

Section titled “Default”

false

Props for the TableHandleDragPreview React component.

Props for the TableHandleDropIndicator React component.

Props for the TableHandleRoot React component.

Props for the TableHandleRowMenuRoot React component.

defaultOpen?: boolean

Whether the overlay is initially open.

Default

Section titled “Default”

false

open?: boolean | null

Whether the overlay is currently open.

Default

Section titled “Default”

null

disabled?: boolean

Whether the component should ignore user interaction.

Default

Section titled “Default”

false

onOpenChange?: (event: OpenChangeEvent) => void

Emitted when the menu is opened or closed.

onOpenChangeComplete?: (event: OpenChangeCompleteEvent) => void

Emitted after the menu finishes opening or closing, including its animations.

Props for the TableHandleRowMenuTrigger React component.

Props for the TableHandleRowPopup React component.

Props for the TableHandleRowPositioner React component.

placement?: Placement

The placement of the popover, relative to the hovered table cell.

Default

Section titled “Default”

"left"

strategy?: "fixed" | "absolute"

The strategy to use for positioning

Default

Section titled “Default”

"absolute"

autoUpdate?: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

Section titled “See”

https://floating-ui.com/docs/autoUpdate

Default

Section titled “Default”

true

hoist?: boolean

Whether to use the browser Popover API to place the floating element on top of other page content.

Default

Section titled “Default”

false

overlap?: boolean

Whether the floating element can overlap the reference element to keep it in view.

Default

Section titled “Default”

false

fitViewport?: boolean

Whether to constrain the floating element’s width and height to not exceed the viewport.

Default

Section titled “Default”

false

sameWidth?: boolean

Whether to constrain the floating element’s width so that it matches the reference element.

Default

Section titled “Default”

false

sameHeight?: boolean

Whether to constrain the floating element’s height so that it matches the reference element.

Default

Section titled “Default”

false

inline?: boolean

Whether to improve positioning for inline reference elements that span over multiple lines.

Default

Section titled “Default”

false

boundary?: Boundary

Describes the clipping element(s) or area that overflow will be checked relative to. Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.

Default

Section titled “Default”

'clippingAncestors'

rootBoundary?: RootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Default

Section titled “Default”

'viewport'

overflowPadding?: number

Describes the virtual padding around the boundary to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#padding for more information.

Default

Section titled “Default”

4

elementContext?: ElementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Default

Section titled “Default”

'floating'

altBoundary?: boolean

Whether to check the alternate elementContext’s boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Default

Section titled “Default”

false

const TableHandleColumnMenuRoot: ForwardRefExoticComponent<TableHandleColumnMenuRootProps & HTMLAttributes<TableHandleColumnMenuRootElement> & RefAttributes<TableHandleColumnMenuRootElement>>

A React component that renders an prosekit-table-handle-column-menu-root custom element.

const TableHandleColumnMenuTrigger: ForwardRefExoticComponent<TableHandleColumnMenuTriggerProps & HTMLAttributes<TableHandleColumnMenuTriggerElement> & RefAttributes<TableHandleColumnMenuTriggerElement>>

A React component that renders an prosekit-table-handle-column-menu-trigger custom element.

const TableHandleColumnPopup: ForwardRefExoticComponent<TableHandleColumnPopupProps & HTMLAttributes<TableHandleColumnPopupElement> & RefAttributes<TableHandleColumnPopupElement>>

A React component that renders an prosekit-table-handle-column-popup custom element.

const TableHandleColumnPositioner: ForwardRefExoticComponent<TableHandleColumnPositionerProps & HTMLAttributes<TableHandleColumnPositionerElement> & RefAttributes<TableHandleColumnPositionerElement>>

A React component that renders an prosekit-table-handle-column-positioner custom element.

const TableHandleDragPreview: ForwardRefExoticComponent<TableHandleDragPreviewProps & HTMLAttributes<TableHandleDragPreviewElement> & RefAttributes<TableHandleDragPreviewElement>>

A React component that renders an prosekit-table-handle-drag-preview custom element.

const TableHandleDropIndicator: ForwardRefExoticComponent<TableHandleDropIndicatorProps & HTMLAttributes<TableHandleDropIndicatorElement> & RefAttributes<TableHandleDropIndicatorElement>>

A React component that renders an prosekit-table-handle-drop-indicator custom element.

const TableHandleRoot: ForwardRefExoticComponent<TableHandleRootProps & HTMLAttributes<TableHandleRootElement> & RefAttributes<TableHandleRootElement>>

A React component that renders an prosekit-table-handle-root custom element.

const TableHandleRowMenuRoot: ForwardRefExoticComponent<TableHandleRowMenuRootProps & HTMLAttributes<TableHandleRowMenuRootElement> & RefAttributes<TableHandleRowMenuRootElement>>

A React component that renders an prosekit-table-handle-row-menu-root custom element.

const TableHandleRowMenuTrigger: ForwardRefExoticComponent<TableHandleRowMenuTriggerProps & HTMLAttributes<TableHandleRowMenuTriggerElement> & RefAttributes<TableHandleRowMenuTriggerElement>>

A React component that renders an prosekit-table-handle-row-menu-trigger custom element.

const TableHandleRowPopup: ForwardRefExoticComponent<TableHandleRowPopupProps & HTMLAttributes<TableHandleRowPopupElement> & RefAttributes<TableHandleRowPopupElement>>

A React component that renders an prosekit-table-handle-row-popup custom element.

const TableHandleRowPositioner: ForwardRefExoticComponent<TableHandleRowPositionerProps & HTMLAttributes<TableHandleRowPositionerElement> & RefAttributes<TableHandleRowPositionerElement>>

A React component that renders an prosekit-table-handle-row-positioner custom element.