prosekit/react/table-handle

Anatomy

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>

Interfaces

TableHandleColumnMenuRootProps

Props for the TableHandleColumnMenuRoot React component.

Properties

defaultOpen?: boolean

Whether the overlay is initially open.

Default

false

open?: boolean | null

Whether the overlay is currently open.

Default

null

disabled?: boolean

Whether the component should ignore user interaction.

Default

false

TableHandleColumnMenuTriggerProps

Props for the TableHandleColumnMenuTrigger React component.

TableHandleColumnPopupProps

Props for the TableHandleColumnPopup React component.

TableHandleColumnPositionerProps

Props for the TableHandleColumnPositioner React component.

Properties

placement?: Placement

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

Default

"top"

strategy?: "fixed" | "absolute"

The strategy to use for positioning

Default

"absolute"

autoUpdate?: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

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

Default

true

hoist?: boolean

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

Default

false

overlap?: boolean

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

Default

false

fitViewport?: boolean

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

Default

false

sameWidth?: boolean

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

Default

false

sameHeight?: boolean

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

Default

false

inline?: boolean

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

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

'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

'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

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

'floating'

altBoundary?: boolean

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

Default

false

TableHandleDragPreviewProps

Props for the TableHandleDragPreview React component.

TableHandleDropIndicatorProps

Props for the TableHandleDropIndicator React component.

TableHandleRootProps

Props for the TableHandleRoot React component.

TableHandleRowMenuRootProps

Props for the TableHandleRowMenuRoot React component.

Properties

defaultOpen?: boolean

Whether the overlay is initially open.

Default

false

open?: boolean | null

Whether the overlay is currently open.

Default

null

disabled?: boolean

Whether the component should ignore user interaction.

Default

false

TableHandleRowMenuTriggerProps

Props for the TableHandleRowMenuTrigger React component.

TableHandleRowPopupProps

Props for the TableHandleRowPopup React component.

TableHandleRowPositionerProps

Props for the TableHandleRowPositioner React component.

Properties

placement?: Placement

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

Default

"left"

strategy?: "fixed" | "absolute"

The strategy to use for positioning

Default

"absolute"

autoUpdate?: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

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

Default

true

hoist?: boolean

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

Default

false

overlap?: boolean

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

Default

false

fitViewport?: boolean

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

Default

false

sameWidth?: boolean

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

Default

false

sameHeight?: boolean

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

Default

false

inline?: boolean

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

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

'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

'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

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

'floating'

altBoundary?: boolean

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

Default

false

Variables

TableHandleColumnMenuRoot

const TableHandleColumnMenuRoot: ForwardRefExoticComponent<TableHandleColumnMenuRootProps & HTMLAttributes<TableHandleColumnMenuRootElement> & RefAttributes<TableHandleColumnMenuRootElement>>: A React component that renders an prosekit-table-handle-column-menu-root custom element.

TableHandleColumnMenuTrigger

const TableHandleColumnMenuTrigger: ForwardRefExoticComponent<TableHandleColumnMenuTriggerProps & HTMLAttributes<TableHandleColumnMenuTriggerElement> & RefAttributes<TableHandleColumnMenuTriggerElement>>: A React component that renders an prosekit-table-handle-column-menu-trigger custom element.

TableHandleColumnPopup

const TableHandleColumnPopup: ForwardRefExoticComponent<TableHandleColumnPopupProps & HTMLAttributes<TableHandleColumnPopupElement> & RefAttributes<TableHandleColumnPopupElement>>: A React component that renders an prosekit-table-handle-column-popup custom element.

TableHandleColumnPositioner

const TableHandleColumnPositioner: ForwardRefExoticComponent<TableHandleColumnPositionerProps & HTMLAttributes<TableHandleColumnPositionerElement> & RefAttributes<TableHandleColumnPositionerElement>>: A React component that renders an prosekit-table-handle-column-positioner custom element.

TableHandleDragPreview

const TableHandleDragPreview: ForwardRefExoticComponent<TableHandleDragPreviewProps & HTMLAttributes<TableHandleDragPreviewElement> & RefAttributes<TableHandleDragPreviewElement>>: A React component that renders an prosekit-table-handle-drag-preview custom element.

TableHandleDropIndicator

const TableHandleDropIndicator: ForwardRefExoticComponent<TableHandleDropIndicatorProps & HTMLAttributes<TableHandleDropIndicatorElement> & RefAttributes<TableHandleDropIndicatorElement>>: A React component that renders an prosekit-table-handle-drop-indicator custom element.

TableHandleRoot

const TableHandleRoot: ForwardRefExoticComponent<TableHandleRootProps & HTMLAttributes<TableHandleRootElement> & RefAttributes<TableHandleRootElement>>: A React component that renders an prosekit-table-handle-root custom element.

TableHandleRowMenuRoot

const TableHandleRowMenuRoot: ForwardRefExoticComponent<TableHandleRowMenuRootProps & HTMLAttributes<TableHandleRowMenuRootElement> & RefAttributes<TableHandleRowMenuRootElement>>: A React component that renders an prosekit-table-handle-row-menu-root custom element.

TableHandleRowMenuTrigger

const TableHandleRowMenuTrigger: ForwardRefExoticComponent<TableHandleRowMenuTriggerProps & HTMLAttributes<TableHandleRowMenuTriggerElement> & RefAttributes<TableHandleRowMenuTriggerElement>>: A React component that renders an prosekit-table-handle-row-menu-trigger custom element.

TableHandleRowPopup

const TableHandleRowPopup: ForwardRefExoticComponent<TableHandleRowPopupProps & HTMLAttributes<TableHandleRowPopupElement> & RefAttributes<TableHandleRowPopupElement>>: A React component that renders an prosekit-table-handle-row-popup custom element.

TableHandleRowPositioner

const TableHandleRowPositioner: ForwardRefExoticComponent<TableHandleRowPositionerProps & HTMLAttributes<TableHandleRowPositionerElement> & RefAttributes<TableHandleRowPositionerElement>>: A React component that renders an prosekit-table-handle-row-positioner custom element.