React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Load tab with DataSource in React Tabs component

You can bind any data object to Tab items, by mapping it to a header and content property.

In the below demo, Data is fetched from an OData service using DataManager. The result data is formatted as a JSON object with header and content fields, which is set to items property of Tab.

Source
Preview
index.jsx
index.tsx
index.html
import * as React 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';
export default class App extends React.Component {
    tabCreated() {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
            .executeQuery(new Query().range(1, 4)).then((e) => {
            let itemsData = [];
            let result = e.result;
            let mapping = { header: 'FirstName', content: 'Notes' };
            for (let i = 0; i < result.length; i++) {
                itemsData.push({ header: { text: result[i][mapping.header] }, content: result[i][mapping.content] });
            }
            this.items = itemsData;
            this.refresh();
        });
    }
    render() {
        return (<TabComponent heightAdjustMode='Auto' ref={tab => this.tabInstance = tab} created={this.tabCreated}>
      </TabComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query, ODataV4Adaptor, ReturnOption } from '@syncfusion/ej2-data';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';

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

export default class App extends React.Component<{}, {}> {

  public tabCreated(): void {
    new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor})
    .executeQuery(new Query().range(1, 4)).then((e: ReturnOption) => {
      let itemsData: Object[] = [];
      let result: any = e.result;
      let mapping =  { header: 'FirstName', content: 'Notes' };
      for(let i: number = 0; i < result.length; i++) {
        itemsData.push({ header: { text: result[i][mapping.header] }, content: result[i][mapping.content] });
      }
      this.items = itemsData;
      this.refresh();
    });
  }

  render() {
    return (
      <TabComponent heightAdjustMode='Auto' ref={tab => this.tabInstance = tab} created={this.tabCreated}>
      </TabComponent>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('element'));
<!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="//cdn.syncfusion.com/ej2/material.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>
Previous
Next