Working with server

The DataGrid library allows working both with the client and server data. The widget doesn't impose any special requirements on the backend. It can be easily connected with any backend platform.

You are free to create your custom server script or if you want to use the ready-made built-in backend, you can find the needed script in the following repository: Go backend

RestDataProvider

To automate the process of working with the server, you can use the ready-made helper which is the RestDataProvider service.

The RestDataProvider service:

• listens to the following actions and sends REST requests (via its send() method) to perform the corresponding data operations on the backend:

  • "add-row"
  • "update-row"
  • "delete-row"
  • "update-cell"

• provides a special method for loading data: getData() gets a promise with tasks and links data

• offers the debounce functionality to avoid excessive server requests

Connecting RestDataProvider to the backend

To connect RestDataProvider to the backend, you need to import the RestDataProvider component from wx-grid-data-provider, and then create an instance by providing the path to your server in constructor. You should also include RestDataProvider into the Event Bus order via the api.setNext() method to send the corresponding requests to the server. To load data, apply the getData method.

Example:

import { useEffect, useRef } from 'react';
import { RestDataProvider } from "wx-grid-data-provider"; 
import { Grid } from "../src/"; 

const columns = [ 
    { 
        id: "name", 
        header: "Title", 
        flexgrow: 1, 
        sort: true, 
        editor: "text", 
    }, 
    { 
        id: "year", 
        header: "Year", 
        width: 100, 
        sort: true, 
        editor: "text", 
    }, 
    { 
        id: "votes", 
        header: "Votes", 
        width: 100, 
        sort: true, 
        editor: "text", 
    }, 
]; 

const provider = new RestDataProvider("https://some-backend-url");

export default function App(){
    const api = useRef(null); 
    let [data, setData] = useState([]);
    
    provider.getData().then((v) => (data = v));
 
    const init = () => { 
        api.setNext(provider); 
    }; 
  
    return <Grid data={data} columns={columns} init={init} api={api} />; 
} 

---

Related articles: How to access Grid API