Loading documentation…
Advanced framework component with inferred row-bridge identity.
} },): ReactElementWorkspace packages depending on @sheetwrite/react
@sheetwrite/docs-startdependencyPublic exports naming SheetwriteGrid
import { SheetwriteGrid } from "@sheetwrite/react";
import type { Workbook } from "@sheetwrite/core";
export function WorkbookView({ workbook }: { workbook: Workbook }) {
return <SheetwriteGrid workbook={workbook} height={400} />;
}See also Sheetwrite *See also /docs/frameworks/react/API reference →interface Workbookinterface Workbookinterface WorkbookLive workbook schema containing ordered sheets and the active sheet ID.API reference →function WorkbookView({ workbook }: {
workbook: Workbook;
}): JSX.Elementfunction WorkbookView({
workbook,
}: {
workbook: Workbook;
}): JSX.Elementfunction WorkbookView({
workbook,
}: {
workbook: Workbook;
}): JSX.ElementAPI reference →workbook: Workbooklet workbook: Workbooklet workbook: WorkbookLive workbook schema adopted by the store and updated by document operations.API reference →GridOptions.workbook: Workbookinterface GridOptions {
workbook: Workbook;
}interface GridOptions {
workbook: Workbook;
}Live workbook schema adopted by the store and updated by document operations.API reference →SheetwriteGridProps<Id extends RowBridgeId = RowBridgeId>.height?: string | number | undefinedinterface SheetwriteGridProps<
Id extends RowBridgeId = RowBridgeId,
> {
height?: string | number | undefined;
}interface SheetwriteGridProps<
Id extends RowBridgeId =
RowBridgeId,
> {
height?:
string | number | undefined;
}Host height in CSS pixels for numbers or any CSS length string.API reference →type RowBridgeId = string | number;type RowBridgeId = string | number;type RowBridgeId =
string | number;A stable host identity for one data-space row.API reference →interface SheetwriteGridProps<
Id extends RowBridgeId = RowBridgeId,
> {
rowBridge?: RowBridge<Id>;
onRowDelta?: RowBridgeHandler<Id>;
onMutationRejected?: GridAdapterEventHandlers["onMutationRejected"];
onRendererFallback?: GridAdapterEventHandlers["onRendererFallback"];
onDatasourceError?: GridAdapterEventHandlers["onDatasourceError"];
onExportError?: GridAdapterEventHandlers["onExportError"];
onReady?: GridAdapterEventHandlers["onReady"];
className?: string;
style?: CSSProperties;
fallback?: ReactNode;
height?: number | string;
fill?: true;
// … 33 more lines — see the API reference
}interface SheetwriteGridProps<
Id extends RowBridgeId = RowBridgeId,
> {
rowBridge?: RowBridge<Id>;
onRowDelta?: RowBridgeHandler<Id>;
onMutationRejected?: GridAdapterEventHandlers["onMutationRejected"];
onRendererFallback?: GridAdapterEventHandlers["onRendererFallback"];
onDatasourceError?: GridAdapterEventHandlers["onDatasourceError"];
onExportError?: GridAdapterEventHandlers["onExportError"];
onReady?: GridAdapterEventHandlers["onReady"];
className?: string;
style?: CSSProperties;
fallback?: ReactNode;
height?: number | string;
fill?: true;
// … 33 more lines — see the API reference
}interface SheetwriteGridProps<
Id extends RowBridgeId =
RowBridgeId,
> {
rowBridge?: RowBridge<Id>;
onRowDelta?: RowBridgeHandler<Id>;
onMutationRejected?: GridAdapterEventHandlers["onMutationRejected"];
onRendererFallback?: GridAdapterEventHandlers["onRendererFallback"];
onDatasourceError?: GridAdapterEventHandlers["onDatasourceError"];
onExportError?: GridAdapterEventHandlers["onExportError"];
onReady?: GridAdapterEventHandlers["onReady"];
className?: string;
style?: CSSProperties;
fallback?: ReactNode;
height?: number | string;
fill?: true;
onGridChange?: (
event: ChangeEvent,
) => void;
// … 58 more lines — see the API reference
}Advanced framework adapter props for workbook data or datasource ownership.API reference →interface Grid {
readonly store: Store;
readonly actions: GridActions;
getRuntimeResourceSnapshot(
operation: RuntimeResourceOperation,
phase: RuntimeResourcePhase,
runtime?: RuntimeMemoryObservation,
): RuntimeResourceSnapshot;
getCommandState(command: GridCommandName): GridCommandState;
setActiveSheet(id: SheetId): void;
scrollToCell(addr: CellAddress): void;
getCellAtPoint(
clientX: number,
clientY: number,
): CellAddress | null;
// … 122 more lines — see the API reference
}interface Grid {
readonly store: Store;
readonly actions: GridActions;
getRuntimeResourceSnapshot(
operation: RuntimeResourceOperation,
phase: RuntimeResourcePhase,
runtime?: RuntimeMemoryObservation,
): RuntimeResourceSnapshot;
getCommandState(command: GridCommandName): GridCommandState;
setActiveSheet(id: SheetId): void;
scrollToCell(addr: CellAddress): void;
getCellAtPoint(
clientX: number,
clientY: number,
): CellAddress | null;
// … 122 more lines — see the API reference
}interface Grid {
readonly store: Store;
readonly actions: GridActions;
getRuntimeResourceSnapshot(
operation: RuntimeResourceOperation,
phase: RuntimeResourcePhase,
runtime?: RuntimeMemoryObservation,
): RuntimeResourceSnapshot;
getCommandState(
command: GridCommandName,
): GridCommandState;
setActiveSheet(
id: SheetId,
): void;
scrollToCell(
addr: CellAddress,
): void;
getCellAtPoint(
clientX: number,
// … 259 more lines — see the API reference
}Imperative grid handle for document commands, events, rendering, and teardown. @example import type { Grid } from "@sheetwrite/core"; function updateTotal(grid: Grid) { const sheet = grid.getActiveSheet(); const result = grid.applyTransaction({ patches: [{ op: "set", addr: { sheet, row: 0, col: 0 }, value: { kind: "literal", value: 42 } }], }); if (result.status === "applied") grid.scrollToCell({ sheet, row: 0, col: 0 }); return grid.aggregate(0, "sum"); } @see createGrid @see Grid.applyTransactionAPI reference →