Managing Data

Loading and managing data is a fundamental part of Adaptable.

Declaring the data and the primary key

You specify your data using the data prop of <Adaptable.Provider />.

<Adaptable.Provider
  primaryKey="id"
  data={[...]}
  adaptableId="Data Management Demo"
>
  <Adaptable.UI />
</Adaptable.Provider>

The data you specify can be one of the following:

• an array of objects
• a Promise tha resolves to an array
• a function that returns any of the above

<Adaptable.Provider primaryKey="id" data={rowData}>
  <Adaptable.UI />
</Adaptable.Provider>

Data Loading Strategies

We're aware there are many strategies for loading data - each with its own strengths.

However, our approach gives you the flexibility to use your preferred data-fetching library/solution.

Any of the following are accepted as the data prop:

• an array of objects
• a Promise that resolves to an array
• a function that returns any of the above

This makes it very easy to load your data with fetch, axios or another library - and pass the resulting array to Adaptable.

Or you can give us the promise that resolves to the data, and that's fine too.

Or, for when you need full extensibility and flexibility, you can specify a function that we call to get the data. Whenever data needs to be loaded, we will call your function, with all the filtering, aggregation, sorting and pivoting details in the current Adaptable state. In this way, you can send whatever information you need to your server, and return a promise that resolves to the data you want to display.

Another option would be to use various React-focused popular libraries like @tanstack/react-query or swr for data fetching, and pass the resulting data to Adaptable.

Using fetch

For basic datasets, which have simple data requirements, using fetch is probably sufficient, so here is an example:

Using a function that returns a promise

As well as using fetch, you can also use a function that returns a promise. This is useful when you need to pass additional information to the server, or when you need to do some processing on the client side before returning the data.

Refetching data

When the reference of the data prop you pass to <Adaptable.Provider /> changes, Adaptable will use the new data - so if you use an array, that will be displayed, but if a function is used, Adaptable will call it again to get the new data.

CRUD

Adaptable offers API methods (via the DataSourceApi) to add/update/delete rows in the grid. To access this api, use adaptableApi.dataSourceApi. You can get a reference to the adaptableApi by using the onReady callback prop of the <Adaptable.Provider /> component or by using the useAdaptableApi hook.

Adding data

• adaptableApi.dataSourceApi.addData(dataObject) - adds the given object at the end of the data-source. The object needs to have a value for the property that is the primaryKey of the data-source.
• adaptableApi.dataSourceApi.addDataArray(dataArray) - adds the given objects at the end of the data-source.

Inserting data

• adaptableApi.dataSourceApi.insertData(data, options) - inserts the given object at the position specified in the options object. The options for the insertData and insertDataArray methods is an object of the following shape:
  • { position: 'start' | 'end' } - adds the data at the start or end of the data-source.
  • { position: 'before'| 'after', primaryKey: any } - when before or after is specified, the primaryKey is required, since Adaptable needs to know the row before or after which to insert the new data.
• adaptableApi.dataSourceApi.insertDataArray(dataArray, options) - same as insertData, but for an array of data objects.

Updating data

• adaptableApi.dataSourceApi.updateData(dataObject) - the dataObject must at least have a value for the property that is the primaryKey of the data-source. All other properties the object has will be updated in the data-source.
• adaptableApi.dataSourceApi.updateDataArray(dataArray) - an array of data objects to update - similar to updateData.

Removing data

• adaptableApi.dataSourceApi.removeData(dataObject) - looks for the object with the primary key value found in the passed dataObject and removes it from the data-source.
• adaptableApi.dataSourceApi.removeDataArray(dataArray) - an array of data objects to remove - similar to removeData.
• adaptableApi.dataSourceApi.removeDataByPrimaryKey(primaryKey) - removes the object with the specified primaryKey from the data-source.
• adaptableApi.dataSourceApi.removeDataArrayByPrimaryKeys(primaryKeys) - removes the objects with the specified primaryKeys from the data-source.