Search results

Render other components in Tab using template in React Tabs component

27 Jul 2021 / 3 minutes to read

You can render other components inside Tab using React template. Through this, we can add content as other components directly with all functionalities to our Tab. Follow the below guidelines for using the other components as template in tab.

  • Declare a template within the function returns jsx element. If the template does not need arguments no need to pass the properties.
  • Assign the function as value for the template property.
Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent, CalendarComponent } from '@syncfusion/ej2-react-calendars';
export default class App extends React.Component {
    render() {
        let headertext;
        function contentTemplate() {
            return (<ButtonComponent>Click me</ButtonComponent>);
        }
        function contentTemplate1() {
            return (<DatePickerComponent></DatePickerComponent>);
        }
        function contentTemplate2() {
            return (<CalendarComponent></CalendarComponent>);
        }
        headertext = [{ text: "Tab1" }, { text: "Tab2" }, { text: "Tab3" }];
        return (<div id='container'>
      <TabComponent heightAdjustMode='Auto' id='tabelement'>
        <TabItemsDirective>
          <TabItemDirective header={headertext[0]} content={contentTemplate}/>
        <TabItemDirective header={headertext[1]} content={contentTemplate1}/>
      <TabItemDirective header={headertext[2]} content={contentTemplate2}/>
        </TabItemsDirective>
      </TabComponent>
    </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective, SelectEventArgs } from '@syncfusion/ej2-react-navigations';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent ,CalendarComponent} from '@syncfusion/ej2-react-calendars';


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

  render() {
  let headertext: any;
  function contentTemplate(): JSX.Element {
return(<ButtonComponent>Click me</ButtonComponent>);
  }
  function contentTemplate1(): JSX.Element {
return(<DatePickerComponent></DatePickerComponent>);
  }
  function contentTemplate2(): JSX.Element {
return( <CalendarComponent ></CalendarComponent>);
  }
headertext = [{ text: "Tab1"}, { text: "Tab2"}, { text: "Tab3"}];
return (
    <div id='container'>
      <TabComponent heightAdjustMode='Auto' id='tabelement'>
        <TabItemsDirective>
          <TabItemDirective header= { headertext[0] }
            content= { contentTemplate } />
        <TabItemDirective header= { headertext[1] }
            content= { contentTemplate1 } />
      <TabItemDirective header= { headertext[2] }
            content= { contentTemplate2 } />
        </TabItemsDirective>
      </TabComponent>
    </div>
);
  }
}

ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="index.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>

Passing props

The following code example demonstrates how to use props when rendering other components in tab component.

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { enableRipple } from "@syncfusion/ej2-base";
import { TabComponent, TabItemDirective, TabItemsDirective, ContextMenuComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { DatePickerComponent, CalendarComponent } from "@syncfusion/ej2-react-calendars";
enableRipple(true);
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.menuItems = [
            {
                text: "Cut"
            },
            {
                text: "Copy"
            },
            {
                text: "Paste"
            }
        ];
        this.btnClick = this.btnClick.bind(this);
    }
    btnClick() {
        this.cMenu.open(80, 20);
    }
    render() {
        let headertext;
        function contentTemplate() {
            return (<div>
      <ContextMenuComponent id="contextmenu" ref={scope => (this.cMenu = scope)} items={this.menuItems}/>
      <ButtonComponent onClick={this.btnClick}>Click me</ButtonComponent>
    </div>);
        }
        function contentTemplate1() {
            return <DatePickerComponent />;
        }
        function contentTemplate2() {
            return <CalendarComponent />;
        }
        headertext = [{ text: "Tab1" }, { text: "Tab2" }, { text: "Tab3" }];
        return (<div id="container">
    <TabComponent heightAdjustMode="Auto" id="tabelement">
      <TabItemsDirective>
        <TabItemDirective header={headertext[0]} content={contentTemplate.bind(this)}/>
        <TabItemDirective header={headertext[1]} content={contentTemplate1.bind(this)}/>
        <TabItemDirective header={headertext[2]} content={contentTemplate2.bind(this)}/>
      </TabItemsDirective>
    </TabComponent>
  </div>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { enableRipple } from "@syncfusion/ej2-base";
import {
  TabComponent,
  TabItemDirective,
  TabItemsDirective,
  ContextMenuComponent
} from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import {
  DatePickerComponent,
  CalendarComponent
} from "@syncfusion/ej2-react-calendars";
enableRipple(true);
export default class App extends React.Component {
  constructor(props) {
super(props);
this.menuItems = [
  {
    text: "Cut"
  },
  {
    text: "Copy"
  },
  {
    text: "Paste"
  }
];
this.btnClick = this.btnClick.bind(this);
  }

  btnClick() {
this.cMenu.open(80, 20);
  }
  render() {
let headertext;
function contentTemplate() {
  return (
    <div>
      <ContextMenuComponent
        id="contextmenu"
        ref={scope => (this.cMenu = scope)}
        items={this.menuItems}
      />
      <ButtonComponent onClick={this.btnClick}>Click me</ButtonComponent>
    </div>
  );
}
function contentTemplate1() {
  return <DatePickerComponent />;
}
function contentTemplate2() {
  return <CalendarComponent />;
}
headertext = [{ text: "Tab1" }, { text: "Tab2" }, { text: "Tab3" }];
return (
  <div id="container">
    <TabComponent heightAdjustMode="Auto" id="tabelement">
      <TabItemsDirective>
        <TabItemDirective
          header={headertext[0]}
          content={contentTemplate.bind(this)}
        />
        <TabItemDirective
          header={headertext[1]}
          content={contentTemplate1.bind(this)}
        />
        <TabItemDirective
          header={headertext[2]}
          content={contentTemplate2.bind(this)}
        />
      </TabItemsDirective>
    </TabComponent>
  </div>
);
  }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="index.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>