Overview

Spreadsheet

Archetype oriented toward advanced tabular editing in spreadsheet style.

When to Use It

Massive data entry
Quick multi-record corrections
Excel-like flows

Operational Notes

Configuration via archetypes.spreadsheet
Compatible with standard metadata datasource

md_props_bag: archetypes.spreadsheet

The configuration is largely pass-through to jspreadsheet; the Wuic wrapper explicitly uses the properties below.

Snippet 1JSON

{
  "archetypes": {
    "spreadsheet": {
      "advancedFilter": false,
      "paginationSize": 50,
      "rowHeaderWidth": 50,
      "minColumnWidth": 60,

advancedFilter: when true, shows the wuic-filter-bar for the spreadsheet archetype (at data-repeater level).
paginationSize: client-side page size for large datasets; in server mode it affects the tabular pager.
rowHeaderWidth or alias indexColumnWidth: index column width.
minColumnWidth or alias minColWidth: minimum column width.
headerFilterIconReserveWidth or alias filterIconReserveWidth: reserved space for header filter icon.
worksheets[0].*: same parameters applied at the worksheet level.
Other spreadsheet.* properties: forwarded to the spreadsheet engine (pass-through).

Events and Subscriptions (Host)

Events available on wuic-spreadsheet-list:

onSpreadsheetDataBound: emitted when the wrapper completes data binding.
onSpreadsheetBeforePageChange: emitted before a server-side page change.
onSpreadsheetPageChange: emitted after a completed page change.
onSpreadsheetRowInserted: emitted after row insert.
onSpreadsheetRowsDeleted: emitted after rows delete.
onSpreadsheetBatchSaved: emitted after batch save (selection save or pending changes).

Subscribe example:

Snippet 2ts

@ViewChild(SpreadsheetListComponent) spreadsheet?: SpreadsheetListComponent;
private readonly subs = new Subscription();

ngAfterViewInit(): void {
  if (!this.spreadsheet) return;
  this.subs.add(this.spreadsheet.onSpreadsheetDataBound.subscribe((e) => console.log(e)));
  this.subs.add(this.spreadsheet.onSpreadsheetBeforePageChange.subscribe((e) => console.log(e)));

Import and mount (Angular component)

Import LazySpreadsheetListSfComponent from 'wuic-framework-lib' and mount it with the framework DataSource:

Snippet 3ts

import { DataSourceComponent, LazySpreadsheetListSfComponent } from 'wuic-framework-lib';

@Component({
  selector: 'app-esempio',
  imports: [DataSourceComponent, LazySpreadsheetListSfComponent],
  template: `
    <wuic-data-source #ds [hardcodedRoute]="'<route>'" [autoload]="true"></wuic-data-source>

EXACT names (wuic-framework-lib barrel): class LazySpreadsheetListSfComponent, selector <wuic-spreadsheet-list-sf-lazy>. Import that class, not invented variants (e.g. a Lazy prefix where there is none, or vice versa) → otherwise the build fails with has no exported member.

Metadata-driven config: the tag accepts ONLY the standard inputs [hardcodedRoute], [hardcodedDatasource], [autoload], [hideToolbar]. Widget-specific configuration (here: the editable columns) is NOT an HTML input ([groupField], [type], … give NG8002 not a known property) → it goes in the metadata (md_props_bag/archetype) or in-code via metaInfo.