Loading documentation…
Convenience component for local object rows. It derives a single-sheet workbook from
columns, defaultRows, and sheetName, initializes Sheetwrite, and owns the Grid
through prop-driven resets and unmount cleanup. Pass a ref to access the live Grid;
use SheetwriteGrid when the host already owns a workbook or datasource.
export function Sales() { />;}function Sheetwrite<>( },): ReactElementWorkspace packages depending on @sheetwrite/react
@sheetwrite/docs-startdependencyPublic exports naming Sheetwrite
import { Sheetwrite } from "@sheetwrite/react";
export function Sales() {
return <Sheetwrite
columns={[{ key: "amount", title: "Amount", type: "number" }]}
defaultRows={[{ amount: 12 }, { amount: 18 }]}
height={400}
/>;
}See also SheetwriteGrid *See also /docs/frameworks/react/API reference →function Sales(): JSX.Elementfunction Sales(): JSX.Elementfunction Sales(): JSX.Elementcolumns: readonly SimpleColumn<{
amount: number;
}>[]let columns: readonly SimpleColumn<{
amount: number;
}>[]let columns: readonly SimpleColumn<{
amount: number;
}>[]Ordered schema used to derive the component-owned sheet.API reference →SimpleColumn<{ amount: number; }>.key: "amount"interface SimpleColumn<{ amount: number; }> { key: "amount" }interface SimpleColumn<{ amount: number; }> { key: "amount" }Non-empty row-object key, unique within the column list.API reference →SimpleColumn<Row extends Record<string, CellScalar>>.title: stringSimpleColumn<Row extends Record<string, CellScalar>>.title: stringSimpleColumn<Row extends Record<string, CellScalar>>.title: stringSemantic title painted in data-grid mode and written by table exports.API reference →SimpleColumn<Row extends Record<string, CellScalar>>.type?: CellFormat | undefinedSimpleColumn<Row extends Record<string, CellScalar>>.type?: CellFormat | undefinedSimpleColumn<Row extends Record<string, CellScalar>>.type?: CellFormat | undefinedInput and formatting type; defaults to text.API reference →defaultRows: readonly {
amount: number;
}[]let defaultRows: readonly {
amount: number;
}[]let defaultRows: readonly {
amount: number;
}[]Rows converted to initial columnar data; missing column keys become null.API reference →amount: numberlet amount: numberlet amount: numberheight: string | numberlet height: string | numberlet height:
string | numberHost height in CSS pixels for numbers or any CSS length string.API reference →type CellScalar = string | number | boolean | null;type CellScalar = string | number | boolean | null;type CellScalar =
| string
| number
| boolean
| null;A scalar that can be displayed directly.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 →type SheetwriteProps<
Row extends Record<string, CellScalar>,
Id extends RowBridgeId = RowBridgeId,
> = Omit<
SheetwriteGridProps<Id>,
| "workbook"
| "data"
| "datasource"
| "height"
| "fill"
| "rowBridge"
> &
GridSizeProps & {
columns: readonly SimpleColumn<Row>[];
defaultRows: readonly Row[];
// … 6 more lines — see the API reference
}type SheetwriteProps<
Row extends Record<string, CellScalar>,
Id extends RowBridgeId = RowBridgeId,
> = Omit<
SheetwriteGridProps<Id>,
| "workbook"
| "data"
| "datasource"
| "height"
| "fill"
| "rowBridge"
> &
GridSizeProps & {
columns: readonly SimpleColumn<Row>[];
defaultRows: readonly Row[];
// … 6 more lines — see the API reference
}type SheetwriteProps<
Row extends Record<
string,
CellScalar
>,
Id extends RowBridgeId =
RowBridgeId,
> = Omit<
SheetwriteGridProps<Id>,
| "workbook"
| "data"
| "datasource"
| "height"
| "fill"
| "rowBridge"
> &
GridSizeProps & {
columns: readonly SimpleColumn<Row>[];
defaultRows: readonly Row[];
// … 12 more lines — see the API reference
}Simple framework adapter props for columns and default row objects.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 →