Search results

Render other components in Tab using template in React Tabs component

02 Feb 2023 / 2 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.html
index.tsx
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';
function App() {
    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>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
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/20.4.48/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>
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';


function App() {


  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>
  );

}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

Passing props

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

Source
Preview
index.jsx
index.html
index.tsx
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);
function App() {
    let cMenu;
    const [menuItems] = React.useState([{ text: "Cut" }, { text: "Copy" }, { text: "Paste" }]);
    function btnClick() {
        cMenu.open(80, 20);
    }
    let headertext;
    function contentTemplate() {
        return (<div>
    <ContextMenuComponent id="contextmenu" ref={scope => (cMenu = scope)} items={menuItems}/>
    <ButtonComponent onClick={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}/>
      <TabItemDirective header={headertext[1]} content={contentTemplate1}/>
      <TabItemDirective header={headertext[2]} content={contentTemplate2}/>
    </TabItemsDirective>
  </TabComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
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/20.4.48/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>
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);
function App() {
  let cMenu: ContextMenuComponent;
  const [menuItems] = React.useState([{ text: "Cut" }, { text: "Copy" }, { text: "Paste" }]);
  function btnClick() {
cMenu.open(80, 20);
  }
  let headertext;
  function contentTemplate() {
return (
  <div>
    <ContextMenuComponent
      id="contextmenu"
      ref={scope => (cMenu = scope)}
      items={menuItems}
    />
    <ButtonComponent onClick={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}
      />
      <TabItemDirective
        header={headertext[1]}
        content={contentTemplate1}
      />
      <TabItemDirective
        header={headertext[2]}
        content={contentTemplate2}
      />
    </TabItemsDirective>
  </TabComponent>
</div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);