How to load Tab from a data source in React

4 Sep 20265 minutes to read

You can bind any data object to React Tab items by mapping its fields to the header and content properties.

In the following demo, data is fetched from an OData service using DataManager. The result is formatted as a JSON array of objects with header and content fields, which is set as the items collection of the Tab.

import * as React from "react";
import { useRef, useEffect } from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { TabComponent } from '@syncfusion/ej2-react-navigations';

const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';

const App = () => {
  const tabInstance = useRef(null);

  useEffect(() => {
    const fetchTabItems = async () => {
      const e = await new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor() }).executeQuery(new Query().range(1, 4));
      const result = e.result;
      const mapping = { header: 'FirstName', content: 'Notes' };
      const itemsData = result.map((item) => ({
        header: { text: item[mapping.header] },
        content: item[mapping.content],
      }));
      tabInstance.current.items = itemsData;
      tabInstance.current.refresh();
    };
    if (tabInstance.current) {
      fetchTabItems();
    }
  }, [tabInstance]);

  return (
    <TabComponent heightAdjustMode='Auto' ref={tabInstance}>
    </TabComponent>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
import * as React from "react";
import { useRef, useEffect } from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ODataV4Adaptor, ReturnOption } from '@syncfusion/ej2-data';
import { TabComponent } from '@syncfusion/ej2-react-navigations';

const SERVICE_URI: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';

const App = () => {
  const tabInstance = useRef<TabComponent>(null);

  useEffect(() => {
    const fetchTabItems = async () => {
      const e: ReturnOption = await new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor() }).executeQuery(new Query().range(1, 4));
      const result: any = e.result;
      const mapping = { header: 'FirstName', content: 'Notes' };
      const itemsData: Object[] = result.map((item: any) => ({
        header: { text: item[mapping.header] },
        content: item[mapping.content],
      }));
      tabInstance.current!.items = itemsData;
      tabInstance.current!.refresh();
    };
    if (tabInstance.current) {
      fetchTabItems();
    }
  }, [tabInstance]);

  return (
    <TabComponent heightAdjustMode='Auto' ref={tabInstance}>
    </TabComponent>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id='element'>
                <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>