Sheet
Provides an editable tabular form control with selection and fill operations.
import { Sheet } from "@schukai/monster/source/components/form/sheet.mjs";'%3E%3Cpath style='stroke:none;fill-rule:nonzero;fill:%23f03c2e;fill-opacity:1' d='M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371'/%3E%3C/g%3E%3C/svg%3E "View source code")
Purpose and scope
Provides an editable tabular form control with selection and fill operations.
This page documents the <monster-sheet> custom element. Use the Usage examples for a working starting point and the API tab for the complete public contract.
When to use it
Use this module when its focused responsibility matches the surrounding workflow. Prefer its public options, properties, methods and events over reaching into rendered internals.
Editable Sheet
Defines explicit rows and columns and supplies editable cell values through the form-value API.
Javascript
import "@schukai/monster/source/components/form/sheet.mjs";
const sheet = document.getElementById("budget-sheet");
sheet.setOption("columns", [{id: "item", label: "Item"}, {id: "amount", label: "Amount"}]);
sheet.setOption("rows", [{id: "hosting", label: "1"}, {id: "support", label: "2"}]);
sheet.value = {
cells: {
hosting: {item: "Hosting", amount: "120"},
support: {item: "Support", amount: "80"},
},
formulas: {},
};HTML
<monster-sheet id="budget-sheet"></monster-sheet>Stylesheet
/** no additional stylesheet is defined **/Formula Sheet
Shows formula metadata alongside calculated cells and replaces the sheet value immutably.
Javascript
import "@schukai/monster/source/components/form/sheet.mjs";
const sheet = document.getElementById("formula-sheet");
sheet.setOption("columns", [{id: "A", label: "Qty"}, {id: "B", label: "Price"}, {id: "C", label: "Total"}]);
sheet.setOption("rows", [{id: "1", label: "1"}]);
sheet.value = {
cells: {1: {A: "2", B: "20", C: "40"}},
formulas: {1: {C: "=A1*B1"}},
};
document.getElementById("formula-sheet-update").addEventListener("click", () => {
const value = structuredClone(sheet.value);
value.cells["1"].A = "3";
sheet.value = value;
});HTML
<section style="display:grid;gap:var(--monster-space-3)">
<monster-sheet id="formula-sheet"></monster-sheet>
<button id="formula-sheet-update" type="button">Update quantity</button>
</section>Stylesheet
/** no additional stylesheet is defined **/Component Design
monster-sheet combines an editable grid, selection overlay, fill handle, toolbar, status output, and context menu in one keyboard-aware control.
Interaction
Columns, rows, cells, formulas, and selection remain data-driven. Customize the exported surfaces without replacing grid semantics or bypassing the public value API.
Customizing With Parts
You can adapt the visual appearance through exported parts instead of modifying the internal template. This reference is generated from the current component source.
The component exposes these part names:
add-column: Element representing the add column.add-row: Element representing the add row.context-menu: Element representing the context menu.control: Outer wrapper of the component.fill-handle: Element representing the fill handle.grid: Element representing the grid.grid-wrapper: Element representing the grid wrapper.menu-item: Element representing the menu item.selection: Element representing the selection.status: Live component status region.toolbar: Toolbar containing component actions.
HTML Structure
<monster-sheet></monster-sheet>JavaScript Initialization
const element = document.createElement('monster-sheet');
document.body.appendChild(element);Exported
SheetDerived from
CustomControlOptions
The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomControl.
- since
- deprecated
Properties and Attributes
The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomControl.
data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.data-monster-option-[name]: Sets the value of the configuration option[name]for the collapse component when used as an HTML attribute.
Methods
The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomControl.
State query methods
value()value(value)value
Static methods
[instanceSymbol]()getCSSStyleSheet()getTag()Lifecycle methods
Lifecycle methods are called by the environment and are usually not intended to be called directly.
[assembleMethodSymbol]()Events
This component does not fire any public events. It may fire events that are inherited from its parent classes.