DevExtreme DataSource
DevExtreme Data Layer components can perform two types of data operations: shaping (sorting, filtering, grouping) and modification (creation, update, deletion).
Data Shaping
Data shaping is implemented by the DataSource component and its methods. To call them, use the getDataSource() method to get a DataSource instance from your UI component. Alternatively, you can use a standalone instance saved in a constant/component property when you created the DataSource.
The following code obtains a DataSource instance using both approaches and calls one of the data shaping methods—filter(filterExpr). Such methods only set up data shaping settings. To apply them, the load() method is called.
Using a standalone DataSource instance
App.js- import React from 'react';
- import DataSource from 'devextreme/data/data_source';
- const dataSource = new DataSource({
- // ...
- // DataSource is configured here
- // ...
- });
- class App extends React.Component {
- filter() {
- dataSource.filter(['age', '>', 18]);
- dataSource.load();
- }
- render() {
- return (
- {/* ... */}
- );
- }
- }
- export default App;
Getting a DataSource instance from the UI component (DataGrid here)
App.js- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid from 'devextreme-react/data-grid';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.dataGridRef = React.createRef();
- }
- filter() {
- const dataSource = this.dataGridRef.current.instance().getDataSource();
- dataSource.filter(['age', '>', 18]);
- dataSource.load();
- }
- render() {
- return (
- <DataGrid ...
- ref={this.dataGridRef}>
- </DataGrid>
- );
- }
- }
- export default App;
Data Modification
Data modification is implemented by the store and its methods. To call them, you need a store instance that you can get using the DataSource's store() method.
Stores provide three data modification methods: insert(values), update(key, values), and remove(key). Use them to edit local and remote data. Call the DataSource's reload() method afterwards to update data in the DataSource.
- import React from 'react';
- import DataSource from 'devextreme/data/data_source';
- const dataSource = new DataSource({
- // ...
- });
- class App extends React.Component {
- constructor(props) {
- super(props);
- const store = dataSource.store();
- store.insert({ id: 1, name: "John Doe" })
- .then(
- (dataObj) => {
- dataSource.reload();
- },
- (error) => { /* ... */ }
- );
- store.update(1, { name: "John Smith" })
- .then(
- (dataObj) => {
- dataSource.reload();
- },
- (error) => { /* ... */ }
- );
- store.remove(1)
- .then(
- (key) => {
- dataSource.reload();
- },
- (error) => { /* ... */ }
- );
- }
- // ...
- }
- export default App;
See Also
Local Array
Store the array in the state and pass it to the dataSource property. When you need to modify the array, create a new array and use this.setState
to save it in the state. Do not use standard array modification methods, such as push()
or pop()
. They modify the original array, and thus violate the rules of React state updates.
- import React from 'react';
- import Chart from 'devextreme-react/chart';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- fruits: [
- { fruit: 'Apples', count: 10 },
- { fruit: 'Oranges', count: 12 },
- { fruit: 'Lemons', count: 15 }
- ]
- }
- }
- addPineapple() {
- this.setState(prevState => {
- const pineapple = { fruit: 'Pineapples', count: 3 };
- return {
- fruits: [...prevState.fruits, pineapple]
- }
- });
- }
- render() {
- return (
- <Chart ...
- dataSource={this.state.fruits}>
- </Chart>
- );
- }
- }
- export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.