Data

x4js provides two ways to present data in a table. They do not rely on the same storage.

	Gridview	Spreadsheet
Data	records, in a DataStore	cells, in a Store
Columns	the fields of a model	free
Use	lists of objects: customers, orders…	entry grids, spreadsheet-like tables
In-place editing	no	yes

These stores are for tabular data. They do not replace the application state, described in State and messages.

Records: DataStore and Gridview

A DataModel describes the fields of a record, using decorators.

import { DataModel, DataStore, Gridview, data } from 'x4js';

class PersonModel extends DataModel {
  @data.id( )    id: number;
  @data.string( )  name: string;
  @data.int( )  age: number;
}

A DataStore holds the records:

const people = new DataStore( {
  model: new PersonModel( ),
  data: [
    { id: 1, name: "Ada", age: 36 },
    { id: 2, name: "Linus", age: 28 },
  ]
});

And a Gridview displays them. Each column names a field.

const grid = new Gridview( {
  flex: 1,
  store: people,
  columns: [
    { id: "name", title: "Name", width: 200 },
    { id: "age", title: "Age", width: 80, type: "number", align: "right" },
  ],
});

The grid follows the changes of the store: an addition, an update or a deletion in the DataStore shows immediately, with nothing to refresh by hand.

To filter or sort without touching the data, create a view on the store with createView.

Cells: Store and Spreadsheet

A Store keeps values by row and column.

import { Spreadsheet, Store } from 'x4js';

const cells = new Store( );

cells.setMaxRowCount( 2 );
cells.setData( 0, 0, "Screws" );
cells.setData( 0, 1, 120 );

The Spreadsheet displays that store. A column marked editable can be changed directly in the grid.

const sheet = new Spreadsheet( {
  flex: 1,
  store: cells,
  columns: [
    { id: 0, title: "Item", width: 200, editable: true },
    { id: 1, title: "Quantity", width: 100, type: "number", align: "right", editable: true },
  ],
  cellChange: ( ev ) => {
    // refuse a negative quantity
    if( ev.colId==1 && ev.value<0 ) {
      ev.preventDefault( );
    }
  },
});

In-place editing

Action	Effect
F2, Enter, double-click, or typing	Opens the cell editor.
Enter, Tab, click elsewhere	Validates the entry.
Escape	Cancels.
Delete	Clears the cell.
Double-click or space bar on a check box	Toggles its value.

The editor depends on the column type: text, number, date. A column can provide its own through the editor property, for example a choice list.

Two events hand control to the application:

• cellChange is fired before an entered value is written. You can refuse it with preventDefault( ), or replace it.
• cellKey is fired for each key received by the grid, which lets you give a role to function keys.

Large data sets

Both grids only build the visible rows, so they stay smooth with many rows.

However, loading a very large remote data set entirely into a local DataStore is not always reasonable. For such volumes, plan for chunked loading on the server side.