If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useState } from 'react';
import SelectBox from 'devextreme-react/select-box';
import TabPanel from 'devextreme-react/tab-panel';
import TabPanelItem from './TabPanelItem.tsx';
import {
tabsPositionsSelectBoxLabel,
tabsPositions,
stylingModesSelectBoxLabel,
stylingModes,
iconPositionsSelectBoxLabel,
iconPositions,
dataSource,
} from './data.ts';
const App = () => {
const [tabsPosition, setTabsPosition] = useState(tabsPositions[0]);
const [stylingMode, setStylingMode] = useState(stylingModes[0]);
const [iconPosition, setIconPosition] = useState(iconPositions[0]);
const onTabsPositionChanged = useCallback((args) => {
setTabsPosition(args.value);
}, [setTabsPosition]);
const onStylingModeChanged = useCallback((args) => {
setStylingMode(args.value);
}, [setStylingMode]);
const onIconPositionChanged = useCallback((args) => {
setIconPosition(args.value);
}, [setIconPosition]);
return (
<div className="tabpanel-demo">
<div className="widget-container">
<TabPanel
width="100%"
height={418}
animationEnabled={true}
swipeEnabled={true}
dataSource={dataSource}
tabsPosition={tabsPosition}
stylingMode={stylingMode}
iconPosition={iconPosition}
itemComponent={TabPanelItem}
/>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<div className="option-label">Tab position</div>
<SelectBox
inputAttr={tabsPositionsSelectBoxLabel}
items={tabsPositions}
value={tabsPosition}
onValueChanged={onTabsPositionChanged}
/>
</div>
<div className="option">
<div className="option-label">Styling mode</div>
<SelectBox
inputAttr={stylingModesSelectBoxLabel}
items={stylingModes}
value={stylingMode}
onValueChanged={onStylingModeChanged}
/>
</div>
<div className="option">
<div className="option-label">Icon position</div>
<SelectBox
inputAttr={iconPositionsSelectBoxLabel}
items={iconPositions}
value={iconPosition}
onValueChanged={onIconPositionChanged}
/>
</div>
</div>
</div>
);
};
export default App;
xxxxxxxxxx
import React, { useCallback, useState } from 'react';
import SelectBox from 'devextreme-react/select-box';
import TabPanel from 'devextreme-react/tab-panel';
import TabPanelItem from './TabPanelItem.js';
import {
tabsPositionsSelectBoxLabel,
tabsPositions,
stylingModesSelectBoxLabel,
stylingModes,
iconPositionsSelectBoxLabel,
iconPositions,
dataSource,
} from './data.js';
const App = () => {
const [tabsPosition, setTabsPosition] = useState(tabsPositions[0]);
const [stylingMode, setStylingMode] = useState(stylingModes[0]);
const [iconPosition, setIconPosition] = useState(iconPositions[0]);
const onTabsPositionChanged = useCallback(
(args) => {
setTabsPosition(args.value);
},
[setTabsPosition],
);
const onStylingModeChanged = useCallback(
(args) => {
setStylingMode(args.value);
},
[setStylingMode],
);
const onIconPositionChanged = useCallback(
(args) => {
setIconPosition(args.value);
},
[setIconPosition],
);
return (
<div className="tabpanel-demo">
<div className="widget-container">
<TabPanel
width="100%"
height={418}
animationEnabled={true}
swipeEnabled={true}
dataSource={dataSource}
tabsPosition={tabsPosition}
stylingMode={stylingMode}
iconPosition={iconPosition}
itemComponent={TabPanelItem}
/>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<div className="option-label">Tab position</div>
<SelectBox
inputAttr={tabsPositionsSelectBoxLabel}
items={tabsPositions}
value={tabsPosition}
onValueChanged={onTabsPositionChanged}
/>
</div>
<div className="option">
<div className="option-label">Styling mode</div>
<SelectBox
inputAttr={stylingModesSelectBoxLabel}
items={stylingModes}
value={stylingMode}
onValueChanged={onStylingModeChanged}
/>
</div>
<div className="option">
<div className="option-label">Icon position</div>
<SelectBox
inputAttr={iconPositionsSelectBoxLabel}
items={iconPositions}
value={iconPosition}
onValueChanged={onIconPositionChanged}
/>
</div>
</div>
</div>
);
};
export default App;
xxxxxxxxxx
import React from 'react';
import TaskItem from './TaskItem.tsx';
function TabPanelItem({ data }) {
const taskItems = data.tasks.map((task, index) => <TaskItem key={index} prop={task} />);
return (
<div className="tabpanel-item">
{taskItems}
</div>
);
}
export default TabPanelItem;
xxxxxxxxxx
import React from 'react';
function TaskItem({ prop }) {
return (
<div className={`task-item task-item-priority-${prop.priority}`}>
<span className="task-item-text">
{prop.text}
</span>
<span className="task-item-info">
{`${prop.date} by ${prop.assignedBy}`}
</span>
<i className="task-item-pseudo-button dx-icon dx-icon-overflow"></i>
</div>
);
}
export default TaskItem;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
import { Position, TabsIconPosition, TabsStyle } from 'devextreme/common';
export const tabsPositionsSelectBoxLabel = { 'aria-label': 'Tab position' };
export const tabsPositions: Position[] = [
'left',
'top',
'right',
'bottom',
];
export const stylingModesSelectBoxLabel = { 'aria-label': 'Styling mode' };
export const stylingModes: TabsStyle[] = [
'secondary',
'primary',
];
export const iconPositionsSelectBoxLabel = { 'aria-label': 'Icon positions' };
export const iconPositions: TabsIconPosition[] = [
'top',
'start',
'end',
'bottom',
];
const tasks = [
{
status: 'Not Started',
priority: 'high',
text: 'Revenue Projections',
date: '2023/09/16',
assignedBy: 'John Heart',
},
{
status: 'Not Started',
priority: 'high',
text: 'New Brochures',
date: '2023/09/16',
assignedBy: 'Samantha Bright',
},
{
status: 'Not Started',
priority: 'medium',
text: 'Training',
date: '2023/09/16',
assignedBy: 'Arthur Miller',
},
{
status: 'Not Started',
priority: 'medium',
text: 'NDA',
date: '2023/09/16',
assignedBy: 'Robert Reagan',
},
{
status: 'Not Started',
priority: 'low',
text: 'Health Insurance',
date: '2023/09/16',
assignedBy: 'Greta Sims',
},
{
status: 'Help Needed',
priority: 'low',
text: 'TV Recall',
date: '2023/09/16',
assignedBy: 'Brett Wade',
},
{
status: 'Help Needed',
priority: 'low',
text: 'Recall and Refund Forms',
date: '2023/09/16',
assignedBy: 'Sandra Johnson',
},
{
status: 'Help Needed',
priority: 'high',
text: 'Shippers',
date: '2023/09/16',
assignedBy: 'Ed Holmes',
},
{
status: 'Help Needed',
priority: 'medium',
text: 'Hardware Upgrade',
date: '2023/09/16',
assignedBy: 'Barb Banks',
},
{
status: 'In Progress',
priority: 'medium',
text: 'Online Sales',
date: '2023/09/16',
assignedBy: 'Cindy Stanwick',
},
{
status: 'In Progress',
priority: 'medium',
text: 'New Website Design',
date: '2023/09/16',
assignedBy: 'Sammy Hill',
},
{
status: 'In Progress',
priority: 'low',
text: 'Bandwidth Increase',
date: '2023/09/16',
assignedBy: 'Davey Jones',
},
{
status: 'In Progress',
priority: 'medium',
text: 'Support',
date: '2023/09/16',
assignedBy: 'Victor Norris',
},
{
status: 'In Progress',
priority: 'low',
text: 'Training Material',
date: '2023/09/16',
assignedBy: 'John Heart',
},
{
status: 'Deferred',
priority: 'medium',
text: 'New Database',
date: '2023/09/16',
assignedBy: 'Samantha Bright',
},
{
status: 'Deferred',
priority: 'high',
text: 'Automation Server',
date: '2023/09/16',
assignedBy: 'Arthur Miller',
},
{
status: 'Deferred',
priority: 'medium',
text: 'Retail Sales',
date: '2023/09/16',
assignedBy: 'Robert Reagan',
},
{
status: 'Deferred',
priority: 'medium',
text: 'Shipping Labels',
date: '2023/09/16',
assignedBy: 'Greta Sims',
},
{
status: 'Rejected',
priority: 'high',
text: 'Schedule Meeting with Sales Team',
date: '2023/09/16',
assignedBy: 'Sandra Johnson',
},
{
status: 'Rejected',
priority: 'medium',
text: 'Confirm Availability for Sales Meeting',
date: '2023/09/16',
assignedBy: 'Ed Holmes',
},
{
status: 'Rejected',
priority: 'medium',
text: 'Reschedule Sales Team Meeting',
date: '2023/09/16',
assignedBy: 'Barb Banks',
},
{
status: 'Rejected',
priority: 'high',
text: 'Update Database with New Leads',
date: '2023/09/16',
assignedBy: 'Kevin Carter',
},
{
status: 'Rejected',
priority: 'low',
text: 'Send Territory Sales Breakdown',
date: '2023/09/16',
assignedBy: 'Cindy Stanwick',
},
{
status: 'Completed',
priority: 'medium',
text: 'Territory Sales Breakdown Report',
date: '2023/09/16',
assignedBy: 'Sammy Hill',
},
{
status: 'Completed',
priority: 'low',
text: 'Return Merchandise Report',
date: '2023/09/16',
assignedBy: 'Davey Jones',
},
{
status: 'Completed',
priority: 'high',
text: 'Staff Productivity Report',
date: '2023/09/16',
assignedBy: 'Victor Norris',
},
{
status: 'Completed',
priority: 'medium',
text: 'Review HR Budget Company Wide',
date: '2023/09/16',
assignedBy: 'Mary Stern',
},
];
export const dataSource = [
{
icon: 'description',
title: 'Not Started',
tasks: tasks.filter((item) => item.status === 'Not Started'),
},
{
icon: 'taskhelpneeded',
title: 'Help Needed',
tasks: tasks.filter((item) => item.status === 'Help Needed'),
},
{
icon: 'taskinprogress',
title: 'In Progress',
tasks: tasks.filter((item) => item.status === 'In Progress'),
},
{
icon: 'taskstop',
title: 'Deferred',
tasks: tasks.filter((item) => item.status === 'Deferred'),
},
{
icon: 'taskrejected',
title: 'Rejected',
tasks: tasks.filter((item) => item.status === 'Rejected'),
},
{
icon: 'taskcomplete',
title: 'Completed',
tasks: tasks.filter((item) => item.status === 'Completed'),
},
];
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import TaskItem from './TaskItem.js';
function TabPanelItem({ data }) {
const taskItems = data.tasks.map((task, index) => (
<TaskItem
key={index}
prop={task}
/>
));
return <div className="tabpanel-item">{taskItems}</div>;
}
export default TabPanelItem;
xxxxxxxxxx
import React from 'react';
function TaskItem({ prop }) {
return (
<div className={`task-item task-item-priority-${prop.priority}`}>
<span className="task-item-text">{prop.text}</span>
<span className="task-item-info">{`${prop.date} by ${prop.assignedBy}`}</span>
<i className="task-item-pseudo-button dx-icon dx-icon-overflow"></i>
</div>
);
}
export default TaskItem;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
export const tabsPositionsSelectBoxLabel = { 'aria-label': 'Tab position' };
export const tabsPositions = ['left', 'top', 'right', 'bottom'];
export const stylingModesSelectBoxLabel = { 'aria-label': 'Styling mode' };
export const stylingModes = ['secondary', 'primary'];
export const iconPositionsSelectBoxLabel = { 'aria-label': 'Icon positions' };
export const iconPositions = ['top', 'start', 'end', 'bottom'];
const tasks = [
{
status: 'Not Started',
priority: 'high',
text: 'Revenue Projections',
date: '2023/09/16',
assignedBy: 'John Heart',
},
{
status: 'Not Started',
priority: 'high',
text: 'New Brochures',
date: '2023/09/16',
assignedBy: 'Samantha Bright',
},
{
status: 'Not Started',
priority: 'medium',
text: 'Training',
date: '2023/09/16',
assignedBy: 'Arthur Miller',
},
{
status: 'Not Started',
priority: 'medium',
text: 'NDA',
date: '2023/09/16',
assignedBy: 'Robert Reagan',
},
{
status: 'Not Started',
priority: 'low',
text: 'Health Insurance',
date: '2023/09/16',
assignedBy: 'Greta Sims',
},
{
status: 'Help Needed',
priority: 'low',
text: 'TV Recall',
date: '2023/09/16',
assignedBy: 'Brett Wade',
},
{
status: 'Help Needed',
priority: 'low',
text: 'Recall and Refund Forms',
date: '2023/09/16',
assignedBy: 'Sandra Johnson',
},
{
status: 'Help Needed',
priority: 'high',
text: 'Shippers',
date: '2023/09/16',
assignedBy: 'Ed Holmes',
},
{
status: 'Help Needed',
priority: 'medium',
text: 'Hardware Upgrade',
date: '2023/09/16',
assignedBy: 'Barb Banks',
},
{
status: 'In Progress',
priority: 'medium',
text: 'Online Sales',
date: '2023/09/16',
assignedBy: 'Cindy Stanwick',
},
{
status: 'In Progress',
priority: 'medium',
text: 'New Website Design',
date: '2023/09/16',
assignedBy: 'Sammy Hill',
},
{
status: 'In Progress',
priority: 'low',
text: 'Bandwidth Increase',
date: '2023/09/16',
assignedBy: 'Davey Jones',
},
{
status: 'In Progress',
priority: 'medium',
text: 'Support',
date: '2023/09/16',
assignedBy: 'Victor Norris',
},
{
status: 'In Progress',
priority: 'low',
text: 'Training Material',
date: '2023/09/16',
assignedBy: 'John Heart',
},
{
status: 'Deferred',
priority: 'medium',
text: 'New Database',
date: '2023/09/16',
assignedBy: 'Samantha Bright',
},
{
status: 'Deferred',
priority: 'high',
text: 'Automation Server',
date: '2023/09/16',
assignedBy: 'Arthur Miller',
},
{
status: 'Deferred',
priority: 'medium',
text: 'Retail Sales',
date: '2023/09/16',
assignedBy: 'Robert Reagan',
},
{
status: 'Deferred',
priority: 'medium',
text: 'Shipping Labels',
date: '2023/09/16',
assignedBy: 'Greta Sims',
},
{
status: 'Rejected',
priority: 'high',
text: 'Schedule Meeting with Sales Team',
date: '2023/09/16',
assignedBy: 'Sandra Johnson',
},
{
status: 'Rejected',
priority: 'medium',
text: 'Confirm Availability for Sales Meeting',
date: '2023/09/16',
assignedBy: 'Ed Holmes',
},
{
status: 'Rejected',
priority: 'medium',
text: 'Reschedule Sales Team Meeting',
date: '2023/09/16',
assignedBy: 'Barb Banks',
},
{
status: 'Rejected',
priority: 'high',
text: 'Update Database with New Leads',
date: '2023/09/16',
assignedBy: 'Kevin Carter',
},
{
status: 'Rejected',
priority: 'low',
text: 'Send Territory Sales Breakdown',
date: '2023/09/16',
assignedBy: 'Cindy Stanwick',
},
{
status: 'Completed',
priority: 'medium',
text: 'Territory Sales Breakdown Report',
date: '2023/09/16',
assignedBy: 'Sammy Hill',
},
{
status: 'Completed',
priority: 'low',
text: 'Return Merchandise Report',
date: '2023/09/16',
assignedBy: 'Davey Jones',
},
{
status: 'Completed',
priority: 'high',
text: 'Staff Productivity Report',
date: '2023/09/16',
assignedBy: 'Victor Norris',
},
{
status: 'Completed',
priority: 'medium',
text: 'Review HR Budget Company Wide',
date: '2023/09/16',
assignedBy: 'Mary Stern',
},
];
export const dataSource = [
{
icon: 'description',
title: 'Not Started',
tasks: tasks.filter((item) => item.status === 'Not Started'),
},
{
icon: 'taskhelpneeded',
title: 'Help Needed',
tasks: tasks.filter((item) => item.status === 'Help Needed'),
},
{
icon: 'taskinprogress',
title: 'In Progress',
tasks: tasks.filter((item) => item.status === 'In Progress'),
},
{
icon: 'taskstop',
title: 'Deferred',
tasks: tasks.filter((item) => item.status === 'Deferred'),
},
{
icon: 'taskrejected',
title: 'Rejected',
tasks: tasks.filter((item) => item.status === 'Rejected'),
},
{
icon: 'taskcomplete',
title: 'Completed',
tasks: tasks.filter((item) => item.status === 'Completed'),
},
];
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
.tabpanel-demo {
display: flex;
height: 100%;
}
.widget-container {
display: flex;
justify-content: center;
flex-grow: 1;
min-width: 360px;
padding: 16px 32px;
}
.tabpanel-demo .dx-tabpanel {
background-color: var(--dx-component-color-bg);
}
.dx-theme-material .widget-container {
background-color: rgba(191, 191, 191, 0.15);
}
.dx-tabpanel-tabs-position-left .dx-tabpanel-container,
.dx-tabpanel-tabs-position-right .dx-tabpanel-container {
width: 0;
}
.dx-viewport:not(.dx-theme-generic) .dx-tabpanel {
border-radius: 8px;
overflow: clip;
}
.dx-tabs-vertical {
min-width: 120px;
}
.options {
display: inline-flex;
flex-direction: column;
flex-shrink: 0;
box-sizing: border-box;
width: 272px;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 20px;
}
.tabpanel-item {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
}
.task-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 50px;
padding: 8px 12px 8px 8px;
border-radius: 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
}
.task-item::before {
content: "";
position: absolute;
top: 8px;
left: 6px;
bottom: 8px;
width: 3px;
border-radius: 4px;
}
.task-item-priority-high::before {
background-color: #e1bee7;
}
.task-item-priority-medium::before {
background-color: #ffe0b2;
}
.task-item-priority-low::before {
background-color: #c8e6c9;
}
.task-item-text,
.task-item-info {
margin: 0;
padding: 0 24px 0 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-item-info {
font-size: 12px;
opacity: 0.6;
}
.task-item-pseudo-button {
position: absolute;
right: 8px;
top: 50%;
font-size: 18px;
transform: translateY(-50%);
cursor: pointer;
opacity: 0.6;
}
.dx-color-scheme-contrast .task-item {
border: 1px solid #fff;
}
.dx-theme-fluent.dx-color-scheme-blue-dark .task-item {
background-color: #1f1f1f;
}
Generate Similar Tabs Based on a Data Source
To generate similar tabs and views, bind the TabPanel to data (using the items or dataSource property). Both these properties can work with local arrays, but dataSource also accepts a DataSource object. You can use this object if you need to process the local array or fetch the array from a remote data source. In this demo, the dataSource property is set to a local array.
Each object in the items[] or dataSource array can contain predefined fields, such as title or icon (see the items[] section for the full list). The TabPanel automatically recognizes these fields and creates the default tab and view appearance based on them.
Customize Tab Contents and Appearance
You can initialize tab contents (text, icons and badges) with values from underlying data objects.
Use the drop-down editors on the right to change tab position, styling mode, and icon position.