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.

# hasProvider

Indicates if the data source has a provider for records.

# getResolvedRecords

Retrieves all records from the data source with resolved relations based on the schema.

# upSchema

Update the schema.

# Parameters

  • schema Partial<any>
  • opts SetOptions?

# Examples

dataSource.upSchema({ name: { type: 'string' } });

# getSchemaField

Get schema field definition.

# Parameters

  • fieldKey any

# Examples

const fieldSchema = dataSource.getSchemaField('name');
fieldSchema.type; // 'string'

# 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.

# 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 →