Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React, { useState } from 'react';
import { TreeList, Column, type TreeListTypes } from 'devextreme-react/tree-list';
import { SelectBox } from 'devextreme-react/select-box';
import { employees, columnResizingModeLabel } from './data.ts';
const resizingModes = ['nextColumn', 'widget'];
const expandedRowKeys = [1, 3, 6];
const App = () => {
const [columnResizingMode, setColumnResizingMode] = useState<TreeListTypes.ColumnResizeMode>('nextColumn');
return (
<div>
<TreeList
id="employees"
dataSource={employees}
allowColumnResizing={true}
columnResizingMode={columnResizingMode}
columnMinWidth={50}
columnAutoWidth={true}
showRowLines={true}
showBorders={true}
defaultExpandedRowKeys={expandedRowKeys}
keyExpr="ID"
parentIdExpr="Head_ID"
>
<Column dataField="Title" caption="Position" />
<Column dataField="Full_Name" />
<Column dataField="City" />
<Column dataField="State" />
<Column dataField="Hire_Date" dataType="date" />
</TreeList>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Column resizing mode:</span>
<SelectBox
items={resizingModes}
value={columnResizingMode}
inputAttr={columnResizingModeLabel}
width={250}
onValueChange={setColumnResizingMode}
/>
</div>
</div>
</div>
);
};
export default App;
import React, { useState } from 'react';
import { TreeList, Column } from 'devextreme-react/tree-list';
import { SelectBox } from 'devextreme-react/select-box';
import { employees, columnResizingModeLabel } from './data.js';
const resizingModes = ['nextColumn', 'widget'];
const expandedRowKeys = [1, 3, 6];
const App = () => {
const [columnResizingMode, setColumnResizingMode] = useState('nextColumn');
return (
<div>
<TreeList
id="employees"
dataSource={employees}
allowColumnResizing={true}
columnResizingMode={columnResizingMode}
columnMinWidth={50}
columnAutoWidth={true}
showRowLines={true}
showBorders={true}
defaultExpandedRowKeys={expandedRowKeys}
keyExpr="ID"
parentIdExpr="Head_ID"
>
<Column
dataField="Title"
caption="Position"
/>
<Column dataField="Full_Name" />
<Column dataField="City" />
<Column dataField="State" />
<Column
dataField="Hire_Date"
dataType="date"
/>
</TreeList>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Column resizing mode:</span>
<SelectBox
items={resizingModes}
value={columnResizingMode}
inputAttr={columnResizingModeLabel}
width={250}
onValueChange={setColumnResizingMode}
/>
</div>
</div>
</div>
);
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
export const employees = [{
ID: 1,
Head_ID: 0,
Full_Name: 'John Heart',
Prefix: 'Mr.',
Title: 'CEO',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'jheart_DX_skype',
Mobile_Phone: '(213) 555-9392',
Birth_Date: '1964-03-16',
Hire_Date: '1995-01-15',
}, {
ID: 2,
Head_ID: 1,
Full_Name: 'Samantha Bright',
Prefix: 'Dr.',
Title: 'COO',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'samanthab_DX_skype',
Mobile_Phone: '(213) 555-2858',
Birth_Date: '1966-05-02',
Hire_Date: '2004-05-24',
}, {
ID: 3,
Head_ID: 1,
Full_Name: 'Arthur Miller',
Prefix: 'Mr.',
Title: 'CTO',
City: 'Denver',
State: 'Colorado',
Email: '[email protected]',
Skype: 'arthurm_DX_skype',
Mobile_Phone: '(310) 555-8583',
Birth_Date: '1972-07-11',
Hire_Date: '2007-12-18',
}, {
ID: 4,
Head_ID: 1,
Full_Name: 'Robert Reagan',
Prefix: 'Mr.',
Title: 'CMO',
City: 'Bentonville',
State: 'Arkansas',
Email: '[email protected]',
Skype: 'robertr_DX_skype',
Mobile_Phone: '(818) 555-2387',
Birth_Date: '1974-09-07',
Hire_Date: '2002-11-08',
}, {
ID: 5,
Head_ID: 1,
Full_Name: 'Greta Sims',
Prefix: 'Ms.',
Title: 'HR Manager',
City: 'Atlanta',
State: 'Georgia',
Email: '[email protected]',
Skype: 'gretas_DX_skype',
Mobile_Phone: '(818) 555-6546',
Birth_Date: '1977-11-22',
Hire_Date: '1998-04-23',
}, {
ID: 6,
Head_ID: 3,
Full_Name: 'Brett Wade',
Prefix: 'Mr.',
Title: 'IT Manager',
City: 'Reno',
State: 'Nevada',
Email: '[email protected]',
Skype: 'brettw_DX_skype',
Mobile_Phone: '(626) 555-0358',
Birth_Date: '1968-12-01',
Hire_Date: '2009-03-06',
}, {
ID: 7,
Head_ID: 5,
Full_Name: 'Sandra Johnson',
Prefix: 'Mrs.',
Title: 'Controller',
City: 'Beaver',
State: 'Utah',
Email: '[email protected]',
Skype: 'sandraj_DX_skype',
Mobile_Phone: '(562) 555-2082',
Birth_Date: '1974-11-15',
Hire_Date: '2005-05-11',
}, {
ID: 8,
Head_ID: 4,
Full_Name: 'Ed Holmes',
Prefix: 'Dr.',
Title: 'Sales Manager',
City: 'Malibu',
State: 'California',
Email: '[email protected]',
Skype: 'edwardh_DX_skype',
Mobile_Phone: '(310) 555-1288',
Birth_Date: '1973-07-14',
Hire_Date: '2005-06-19',
}, {
ID: 9,
Head_ID: 3,
Full_Name: 'Barb Banks',
Prefix: 'Mrs.',
Title: 'Support Manager',
City: 'Phoenix',
State: 'Arizona',
Email: '[email protected]',
Skype: 'barbarab_DX_skype',
Mobile_Phone: '(310) 555-3355',
Birth_Date: '1979-04-14',
Hire_Date: '2002-08-07',
}, {
ID: 10,
Head_ID: 2,
Full_Name: 'Kevin Carter',
Prefix: 'Mr.',
Title: 'Shipping Manager',
City: 'San Diego',
State: 'California',
Email: '[email protected]',
Skype: 'kevinc_DX_skype',
Mobile_Phone: '(213) 555-2840',
Birth_Date: '1978-01-09',
Hire_Date: '2009-08-11',
}, {
ID: 11,
Head_ID: 5,
Full_Name: 'Cindy Stanwick',
Prefix: 'Ms.',
Title: 'HR Assistant',
City: 'Little Rock',
State: 'Arkansas',
Email: '[email protected]',
Skype: 'cindys_DX_skype',
Mobile_Phone: '(818) 555-6655',
Birth_Date: '1985-06-05',
Hire_Date: '2008-03-24',
}, {
ID: 12,
Head_ID: 8,
Full_Name: 'Sammy Hill',
Prefix: 'Mr.',
Title: 'Sales Assistant',
City: 'Pasadena',
State: 'California',
Email: '[email protected]',
Skype: 'sammyh_DX_skype',
Mobile_Phone: '(626) 555-7292',
Birth_Date: '1984-02-17',
Hire_Date: '2012-02-01',
}, {
ID: 13,
Head_ID: 10,
Full_Name: 'Davey Jones',
Prefix: 'Mr.',
Title: 'Shipping Assistant',
City: 'Pasadena',
State: 'California',
Email: '[email protected]',
Skype: 'davidj_DX_skype',
Mobile_Phone: '(626) 555-0281',
Birth_Date: '1983-03-06',
Hire_Date: '2011-04-24',
}, {
ID: 14,
Head_ID: 10,
Full_Name: 'Victor Norris',
Prefix: 'Mr.',
Title: 'Shipping Assistant',
City: 'Little Rock',
State: 'Arkansas',
Email: '[email protected]',
Skype: 'victorn_DX_skype',
Mobile_Phone: '(213) 555-9278',
Birth_Date: '1986-07-23',
Hire_Date: '2012-07-23',
}, {
ID: 15,
Head_ID: 10,
Full_Name: 'Mary Stern',
Prefix: 'Ms.',
Title: 'Shipping Assistant',
City: 'Beaver',
State: 'Utah',
Email: '[email protected]',
Skype: 'marys_DX_skype',
Mobile_Phone: '(818) 555-7857',
Birth_Date: '1982-04-08',
Hire_Date: '2012-08-12',
}, {
ID: 16,
Head_ID: 10,
Full_Name: 'Robin Cosworth',
Prefix: 'Mrs.',
Title: 'Shipping Assistant',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'robinc_DX_skype',
Mobile_Phone: '(818) 555-0942',
Birth_Date: '1981-06-12',
Hire_Date: '2012-09-01',
}, {
ID: 17,
Head_ID: 9,
Full_Name: 'Kelly Rodriguez',
Prefix: 'Ms.',
Title: 'Support Assistant',
City: 'Boise',
State: 'Idaho',
Email: '[email protected]',
Skype: 'kellyr_DX_skype',
Mobile_Phone: '(818) 555-9248',
Birth_Date: '1988-05-11',
Hire_Date: '2012-10-13',
}, {
ID: 18,
Head_ID: 9,
Full_Name: 'James Anderson',
Prefix: 'Mr.',
Title: 'Support Assistant',
City: 'Atlanta',
State: 'Georgia',
Email: '[email protected]',
Skype: 'jamesa_DX_skype',
Mobile_Phone: '(323) 555-4702',
Birth_Date: '1987-01-29',
Hire_Date: '2012-10-18',
}, {
ID: 19,
Head_ID: 9,
Full_Name: 'Antony Remmen',
Prefix: 'Mr.',
Title: 'Support Assistant',
City: 'Boise',
State: 'Idaho',
Email: '[email protected]',
Skype: 'anthonyr_DX_skype',
Mobile_Phone: '(310) 555-6625',
Birth_Date: '1986-02-19',
Hire_Date: '2013-01-19',
}, {
ID: 20,
Head_ID: 8,
Full_Name: 'Olivia Peyton',
Prefix: 'Mrs.',
Title: 'Sales Assistant',
City: 'Atlanta',
State: 'Georgia',
Email: '[email protected]',
Skype: 'oliviap_DX_skype',
Mobile_Phone: '(310) 555-2728',
Birth_Date: '1981-06-03',
Hire_Date: '2012-05-14',
}, {
ID: 21,
Head_ID: 6,
Full_Name: 'Taylor Riley',
Prefix: 'Mr.',
Title: 'Network Admin',
City: 'San Jose',
State: 'California',
Email: '[email protected]',
Skype: 'taylorr_DX_skype',
Mobile_Phone: '(310) 555-7276',
Birth_Date: '1982-08-14',
Hire_Date: '2012-04-14',
}, {
ID: 22,
Head_ID: 6,
Full_Name: 'Amelia Harper',
Prefix: 'Mrs.',
Title: 'Network Admin',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'ameliah_DX_skype',
Mobile_Phone: '(213) 555-4276',
Birth_Date: '1983-11-19',
Hire_Date: '2011-02-10',
}, {
ID: 23,
Head_ID: 6,
Full_Name: 'Wally Hobbs',
Prefix: 'Mr.',
Title: 'Programmer',
City: 'Chatsworth',
State: 'California',
Email: '[email protected]',
Skype: 'wallyh_DX_skype',
Mobile_Phone: '(818) 555-8872',
Birth_Date: '1984-12-24',
Hire_Date: '2011-02-17',
}, {
ID: 24,
Head_ID: 6,
Full_Name: 'Brad Jameson',
Prefix: 'Mr.',
Title: 'Programmer',
City: 'San Fernando',
State: 'California',
Email: '[email protected]',
Skype: 'bradleyj_DX_skype',
Mobile_Phone: '(818) 555-4646',
Birth_Date: '1988-10-12',
Hire_Date: '2011-03-02',
}, {
ID: 25,
Head_ID: 6,
Full_Name: 'Karen Goodson',
Prefix: 'Miss',
Title: 'Programmer',
City: 'South Pasadena',
State: 'California',
Email: '[email protected]',
Skype: 'kareng_DX_skype',
Mobile_Phone: '(626) 555-0908',
Birth_Date: '1987-04-26',
Hire_Date: '2011-03-14',
}, {
ID: 26,
Head_ID: 5,
Full_Name: 'Marcus Orbison',
Prefix: 'Mr.',
Title: 'Travel Coordinator',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'marcuso_DX_skype',
Mobile_Phone: '(213) 555-7098',
Birth_Date: '1982-03-02',
Hire_Date: '2005-05-19',
}, {
ID: 27,
Head_ID: 5,
Full_Name: 'Sandy Bright',
Prefix: 'Ms.',
Title: 'Benefits Coordinator',
City: 'Denver',
State: 'Colorado',
Email: '[email protected]',
Skype: 'sandrab_DX_skype',
Mobile_Phone: '(818) 555-0524',
Birth_Date: '1983-09-11',
Hire_Date: '2005-06-04',
}, {
ID: 28,
Head_ID: 6,
Full_Name: 'Morgan Kennedy',
Prefix: 'Mrs.',
Title: 'Graphic Designer',
City: 'San Fernando Valley',
State: 'California',
Email: '[email protected]',
Skype: 'morgank_DX_skype',
Mobile_Phone: '(818) 555-8238',
Birth_Date: '1984-07-17',
Hire_Date: '2012-01-11',
}, {
ID: 29,
Head_ID: 28,
Full_Name: 'Violet Bailey',
Prefix: 'Ms.',
Title: 'Jr Graphic Designer',
City: 'La Canada',
State: 'California',
Email: '[email protected]',
Skype: 'violetb_DX_skype',
Mobile_Phone: '(818) 555-2478',
Birth_Date: '1985-06-10',
Hire_Date: '2012-01-19',
}, {
ID: 30,
Head_ID: 5,
Full_Name: 'Ken Samuelson',
Prefix: 'Dr.',
Title: 'Ombudsman',
City: 'St. Louis',
State: 'Missouri',
Email: '[email protected]',
Skype: 'kents_DX_skype',
Mobile_Phone: '(562) 555-9282',
Birth_Date: '1972-09-11',
Hire_Date: '2009-04-22',
}];
export const columnResizingModeLabel = { 'aria-label': 'Column Resizing Mode' };
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://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:[email protected]/lib/plugin.js',
'typescript': 'npm:[email protected]/lib/typescript.js',
'jszip': 'npm:[email protected]/dist/jszip.min.js',
'react': 'npm:[email protected]/umd/react.development.js',
'react-dom': 'npm:[email protected]/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:[email protected]/dist/es5/rrule.js',
'luxon': 'npm:[email protected]/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:[email protected]/cjs',
'devextreme-react': 'npm:[email protected]/cjs',
'devextreme-quill': 'npm:[email protected]/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:[email protected]/dist/dx-diagram.js',
'devexpress-gantt': 'npm:[email protected]/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/[email protected]',
'inferno': 'npm:[email protected]/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:[email protected]/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:[email protected]',
// SystemJS plugins
'plugin-babel': 'npm:[email protected]/plugin-babel.js',
'systemjs-babel-build': 'npm:[email protected]/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:[email protected]/standalone.js',
'prettier/parser-html': 'npm:[email protected]/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/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/[email protected]/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const employees = [
{
ID: 1,
Head_ID: 0,
Full_Name: 'John Heart',
Prefix: 'Mr.',
Title: 'CEO',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'jheart_DX_skype',
Mobile_Phone: '(213) 555-9392',
Birth_Date: '1964-03-16',
Hire_Date: '1995-01-15',
},
{
ID: 2,
Head_ID: 1,
Full_Name: 'Samantha Bright',
Prefix: 'Dr.',
Title: 'COO',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'samanthab_DX_skype',
Mobile_Phone: '(213) 555-2858',
Birth_Date: '1966-05-02',
Hire_Date: '2004-05-24',
},
{
ID: 3,
Head_ID: 1,
Full_Name: 'Arthur Miller',
Prefix: 'Mr.',
Title: 'CTO',
City: 'Denver',
State: 'Colorado',
Email: '[email protected]',
Skype: 'arthurm_DX_skype',
Mobile_Phone: '(310) 555-8583',
Birth_Date: '1972-07-11',
Hire_Date: '2007-12-18',
},
{
ID: 4,
Head_ID: 1,
Full_Name: 'Robert Reagan',
Prefix: 'Mr.',
Title: 'CMO',
City: 'Bentonville',
State: 'Arkansas',
Email: '[email protected]',
Skype: 'robertr_DX_skype',
Mobile_Phone: '(818) 555-2387',
Birth_Date: '1974-09-07',
Hire_Date: '2002-11-08',
},
{
ID: 5,
Head_ID: 1,
Full_Name: 'Greta Sims',
Prefix: 'Ms.',
Title: 'HR Manager',
City: 'Atlanta',
State: 'Georgia',
Email: '[email protected]',
Skype: 'gretas_DX_skype',
Mobile_Phone: '(818) 555-6546',
Birth_Date: '1977-11-22',
Hire_Date: '1998-04-23',
},
{
ID: 6,
Head_ID: 3,
Full_Name: 'Brett Wade',
Prefix: 'Mr.',
Title: 'IT Manager',
City: 'Reno',
State: 'Nevada',
Email: '[email protected]',
Skype: 'brettw_DX_skype',
Mobile_Phone: '(626) 555-0358',
Birth_Date: '1968-12-01',
Hire_Date: '2009-03-06',
},
{
ID: 7,
Head_ID: 5,
Full_Name: 'Sandra Johnson',
Prefix: 'Mrs.',
Title: 'Controller',
City: 'Beaver',
State: 'Utah',
Email: '[email protected]',
Skype: 'sandraj_DX_skype',
Mobile_Phone: '(562) 555-2082',
Birth_Date: '1974-11-15',
Hire_Date: '2005-05-11',
},
{
ID: 8,
Head_ID: 4,
Full_Name: 'Ed Holmes',
Prefix: 'Dr.',
Title: 'Sales Manager',
City: 'Malibu',
State: 'California',
Email: '[email protected]',
Skype: 'edwardh_DX_skype',
Mobile_Phone: '(310) 555-1288',
Birth_Date: '1973-07-14',
Hire_Date: '2005-06-19',
},
{
ID: 9,
Head_ID: 3,
Full_Name: 'Barb Banks',
Prefix: 'Mrs.',
Title: 'Support Manager',
City: 'Phoenix',
State: 'Arizona',
Email: '[email protected]',
Skype: 'barbarab_DX_skype',
Mobile_Phone: '(310) 555-3355',
Birth_Date: '1979-04-14',
Hire_Date: '2002-08-07',
},
{
ID: 10,
Head_ID: 2,
Full_Name: 'Kevin Carter',
Prefix: 'Mr.',
Title: 'Shipping Manager',
City: 'San Diego',
State: 'California',
Email: '[email protected]',
Skype: 'kevinc_DX_skype',
Mobile_Phone: '(213) 555-2840',
Birth_Date: '1978-01-09',
Hire_Date: '2009-08-11',
},
{
ID: 11,
Head_ID: 5,
Full_Name: 'Cindy Stanwick',
Prefix: 'Ms.',
Title: 'HR Assistant',
City: 'Little Rock',
State: 'Arkansas',
Email: '[email protected]',
Skype: 'cindys_DX_skype',
Mobile_Phone: '(818) 555-6655',
Birth_Date: '1985-06-05',
Hire_Date: '2008-03-24',
},
{
ID: 12,
Head_ID: 8,
Full_Name: 'Sammy Hill',
Prefix: 'Mr.',
Title: 'Sales Assistant',
City: 'Pasadena',
State: 'California',
Email: '[email protected]',
Skype: 'sammyh_DX_skype',
Mobile_Phone: '(626) 555-7292',
Birth_Date: '1984-02-17',
Hire_Date: '2012-02-01',
},
{
ID: 13,
Head_ID: 10,
Full_Name: 'Davey Jones',
Prefix: 'Mr.',
Title: 'Shipping Assistant',
City: 'Pasadena',
State: 'California',
Email: '[email protected]',
Skype: 'davidj_DX_skype',
Mobile_Phone: '(626) 555-0281',
Birth_Date: '1983-03-06',
Hire_Date: '2011-04-24',
},
{
ID: 14,
Head_ID: 10,
Full_Name: 'Victor Norris',
Prefix: 'Mr.',
Title: 'Shipping Assistant',
City: 'Little Rock',
State: 'Arkansas',
Email: '[email protected]',
Skype: 'victorn_DX_skype',
Mobile_Phone: '(213) 555-9278',
Birth_Date: '1986-07-23',
Hire_Date: '2012-07-23',
},
{
ID: 15,
Head_ID: 10,
Full_Name: 'Mary Stern',
Prefix: 'Ms.',
Title: 'Shipping Assistant',
City: 'Beaver',
State: 'Utah',
Email: '[email protected]',
Skype: 'marys_DX_skype',
Mobile_Phone: '(818) 555-7857',
Birth_Date: '1982-04-08',
Hire_Date: '2012-08-12',
},
{
ID: 16,
Head_ID: 10,
Full_Name: 'Robin Cosworth',
Prefix: 'Mrs.',
Title: 'Shipping Assistant',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'robinc_DX_skype',
Mobile_Phone: '(818) 555-0942',
Birth_Date: '1981-06-12',
Hire_Date: '2012-09-01',
},
{
ID: 17,
Head_ID: 9,
Full_Name: 'Kelly Rodriguez',
Prefix: 'Ms.',
Title: 'Support Assistant',
City: 'Boise',
State: 'Idaho',
Email: '[email protected]',
Skype: 'kellyr_DX_skype',
Mobile_Phone: '(818) 555-9248',
Birth_Date: '1988-05-11',
Hire_Date: '2012-10-13',
},
{
ID: 18,
Head_ID: 9,
Full_Name: 'James Anderson',
Prefix: 'Mr.',
Title: 'Support Assistant',
City: 'Atlanta',
State: 'Georgia',
Email: '[email protected]',
Skype: 'jamesa_DX_skype',
Mobile_Phone: '(323) 555-4702',
Birth_Date: '1987-01-29',
Hire_Date: '2012-10-18',
},
{
ID: 19,
Head_ID: 9,
Full_Name: 'Antony Remmen',
Prefix: 'Mr.',
Title: 'Support Assistant',
City: 'Boise',
State: 'Idaho',
Email: '[email protected]',
Skype: 'anthonyr_DX_skype',
Mobile_Phone: '(310) 555-6625',
Birth_Date: '1986-02-19',
Hire_Date: '2013-01-19',
},
{
ID: 20,
Head_ID: 8,
Full_Name: 'Olivia Peyton',
Prefix: 'Mrs.',
Title: 'Sales Assistant',
City: 'Atlanta',
State: 'Georgia',
Email: '[email protected]',
Skype: 'oliviap_DX_skype',
Mobile_Phone: '(310) 555-2728',
Birth_Date: '1981-06-03',
Hire_Date: '2012-05-14',
},
{
ID: 21,
Head_ID: 6,
Full_Name: 'Taylor Riley',
Prefix: 'Mr.',
Title: 'Network Admin',
City: 'San Jose',
State: 'California',
Email: '[email protected]',
Skype: 'taylorr_DX_skype',
Mobile_Phone: '(310) 555-7276',
Birth_Date: '1982-08-14',
Hire_Date: '2012-04-14',
},
{
ID: 22,
Head_ID: 6,
Full_Name: 'Amelia Harper',
Prefix: 'Mrs.',
Title: 'Network Admin',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'ameliah_DX_skype',
Mobile_Phone: '(213) 555-4276',
Birth_Date: '1983-11-19',
Hire_Date: '2011-02-10',
},
{
ID: 23,
Head_ID: 6,
Full_Name: 'Wally Hobbs',
Prefix: 'Mr.',
Title: 'Programmer',
City: 'Chatsworth',
State: 'California',
Email: '[email protected]',
Skype: 'wallyh_DX_skype',
Mobile_Phone: '(818) 555-8872',
Birth_Date: '1984-12-24',
Hire_Date: '2011-02-17',
},
{
ID: 24,
Head_ID: 6,
Full_Name: 'Brad Jameson',
Prefix: 'Mr.',
Title: 'Programmer',
City: 'San Fernando',
State: 'California',
Email: '[email protected]',
Skype: 'bradleyj_DX_skype',
Mobile_Phone: '(818) 555-4646',
Birth_Date: '1988-10-12',
Hire_Date: '2011-03-02',
},
{
ID: 25,
Head_ID: 6,
Full_Name: 'Karen Goodson',
Prefix: 'Miss',
Title: 'Programmer',
City: 'South Pasadena',
State: 'California',
Email: '[email protected]',
Skype: 'kareng_DX_skype',
Mobile_Phone: '(626) 555-0908',
Birth_Date: '1987-04-26',
Hire_Date: '2011-03-14',
},
{
ID: 26,
Head_ID: 5,
Full_Name: 'Marcus Orbison',
Prefix: 'Mr.',
Title: 'Travel Coordinator',
City: 'Los Angeles',
State: 'California',
Email: '[email protected]',
Skype: 'marcuso_DX_skype',
Mobile_Phone: '(213) 555-7098',
Birth_Date: '1982-03-02',
Hire_Date: '2005-05-19',
},
{
ID: 27,
Head_ID: 5,
Full_Name: 'Sandy Bright',
Prefix: 'Ms.',
Title: 'Benefits Coordinator',
City: 'Denver',
State: 'Colorado',
Email: '[email protected]',
Skype: 'sandrab_DX_skype',
Mobile_Phone: '(818) 555-0524',
Birth_Date: '1983-09-11',
Hire_Date: '2005-06-04',
},
{
ID: 28,
Head_ID: 6,
Full_Name: 'Morgan Kennedy',
Prefix: 'Mrs.',
Title: 'Graphic Designer',
City: 'San Fernando Valley',
State: 'California',
Email: '[email protected]',
Skype: 'morgank_DX_skype',
Mobile_Phone: '(818) 555-8238',
Birth_Date: '1984-07-17',
Hire_Date: '2012-01-11',
},
{
ID: 29,
Head_ID: 28,
Full_Name: 'Violet Bailey',
Prefix: 'Ms.',
Title: 'Jr Graphic Designer',
City: 'La Canada',
State: 'California',
Email: '[email protected]',
Skype: 'violetb_DX_skype',
Mobile_Phone: '(818) 555-2478',
Birth_Date: '1985-06-10',
Hire_Date: '2012-01-19',
},
{
ID: 30,
Head_ID: 5,
Full_Name: 'Ken Samuelson',
Prefix: 'Dr.',
Title: 'Ombudsman',
City: 'St. Louis',
State: 'Missouri',
Email: '[email protected]',
Skype: 'kents_DX_skype',
Mobile_Phone: '(562) 555-9282',
Birth_Date: '1972-09-11',
Hire_Date: '2009-04-22',
},
];
export const columnResizingModeLabel = { 'aria-label': 'Column Resizing Mode' };
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/client/shim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
#employees {
max-height: 307px;
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: absolute;
bottom: 0;
width: 100%;
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 10px;
display: flex;
align-items: center;
}
.option > span {
position: relative;
top: 2px;
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
Specify Custom Column Widths
You can set custom widths for all or individual columns. Individual settings override common settings. Use the following properties to specify the widths:
-
columnWidth / columns[].width
Specify a width for all or individual columns. -
columnMinWidth / columns[].minWidth
Specify a minimum width for all or individual columns.
Auto-Adjust Column Widths to Content
In this demo, columns adjust their widths to the content. To enable this feature, set the columnAutoWidth property to true.
Allow Users to Resize Columns
Users can resize columns if the allowColumnResizing property is enabled. When a user resizes a column, the TreeList's behavior depends on the columnResizingMode property value:
-
"nextColumn"
The TreeList resizes the adjacent column; the total component width does not change. -
"widget"
The total component width increases or decreases; all other columns maintain their widths.
Use the drop-down list below the TreeList to try both values.
If you do not want users to resize a specific column, disable its allowResizing property.