Overview

Spreadsheet

Archetype orientato a editing tabellare avanzato in stile foglio di calcolo.

Quando usarlo

Data entry massivo
Correzioni rapide multi-record
Flussi simili a Excel

Note operative

Configurazione tramite archetypes.spreadsheet
Compatibile con datasource metadata standard

md_props_bag: archetypes.spreadsheet

La configurazione e in gran parte pass-through verso jspreadsheet; il wrapper Wuic usa in modo esplicito le proprieta sotto.

Snippet 1JSON

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

advancedFilter: quando true mostra la wuic-filter-bar per l'archetype spreadsheet (a livello data-repeater).
paginationSize: page size client-side quando dataset ampio; in server mode influenza il pager tabellare.
rowHeaderWidth oppure alias indexColumnWidth: larghezza colonna indice.
minColumnWidth oppure alias minColWidth: larghezza minima colonne.
headerFilterIconReserveWidth oppure alias filterIconReserveWidth: spazio riservato icona filtro header.
worksheets[0].*: stessi parametri applicati a livello worksheet.
altre proprieta spreadsheet.*: inoltrate al motore spreadsheet (pass-through).

Eventi e subscriptions (host)

Eventi disponibili su wuic-spreadsheet-list:

onSpreadsheetDataBound: emesso quando il wrapper completa il binding dati.
onSpreadsheetBeforePageChange: emesso prima di un page-change server-side.
onSpreadsheetPageChange: emesso dopo un page-change completato.
onSpreadsheetRowInserted: emesso dopo insert riga.
onSpreadsheetRowsDeleted: emesso dopo delete righe.
onSpreadsheetBatchSaved: emesso dopo save batch (save selezione o pending changes).

Esempio subscribe:

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 e mount (componente Angular)

Importa LazySpreadsheetListSfComponent da 'wuic-framework-lib' e montalo col DataSource del framework:

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>

Nomi ESATTI (barrel wuic-framework-lib): classe LazySpreadsheetListSfComponent, selector <wuic-spreadsheet-list-sf-lazy>. Importa quella classe, non altri nomi inventati (es. un prefisso Lazy dove non c'è, o viceversa) → altrimenti il build dà has no exported member.

Config metadata-driven: il tag accetta SOLO gli input standard [hardcodedRoute], [hardcodedDatasource], [autoload], [hideToolbar]. La configurazione specifica (qui: le colonne editabili) NON è un input HTML ([groupField], [type], ecc. danno NG8002 not a known property) → va nei metadata (md_props_bag/archetipo) o in-code via metaInfo.