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.
Examples
export function Sales () {
See also
Declaration
ref ?: ForwardedRef < Grid >;
Referenced by
Workspace packages depending on @sheetwrite/react
@sheetwrite/docs-startdependency
Public exports naming Sheetwrite
const Sheetwrite: <Row extends Record<string, CellScalar>, Id extends RowBridgeId = RowBridgeId>(props: SheetwriteProps<Row, Id> & {
ref?: ForwardedRef<Grid>;
}) => ReactElement const Sheetwrite : < Row extends Record < string , CellScalar >, Id extends RowBridgeId = RowBridgeId , >( props : SheetwriteProps < Row , Id > & { ref ?: ForwardedRef < Grid >; }, ) => ReactElement const Sheetwrite : < Row extends Record < string , CellScalar >, Id extends RowBridgeId = RowBridgeId , >( props : SheetwriteProps < Row , Id > & { ref ?: ForwardedRef < Grid >; }, ) => ReactElement 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. @example 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 SheetwriteGrid *@see /docs/frameworks/react/API reference → function Sales(): JSX.Element function Sales () : JSX . Element function Sales () : JSX . Element columns: 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: string SimpleColumn < Row extends Record < string, CellScalar >> .title: string SimpleColumn < Row extends Record < string, CellScalar >> .title: string Semantic title painted in data-grid mode and written by table exports. API reference → SimpleColumn<Row extends Record<string, CellScalar>>.type?: CellFormat | undefined SimpleColumn < Row extends Record < string, CellScalar >> .type ?: CellFormat | undefined SimpleColumn < Row extends Record < string, CellScalar >> .type ?: CellFormat | undefined Input 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: number let amount : number let amount : number height: string | number let height : string | number let height : string | number Host 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.applyTransaction API reference →