GrapesJS

# DataSource

The DataSource class represents a data source within the editor. It manages a collection of data records and provides methods to interact with them. The DataSource can be extended with transformers to modify records during add, read, and delete operations.

# DataSource API

# Example of Usage

const dataSource = new DataSource({
  records: [
    { id: 'id1', name: 'value1' },
    { id: 'id2', name: 'value2' }
  ],
}, { em: editor });

dataSource.addRecord({ id: 'id3', name: 'value3' });

# Parameters

  • props DataSourceProps Properties to initialize the data source.
  • opts DataSourceOptions Options to initialize the data source.

# defaults

Returns the default properties for the data source. These include an empty array of records and an empty object of transformers.

Returns Object (opens new window) The default attributes for the data source.

# constructor

Initializes a new instance of the DataSource class. It sets up the transformers and initializes the collection of records. If the records property is not an instance of DataRecords, it will be converted into one.

# Parameters

  • props DataSourceProps<DRProps> Properties to initialize the data source.
  • opts DataSourceOptions Options to initialize the data source.

# records

Retrieves the collection of records associated with this data source.

Returns DataRecords<DRProps> The collection of data records.

# em

Retrieves the editor model associated with this data source.

Returns EditorModel The editor model.

# addRecord

Adds a new record to the data source.

# Parameters

  • record DRProps The properties of the record to add.
  • opts AddOptions? Options to apply when adding the record.

Returns DataRecord The added data record.

# getRecord

Retrieves a record from the data source by its ID.

# Parameters

Returns (DataRecord<DRProps> | undefined (opens new window)) The data record, or undefined if no record is found with the given ID.

# getRecords

Retrieves all records from the data source. Each record is processed with the getRecord method to apply any read transformers.

Returns Array (opens new window)<(DataRecord<DRProps> | undefined (opens new window))> An array of data records.

# removeRecord

Removes a record from the data source by its ID.

# Parameters

Returns (DataRecord<DRProps> | undefined (opens new window)) The removed data record, or undefined if no record is found with the given ID.

# setRecords

Replaces the existing records in the data source with a new set of records.

# Parameters

Returns Array (opens new window)<DataRecord> An array of the added data records.

← ‍ ‍ ‍ DataRecord →