Misc

Cell

Components

• Props

---

CellProps

CellProps = Props

---

Column

Components

• Props

---

ColumnGroup

Components

• Props

---

ColumnGroupHeader

Components

• Props

---

ColumnGroupHeaderProps

ColumnGroupHeaderProps = Props

---

ColumnHeader

Components

• Props

---

ColumnHeaderChildren

ColumnHeaderChildren = ColumnHeaderRenderFunction | React.ReactElement | readonly ColumnHeaderChild[]

---

ColumnHeaderProps

ColumnHeaderProps = Props

---

columns$

const columns$: NodeRef<Map<string, ColumnInfo>>

---

columnWidths$

const columnWidths$: NodeRef<Map<string, number>>

---

DispatchModelActionPayload

Properties

action

string

---

payload?: unknown

---

EngineRef

A reactive ref that holds an engine instance. Created by useEngineRef. Pass it to EngineProvider via the engineRef prop, then use it with the useRemote* hooks to access the engine from anywhere in the component tree.

Remarks

An EngineRef should only be used with a single EngineProvider. Using the same ref with multiple providers is unsupported.

Properties

current

Engine | null

The current engine instance, or null if not yet available.

---

EngineSource

EngineSource = EngineRef | string

Union type for the engine source parameter accepted by useRemote* hooks. Can be either a string engine ID (for global registry lookup) or an EngineRef.

---

EventEmitter

EventEmitter = (viewId, payload) => void

Parameters

Parameter	Type
viewId	string
payload	unknown

Returns

void

---

GroupHeaderCell

Components

• Props

---

GroupHeaderCellProps

GroupHeaderCellProps = Props

---

HeaderEdge

const HeaderEdge: (props) => null

Parameters

Parameter	Type
props	HeaderSlotProps

Returns

null

---

HeaderEnd

const HeaderEnd: (props) => null

Parameters

Parameter	Type
props	HeaderSlotProps

Returns

null

---

HeaderOverlay

const HeaderOverlay: (props) => null

Parameters

Parameter	Type
props	HeaderSlotProps

Returns

null

---

HeaderSlotCustomComponent

HeaderSlotCustomComponent<P> = React.ComponentType<HeaderSlotRenderParams & P>

Type Parameters

Type Parameter	Default type
P	Record<string, unknown>

---

HeaderSlotRenderFunction

HeaderSlotRenderFunction = (params) => React.ReactNode

Parameters

Parameter	Type
params	HeaderSlotRenderParams

Returns

React.ReactNode

---

HeaderSlotRenderParams

Properties

column

ColumnInfo

---

columnKey

string

---

columnState

ColumnState

---

headerRef

RefObject<HTMLDivElement | null>

---

overlaidByScrollbar

boolean

---

HeaderStart

const HeaderStart: (props) => null

Parameters

Parameter	Type
props	HeaderSlotProps

Returns

null

---

initialData$

const initialData$: NodeRef<DataArray | null>

---

loadingState$

const loadingState$: NodeRef<DataTableLoadingState>

---

ModelActionSnapshot

Properties

payload

unknown

---

viewId

string

---

ModelActionState

ModelActionState = Record<string, ModelActionSnapshot>

---

Row

Row<D> = Item<D>

Alias for Item, used in row-specific contexts

Type Parameters

Type Parameter
D

---

useCellValue

useCellValue<T>(cell): T

Gets the current value of the cell. The component is re-rendered when the cell value changes.

Type Parameters

Type Parameter	Description
T	the type of the value that the cell caries.

Parameters

Parameter	Type	Description
cell	Out<T>	The cell to use.

Returns

T

The current value of the cell.

Remarks

If you need the values of multiple nodes from the engine and those nodes might change in the same computiation, you can useCellValues to reduce re-renders.

Example

const cell$ = Cell(0)
//...
function MyComponent() {
  const cell = useCellValue(cell$)
  return <div>{cell}</div>
}

---

useEngineRef

useEngineRef(): EngineRef

Creates a stable, memoized EngineRef for use inside a component. Pass the returned ref to an EngineProvider via the engineRef prop, and to useRemote* hooks to access the engine reactively.

Returns

EngineRef

Example

function App() {
  const engineRef = useEngineRef()
  return (
    <>
      <SiblingComponent engineRef={engineRef} />
      <EngineProvider engineRef={engineRef} initFn={initFn}>
        <NestedComponent />
      </EngineProvider>
    </>
  )
}

---

usePublisher

usePublisher<T>(node$): (value) => void

Returns a function that publishes its passed argument into the specified node.

Type Parameters

Type Parameter	Description
T	The type of values that the node accepts.

Parameters

Parameter	Type	Description
node$	Inp<T>	the node to publish in.

Returns

The publisher function for the passed node$.

(value): void

Parameters

Parameter	Type
value	T

Returns

void

Example

import {Stream, e, usePublisher} from '@virtuoso.dev/reactive-engine-react'

const stream$ = Stream<number>()
e.sub(stream, (value) => console.log(`${value} was published in the stream`))

//...
function MyComponent() {
 const pub = usePublisher(stream);
 return <button onClick={() => pub(2)}>Push a value into the stream</button>
}

---

useRemoteCell

useRemoteCell<T>(cell, engineSource): [T | undefined, (value) => void]

Returns a tuple of the current value and a publisher function for a cell in an engine identified by engineSource. Returns [undefined, noop] when the engine is not available yet.

Type Parameters

Type Parameter	Description
T	The type of values that the cell emits/accepts.

Parameters

Parameter	Type	Description
cell	NodeRef<T>	The cell to use.
engineSource	EngineSource	A string engine ID or an EngineRef.

Returns

[T | undefined, (value) => void]

A tuple of the current value (or undefined) and a publisher function.

Example

const cell$ = Cell(0)
// ...
function SiblingComponent({ engineRef }: { engineRef: EngineRef }) {
  const [value, setValue] = useRemoteCell(cell$, engineRef)
  if (value === undefined) return <div>Loading...</div>
  return <button onClick={() => setValue(value + 1)}>{value}</button>
}

---

useRemoteCellValue

useRemoteCellValue<T>(cell, engineSource): T | undefined

Gets the current value of the cell from an engine identified by engineSource. Returns undefined when the engine is not available yet.

Type Parameters

Type Parameter	Description
T	The type of the value that the cell carries.

Parameters

Parameter	Type	Description
cell	Out<T>	The cell to read from.
engineSource	EngineSource	A string engine ID or an EngineRef to read from.

Returns

T | undefined

The current value of the cell, or undefined if the engine is not available.

Example

const cell$ = Cell(0)
// ...
function SiblingComponent({ engineRef }: { engineRef: EngineRef }) {
  const value = useRemoteCellValue(cell$, engineRef)
  if (value === undefined) return <div>Loading...</div>
  return <div>{value}</div>
}

---

useRemotePublisher

useRemotePublisher<T>(node$, engineSource): (value) => void

Returns a function that publishes values to a node in an engine identified by engineSource. Returns a no-op function when the engine is not available yet.

Type Parameters

Type Parameter	Description
T	The type of values that the node accepts.

Parameters

Parameter	Type	Description
node$	Inp<T>	The node to publish to.
engineSource	EngineSource	A string engine ID or an EngineRef to publish to.

Returns

A publisher function that accepts values of type T.

(value): void

Parameters

Parameter	Type
value	T

Returns

void

Example

const trigger$ = Trigger()
// ...
function SiblingComponent({ engineRef }: { engineRef: EngineRef }) {
  const publish = useRemotePublisher(trigger$, engineRef)
  return <button onClick={() => publish()}>Trigger</button>
}

---

VirtuosoDataTable

const VirtuosoDataTable: <Data, Context, Group>(props) => ReactElement & object

Type Declaration

displayName?: string

---

visibleColumns$

const visibleColumns$: NodeRef<Map<string, ColumnInfo>>