React Data Grid - Local Reordering

import React, { useCallback, useState } from 'react'; import DataGrid, { Column, RowDragging, Scrolling, Lookup, Sorting, } from 'devextreme-react/data-grid'; import { CheckBox } from 'devextreme-react/check-box'; import { tasks as defaultTasks, employees } from './data.js'; const App = () => { const [tasks, setTasks] = useState(defaultTasks); const [showDragIcons, setShowDragIcons] = useState(true); const onReorder = useCallback( (e) => { const visibleRows = e.component.getVisibleRows(); const newTasks = [...tasks]; const toIndex = newTasks.findIndex((item) => item.ID === visibleRows[e.toIndex].data.ID); const fromIndex = newTasks.findIndex((item) => item.ID === e.itemData.ID); newTasks.splice(fromIndex, 1); newTasks.splice(toIndex, 0, e.itemData); setTasks(newTasks); }, [tasks], ); const onShowDragIconsChanged = useCallback((args) => { setShowDragIcons(args.value); }, []); return ( <React.Fragment> <DataGrid height={440} dataSource={tasks} keyExpr="ID" showBorders={true} > <RowDragging allowReordering={true} onReorder={onReorder} showDragIcons={showDragIcons} /> <Scrolling mode="virtual" /> <Sorting mode="none" /> <Column dataField="ID" width={55} /> <Column dataField="Owner" width={150} > <Lookup dataSource={employees} valueExpr="ID" displayExpr="FullName" /> </Column> <Column dataField="AssignedEmployee" caption="Assignee" width={150} > <Lookup dataSource={employees} valueExpr="ID" displayExpr="FullName" /> </Column> <Column dataField="Subject" /> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox value={showDragIcons} text="Show Drag Icons" onValueChanged={onShowDragIconsChanged} /> </div> </div> </React.Fragment> ); }; 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, FullName: 'John Heart', Department: 'Management', Title: 'CEO', }, { ID: 2, FullName: 'Samantha Bright', Department: 'Management', Title: 'COO', }, { ID: 3, FullName: 'Arthur Miller', Department: 'Management', Title: 'CTO', }, { ID: 4, FullName: 'Robert Reagan', Department: 'Management', Title: 'CMO', }, { ID: 5, FullName: 'Greta Sims', Department: 'Human Resources', Title: 'HR Manager', }, { ID: 6, FullName: 'Brett Wade', Department: 'IT', Title: 'IT Manager', }, { ID: 7, FullName: 'Sandra Johnson', Department: 'Human Resources', Title: 'Controller', }, { ID: 8, FullName: 'Ed Holmes', Department: 'Sales', Title: 'Sales Manager', }, { ID: 9, FullName: 'Barb Banks', Department: 'Support', Title: 'Support Manager', }, { ID: 10, FullName: 'Kevin Carter', Department: 'Shipping', Title: 'Shipping Manager', }, { ID: 11, FullName: 'Cindy Stanwick', Department: 'Human Resources', Title: 'HR Assistant', }, { ID: 12, FullName: 'Sammy Hill', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 13, FullName: 'Davey Jones', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 14, FullName: 'Victor Norris', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 15, FullName: 'Mary Stern', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 16, FullName: 'Robin Cosworth', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 17, FullName: 'Kelly Rodriguez', Department: 'Support', Title: 'Support Assistant', }, { ID: 18, FullName: 'James Anderson', Department: 'Support', Title: 'Support Assistant', }, { ID: 19, FullName: 'Antony Remmen', Department: 'Support', Title: 'Support Assistant', }, { ID: 20, FullName: 'Olivia Peyton', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 21, FullName: 'Taylor Riley', Department: 'IT', Title: 'Network Admin', }, { ID: 22, FullName: 'Amelia Harper', Department: 'IT', Title: 'Network Admin', }, { ID: 23, FullName: 'Wally Hobbs', Department: 'IT', Title: 'Programmer', }, { ID: 24, FullName: 'Brad Jameson', Department: 'IT', Title: 'Programmer', }, { ID: 25, FullName: 'Karen Goodson', Department: 'IT', Title: 'Programmer', }, { ID: 26, FullName: 'Marcus Orbison', Department: 'Human Resources', Title: 'Travel Coordinator', }, { ID: 27, FullName: 'Sandy Bright', Department: 'Human Resources', Title: 'Benefits Coordinator', }, { ID: 28, FullName: 'Morgan Kennedy', Department: 'IT', Title: 'Graphic Designer', }, { ID: 29, FullName: 'Violet Bailey', Department: 'IT', Title: 'Jr Graphic Designer', }, { ID: 30, FullName: 'Ken Samuelson', Department: 'Human Resources', Title: 'Ombudsman', }, { ID: 31, FullName: 'Nat Maguiree', Department: 'Support', Title: 'Trainer', }, { ID: 32, FullName: 'Bart Arnaz', Department: 'Engineering', Title: 'Director of Engineering', }, { ID: 33, FullName: 'Leah Simpson', Department: 'Engineering', Title: 'Test Coordinator', }, { ID: 34, FullName: 'Arnie Schwartz', Department: 'Engineering', Title: 'Engineer', }, { ID: 35, FullName: 'Billy Zimmer', Department: 'Engineering', Title: 'Engineer', }, { ID: 36, FullName: 'Samantha Piper', Department: 'Engineering', Title: 'Engineer', }, { ID: 37, FullName: 'Maggie Boxter', Department: 'Engineering', Title: 'Engineer', }, { ID: 38, FullName: 'Terry Bradley', Department: 'Engineering', Title: 'QA Engineer', }, { ID: 39, FullName: 'Gabe Jones', Department: 'Support', Title: 'Retail Coordinator', }, { ID: 40, FullName: 'Lucy Ball', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 41, FullName: 'Jim Packard', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 42, FullName: 'Hannah Brookly', Department: 'Sales', Title: 'Online Sales Manager', }, { ID: 43, FullName: 'Harv Mudd', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 44, FullName: 'Clark Morgan', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 45, FullName: 'Todd Hoffman', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 46, FullName: 'Jackie Garmin', Department: 'Support', Title: 'Support Assistant', }, { ID: 47, FullName: 'Lincoln Bartlett', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 48, FullName: 'Brad Farkus', Department: 'Engineering', Title: 'Engineer', }, { ID: 49, FullName: 'Jenny Hobbs', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 50, FullName: 'Dallas Lou', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 51, FullName: 'Stu Pizaro', Department: 'Engineering', Title: 'Engineer', }]; export const statuses = [{ id: 1, name: 'Not Started', }, { id: 2, name: 'In Progress', }, { id: 3, name: 'Deferred', }, { id: 4, name: 'Need Assistance', }, { id: 5, name: 'Completed', }]; export const tasks = [{ ID: 1, Subject: 'Prepare 2013 Financial', Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 0, Priority: 3, }, { ID: 2, Subject: 'Prepare 2013 Marketing Plan', Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 1, Priority: 4, }, { ID: 3, Subject: 'Update Personnel Files', Status: 5, Owner: 1, AssignedEmployee: 2, OrderIndex: 2, Priority: 1, }, { ID: 4, Subject: 'Review Health Insurance Options Under the Affordable Care Act', Status: 1, Owner: 1, AssignedEmployee: 2, OrderIndex: 3, Priority: 4, }, { ID: 5, Subject: 'Choose between PPO and HMO Health Plan', Status: 4, Owner: 2, AssignedEmployee: 1, OrderIndex: 4, Priority: 3, }, { ID: 6, Subject: 'Google AdWords Strategy', Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 5, Priority: 2, }, { ID: 7, Subject: 'New Brochures', Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 6, Priority: 1, }, { ID: 8, Subject: '2013 Brochure Designs', Status: 1, Owner: 1, AssignedEmployee: 28, OrderIndex: 7, Priority: 1, }, { ID: 9, Subject: 'Brochure Design Review', Status: 1, Owner: 28, AssignedEmployee: 29, OrderIndex: 8, Priority: 1, }, { ID: 10, Subject: 'Website Re-Design Plan', Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 9, Priority: 2, }, { ID: 11, Subject: 'Rollout of New Website and Marketing Brochures', Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 10, Priority: 2, }, { ID: 12, Subject: 'Update Sales Strategy Documents', Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 11, Priority: 2, }, { ID: 13, Subject: 'Create 2012 Sales Report', Status: 5, Owner: 8, AssignedEmployee: 41, OrderIndex: 12, Priority: 4, }, { ID: 14, Subject: 'Direct vs Online Sales Comparison Report', Status: 5, Owner: 41, AssignedEmployee: 42, OrderIndex: 13, Priority: 3, }, { ID: 15, Subject: 'Review 2012 Sales Report and Approve 2013 Plans', Status: 5, Owner: 41, AssignedEmployee: 4, OrderIndex: 14, Priority: 3, }, { ID: 16, Subject: 'Deliver R&D Plans for 2013', Status: 2, Owner: 1, AssignedEmployee: 3, OrderIndex: 15, Priority: 2, }, { ID: 17, Subject: 'Create 2013 R&D Plans', Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 16, Priority: 0, }, { ID: 18, Subject: '2013 QA Strategy Report', Status: 5, Owner: 32, AssignedEmployee: 33, OrderIndex: 17, Priority: 0, }, { ID: 19, Subject: '2013 Training Events', Status: 5, Owner: 33, AssignedEmployee: 31, OrderIndex: 18, Priority: 0, }, { ID: 20, Subject: 'Approve Hiring of John Jeffers', Status: 5, Owner: 31, AssignedEmployee: 5, OrderIndex: 19, Priority: 0, }, { ID: 21, Subject: 'Non-Compete Agreements', Status: 5, Owner: 5, AssignedEmployee: 2, OrderIndex: 20, Priority: 0, }, { ID: 22, Subject: 'Update NDA Agreement', Status: 5, Owner: 2, AssignedEmployee: 1, OrderIndex: 21, Priority: 0, }, { ID: 23, Subject: 'Update Employee Files with New NDA', Status: 1, Owner: 2, AssignedEmployee: 5, OrderIndex: 22, Priority: 3, }, { ID: 24, Subject: 'Sign Updated NDA', Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 23, Priority: 0, }, { ID: 25, Subject: 'Sign Updated NDA', Status: 5, Owner: 5, AssignedEmployee: 7, OrderIndex: 24, Priority: 0, }, { ID: 26, Subject: 'Sign Updated NDA', Status: 1, Owner: 5, AssignedEmployee: 8, OrderIndex: 25, Priority: 1, }, { ID: 27, Subject: 'Sign Updated NDA', Status: 4, Owner: 5, AssignedEmployee: 9, OrderIndex: 26, Priority: 0, }, { ID: 28, Subject: 'Submit Questions Regarding New NDA', Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 27, Priority: 1, }, { ID: 29, Subject: 'Submit Questions Regarding New NDA', Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 28, Priority: 1, }, { ID: 30, Subject: 'Submit Questions Regarding New NDA', Status: 4, Owner: 9, AssignedEmployee: 19, OrderIndex: 29, Priority: 0, }, { ID: 31, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 30, Priority: 0, }, { ID: 32, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 31, Priority: 0, }, { ID: 33, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 32, Priority: 0, }, { ID: 34, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 33, Priority: 0, }, { ID: 35, Subject: 'Update Revenue Projections', Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 34, Priority: 0, }, { ID: 36, Subject: 'Review Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 8, OrderIndex: 35, Priority: 0, }, { ID: 37, Subject: 'Comment on Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 41, OrderIndex: 36, Priority: 0, }, { ID: 38, Subject: 'Comment on Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 42, OrderIndex: 37, Priority: 0, }, { ID: 39, Subject: 'Comment on Revenue Projections', Status: 1, Owner: 7, AssignedEmployee: 45, OrderIndex: 38, Priority: 2, }, { ID: 40, Subject: 'Provide New Health Insurance Docs', Status: 5, Owner: 11, AssignedEmployee: 5, OrderIndex: 39, Priority: 0, }, { ID: 41, Subject: 'Review Changes to Health Insurance Coverage', Status: 5, Owner: 11, AssignedEmployee: 10, OrderIndex: 40, Priority: 0, }, { ID: 42, Subject: 'Scan Health Insurance Forms', Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 41, Priority: 0, }, { ID: 43, Subject: 'Sign Health Insurance Forms', Status: 5, Owner: 14, AssignedEmployee: 15, OrderIndex: 42, Priority: 0, }, { ID: 44, Subject: 'Sign Health Insurance Forms', Status: 5, Owner: 14, AssignedEmployee: 13, OrderIndex: 43, Priority: 0, }, { ID: 45, Subject: 'Sign Health Insurance Forms', Status: 3, Owner: 14, AssignedEmployee: 16, OrderIndex: 44, Priority: 0, }, { ID: 46, Subject: 'Follow up with West Coast Stores', Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 45, Priority: 3, }, { ID: 47, Subject: 'Follow up with East Coast Stores', Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 46, Priority: 3, }, { ID: 48, Subject: 'Send Email to Customers about Recall', Status: 5, Owner: 9, AssignedEmployee: 19, OrderIndex: 47, Priority: 0, }, { ID: 49, Subject: 'Submit Refund Report for 2013 Recall', Status: 5, Owner: 7, AssignedEmployee: 9, OrderIndex: 48, Priority: 0, }, { ID: 50, Subject: 'Give Final Approval for Refunds', Status: 5, Owner: 7, AssignedEmployee: 2, OrderIndex: 49, Priority: 0, }, { ID: 51, Subject: 'Prepare Product Recall Report', Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 50, Priority: 0, }, { ID: 52, Subject: 'Review Product Recall Report by Engineering Team', Status: 5, Owner: 3, AssignedEmployee: 1, OrderIndex: 51, Priority: 0, }, { ID: 53, Subject: 'Create Training Course for New TVs', Status: 5, Owner: 32, AssignedEmployee: 31, OrderIndex: 52, Priority: 0, }, { ID: 54, Subject: 'Review Training Course for any Omissions', Status: 5, Owner: 31, AssignedEmployee: 33, OrderIndex: 53, Priority: 0, }, { ID: 55, Subject: 'Review Overtime Report', Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 54, Priority: 0, }, { ID: 56, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 21, OrderIndex: 55, Priority: 0, }, { ID: 57, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 22, OrderIndex: 56, Priority: 0, }, { ID: 58, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 57, Priority: 0, }, { ID: 59, Subject: 'Overtime Approval Guidelines', Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 58, Priority: 0, }, { ID: 60, Subject: 'Refund Request Template', Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 59, Priority: 0, }, { ID: 61, Subject: 'Recall Rebate Form', Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 60, Priority: 0, }, { ID: 62, Subject: 'Create Report on Customer Feedback', Status: 5, Owner: 30, AssignedEmployee: 12, OrderIndex: 61, Priority: 0, }, { ID: 63, Subject: 'Review Customer Feedback Report', Status: 5, Owner: 30, AssignedEmployee: 8, OrderIndex: 62, Priority: 0, }, { ID: 64, Subject: 'Customer Feedback Report Analysis', Status: 3, Owner: 8, AssignedEmployee: 1, OrderIndex: 63, Priority: 0, }, { ID: 65, Subject: 'Prepare Shipping Cost Analysis Report', Status: 5, Owner: 8, AssignedEmployee: 10, OrderIndex: 64, Priority: 0, }, { ID: 66, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 65, Priority: 0, }, { ID: 67, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 66, Priority: 0, }, { ID: 68, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 67, Priority: 0, }, { ID: 69, Subject: 'Select Preferred Shipper', Status: 5, Owner: 10, AssignedEmployee: 2, OrderIndex: 68, Priority: 0, }, { ID: 70, Subject: 'Complete Shipper Selection Form', Status: 3, Owner: 2, AssignedEmployee: 1, OrderIndex: 69, Priority: 0, }, { ID: 71, Subject: 'Upgrade Server Hardware', Status: 5, Owner: 22, AssignedEmployee: 6, OrderIndex: 70, Priority: 0, }, { ID: 72, Subject: 'Upgrade Personal Computers', Status: 4, Owner: 21, AssignedEmployee: 6, OrderIndex: 71, Priority: 0, }, { ID: 73, Subject: 'Approve Personal Computer Upgrade Plan', Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 72, Priority: 0, }, { ID: 74, Subject: 'Decide on Mobile Devices to Use in the Field', Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 73, Priority: 0, }, { ID: 75, Subject: 'Upgrade Apps to Windows RT or stay with WinForms', Status: 5, Owner: 24, AssignedEmployee: 6, OrderIndex: 74, Priority: 0, }, { ID: 76, Subject: 'Estimate Time Required to Touch-Enable Apps', Status: 5, Owner: 24, AssignedEmployee: 25, OrderIndex: 75, Priority: 0, }, { ID: 77, Subject: 'Report on Tranistion to Touch-Based Apps', Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 76, Priority: 0, }, { ID: 78, Subject: 'Try New Touch-Enabled WinForms Apps', Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 77, Priority: 0, }, { ID: 79, Subject: 'Rollout New Touch-Enabled WinForms Apps', Status: 4, Owner: 6, AssignedEmployee: 24, OrderIndex: 78, Priority: 0, }, { ID: 80, Subject: 'Site Up-Time Report', Status: 5, Owner: 3, AssignedEmployee: 6, OrderIndex: 79, Priority: 0, }, { ID: 81, Subject: 'Review Site Up-Time Report', Status: 5, Owner: 3, AssignedEmployee: 4, OrderIndex: 80, Priority: 0, }, { ID: 82, Subject: 'Review Online Sales Report', Status: 5, Owner: 4, AssignedEmployee: 1, OrderIndex: 81, Priority: 0, }, { ID: 83, Subject: 'Determine New Online Marketing Strategy', Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 82, Priority: 0, }, { ID: 84, Subject: 'New Online Marketing Strategy', Status: 5, Owner: 8, AssignedEmployee: 42, OrderIndex: 83, Priority: 0, }, { ID: 85, Subject: 'Approve New Online Marketing Strategy', Status: 5, Owner: 8, AssignedEmployee: 4, OrderIndex: 84, Priority: 0, }, { ID: 86, Subject: 'Submit New Website Design', Status: 5, Owner: 8, AssignedEmployee: 28, OrderIndex: 85, Priority: 0, }, { ID: 87, Subject: 'Create Icons for Website', Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 86, Priority: 0, }, { ID: 88, Subject: 'Review PSDs for New Website', Status: 5, Owner: 28, AssignedEmployee: 6, OrderIndex: 87, Priority: 0, }, { ID: 89, Subject: 'Create New Shopping Cart', Status: 5, Owner: 6, AssignedEmployee: 24, OrderIndex: 88, Priority: 0, }, { ID: 90, Subject: 'Create New Product Pages', Status: 5, Owner: 6, AssignedEmployee: 25, OrderIndex: 89, Priority: 0, }, ];

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

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, FullName: 'John Heart', Department: 'Management', Title: 'CEO', }, { ID: 2, FullName: 'Samantha Bright', Department: 'Management', Title: 'COO', }, { ID: 3, FullName: 'Arthur Miller', Department: 'Management', Title: 'CTO', }, { ID: 4, FullName: 'Robert Reagan', Department: 'Management', Title: 'CMO', }, { ID: 5, FullName: 'Greta Sims', Department: 'Human Resources', Title: 'HR Manager', }, { ID: 6, FullName: 'Brett Wade', Department: 'IT', Title: 'IT Manager', }, { ID: 7, FullName: 'Sandra Johnson', Department: 'Human Resources', Title: 'Controller', }, { ID: 8, FullName: 'Ed Holmes', Department: 'Sales', Title: 'Sales Manager', }, { ID: 9, FullName: 'Barb Banks', Department: 'Support', Title: 'Support Manager', }, { ID: 10, FullName: 'Kevin Carter', Department: 'Shipping', Title: 'Shipping Manager', }, { ID: 11, FullName: 'Cindy Stanwick', Department: 'Human Resources', Title: 'HR Assistant', }, { ID: 12, FullName: 'Sammy Hill', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 13, FullName: 'Davey Jones', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 14, FullName: 'Victor Norris', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 15, FullName: 'Mary Stern', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 16, FullName: 'Robin Cosworth', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 17, FullName: 'Kelly Rodriguez', Department: 'Support', Title: 'Support Assistant', }, { ID: 18, FullName: 'James Anderson', Department: 'Support', Title: 'Support Assistant', }, { ID: 19, FullName: 'Antony Remmen', Department: 'Support', Title: 'Support Assistant', }, { ID: 20, FullName: 'Olivia Peyton', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 21, FullName: 'Taylor Riley', Department: 'IT', Title: 'Network Admin', }, { ID: 22, FullName: 'Amelia Harper', Department: 'IT', Title: 'Network Admin', }, { ID: 23, FullName: 'Wally Hobbs', Department: 'IT', Title: 'Programmer', }, { ID: 24, FullName: 'Brad Jameson', Department: 'IT', Title: 'Programmer', }, { ID: 25, FullName: 'Karen Goodson', Department: 'IT', Title: 'Programmer', }, { ID: 26, FullName: 'Marcus Orbison', Department: 'Human Resources', Title: 'Travel Coordinator', }, { ID: 27, FullName: 'Sandy Bright', Department: 'Human Resources', Title: 'Benefits Coordinator', }, { ID: 28, FullName: 'Morgan Kennedy', Department: 'IT', Title: 'Graphic Designer', }, { ID: 29, FullName: 'Violet Bailey', Department: 'IT', Title: 'Jr Graphic Designer', }, { ID: 30, FullName: 'Ken Samuelson', Department: 'Human Resources', Title: 'Ombudsman', }, { ID: 31, FullName: 'Nat Maguiree', Department: 'Support', Title: 'Trainer', }, { ID: 32, FullName: 'Bart Arnaz', Department: 'Engineering', Title: 'Director of Engineering', }, { ID: 33, FullName: 'Leah Simpson', Department: 'Engineering', Title: 'Test Coordinator', }, { ID: 34, FullName: 'Arnie Schwartz', Department: 'Engineering', Title: 'Engineer', }, { ID: 35, FullName: 'Billy Zimmer', Department: 'Engineering', Title: 'Engineer', }, { ID: 36, FullName: 'Samantha Piper', Department: 'Engineering', Title: 'Engineer', }, { ID: 37, FullName: 'Maggie Boxter', Department: 'Engineering', Title: 'Engineer', }, { ID: 38, FullName: 'Terry Bradley', Department: 'Engineering', Title: 'QA Engineer', }, { ID: 39, FullName: 'Gabe Jones', Department: 'Support', Title: 'Retail Coordinator', }, { ID: 40, FullName: 'Lucy Ball', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 41, FullName: 'Jim Packard', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 42, FullName: 'Hannah Brookly', Department: 'Sales', Title: 'Online Sales Manager', }, { ID: 43, FullName: 'Harv Mudd', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 44, FullName: 'Clark Morgan', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 45, FullName: 'Todd Hoffman', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 46, FullName: 'Jackie Garmin', Department: 'Support', Title: 'Support Assistant', }, { ID: 47, FullName: 'Lincoln Bartlett', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 48, FullName: 'Brad Farkus', Department: 'Engineering', Title: 'Engineer', }, { ID: 49, FullName: 'Jenny Hobbs', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 50, FullName: 'Dallas Lou', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 51, FullName: 'Stu Pizaro', Department: 'Engineering', Title: 'Engineer', }, ]; export const statuses = [ { id: 1, name: 'Not Started', }, { id: 2, name: 'In Progress', }, { id: 3, name: 'Deferred', }, { id: 4, name: 'Need Assistance', }, { id: 5, name: 'Completed', }, ]; export const tasks = [ { ID: 1, Subject: 'Prepare 2013 Financial', Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 0, Priority: 3, }, { ID: 2, Subject: 'Prepare 2013 Marketing Plan', Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 1, Priority: 4, }, { ID: 3, Subject: 'Update Personnel Files', Status: 5, Owner: 1, AssignedEmployee: 2, OrderIndex: 2, Priority: 1, }, { ID: 4, Subject: 'Review Health Insurance Options Under the Affordable Care Act', Status: 1, Owner: 1, AssignedEmployee: 2, OrderIndex: 3, Priority: 4, }, { ID: 5, Subject: 'Choose between PPO and HMO Health Plan', Status: 4, Owner: 2, AssignedEmployee: 1, OrderIndex: 4, Priority: 3, }, { ID: 6, Subject: 'Google AdWords Strategy', Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 5, Priority: 2, }, { ID: 7, Subject: 'New Brochures', Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 6, Priority: 1, }, { ID: 8, Subject: '2013 Brochure Designs', Status: 1, Owner: 1, AssignedEmployee: 28, OrderIndex: 7, Priority: 1, }, { ID: 9, Subject: 'Brochure Design Review', Status: 1, Owner: 28, AssignedEmployee: 29, OrderIndex: 8, Priority: 1, }, { ID: 10, Subject: 'Website Re-Design Plan', Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 9, Priority: 2, }, { ID: 11, Subject: 'Rollout of New Website and Marketing Brochures', Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 10, Priority: 2, }, { ID: 12, Subject: 'Update Sales Strategy Documents', Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 11, Priority: 2, }, { ID: 13, Subject: 'Create 2012 Sales Report', Status: 5, Owner: 8, AssignedEmployee: 41, OrderIndex: 12, Priority: 4, }, { ID: 14, Subject: 'Direct vs Online Sales Comparison Report', Status: 5, Owner: 41, AssignedEmployee: 42, OrderIndex: 13, Priority: 3, }, { ID: 15, Subject: 'Review 2012 Sales Report and Approve 2013 Plans', Status: 5, Owner: 41, AssignedEmployee: 4, OrderIndex: 14, Priority: 3, }, { ID: 16, Subject: 'Deliver R&D Plans for 2013', Status: 2, Owner: 1, AssignedEmployee: 3, OrderIndex: 15, Priority: 2, }, { ID: 17, Subject: 'Create 2013 R&D Plans', Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 16, Priority: 0, }, { ID: 18, Subject: '2013 QA Strategy Report', Status: 5, Owner: 32, AssignedEmployee: 33, OrderIndex: 17, Priority: 0, }, { ID: 19, Subject: '2013 Training Events', Status: 5, Owner: 33, AssignedEmployee: 31, OrderIndex: 18, Priority: 0, }, { ID: 20, Subject: 'Approve Hiring of John Jeffers', Status: 5, Owner: 31, AssignedEmployee: 5, OrderIndex: 19, Priority: 0, }, { ID: 21, Subject: 'Non-Compete Agreements', Status: 5, Owner: 5, AssignedEmployee: 2, OrderIndex: 20, Priority: 0, }, { ID: 22, Subject: 'Update NDA Agreement', Status: 5, Owner: 2, AssignedEmployee: 1, OrderIndex: 21, Priority: 0, }, { ID: 23, Subject: 'Update Employee Files with New NDA', Status: 1, Owner: 2, AssignedEmployee: 5, OrderIndex: 22, Priority: 3, }, { ID: 24, Subject: 'Sign Updated NDA', Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 23, Priority: 0, }, { ID: 25, Subject: 'Sign Updated NDA', Status: 5, Owner: 5, AssignedEmployee: 7, OrderIndex: 24, Priority: 0, }, { ID: 26, Subject: 'Sign Updated NDA', Status: 1, Owner: 5, AssignedEmployee: 8, OrderIndex: 25, Priority: 1, }, { ID: 27, Subject: 'Sign Updated NDA', Status: 4, Owner: 5, AssignedEmployee: 9, OrderIndex: 26, Priority: 0, }, { ID: 28, Subject: 'Submit Questions Regarding New NDA', Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 27, Priority: 1, }, { ID: 29, Subject: 'Submit Questions Regarding New NDA', Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 28, Priority: 1, }, { ID: 30, Subject: 'Submit Questions Regarding New NDA', Status: 4, Owner: 9, AssignedEmployee: 19, OrderIndex: 29, Priority: 0, }, { ID: 31, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 30, Priority: 0, }, { ID: 32, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 31, Priority: 0, }, { ID: 33, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 32, Priority: 0, }, { ID: 34, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 33, Priority: 0, }, { ID: 35, Subject: 'Update Revenue Projections', Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 34, Priority: 0, }, { ID: 36, Subject: 'Review Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 8, OrderIndex: 35, Priority: 0, }, { ID: 37, Subject: 'Comment on Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 41, OrderIndex: 36, Priority: 0, }, { ID: 38, Subject: 'Comment on Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 42, OrderIndex: 37, Priority: 0, }, { ID: 39, Subject: 'Comment on Revenue Projections', Status: 1, Owner: 7, AssignedEmployee: 45, OrderIndex: 38, Priority: 2, }, { ID: 40, Subject: 'Provide New Health Insurance Docs', Status: 5, Owner: 11, AssignedEmployee: 5, OrderIndex: 39, Priority: 0, }, { ID: 41, Subject: 'Review Changes to Health Insurance Coverage', Status: 5, Owner: 11, AssignedEmployee: 10, OrderIndex: 40, Priority: 0, }, { ID: 42, Subject: 'Scan Health Insurance Forms', Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 41, Priority: 0, }, { ID: 43, Subject: 'Sign Health Insurance Forms', Status: 5, Owner: 14, AssignedEmployee: 15, OrderIndex: 42, Priority: 0, }, { ID: 44, Subject: 'Sign Health Insurance Forms', Status: 5, Owner: 14, AssignedEmployee: 13, OrderIndex: 43, Priority: 0, }, { ID: 45, Subject: 'Sign Health Insurance Forms', Status: 3, Owner: 14, AssignedEmployee: 16, OrderIndex: 44, Priority: 0, }, { ID: 46, Subject: 'Follow up with West Coast Stores', Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 45, Priority: 3, }, { ID: 47, Subject: 'Follow up with East Coast Stores', Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 46, Priority: 3, }, { ID: 48, Subject: 'Send Email to Customers about Recall', Status: 5, Owner: 9, AssignedEmployee: 19, OrderIndex: 47, Priority: 0, }, { ID: 49, Subject: 'Submit Refund Report for 2013 Recall', Status: 5, Owner: 7, AssignedEmployee: 9, OrderIndex: 48, Priority: 0, }, { ID: 50, Subject: 'Give Final Approval for Refunds', Status: 5, Owner: 7, AssignedEmployee: 2, OrderIndex: 49, Priority: 0, }, { ID: 51, Subject: 'Prepare Product Recall Report', Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 50, Priority: 0, }, { ID: 52, Subject: 'Review Product Recall Report by Engineering Team', Status: 5, Owner: 3, AssignedEmployee: 1, OrderIndex: 51, Priority: 0, }, { ID: 53, Subject: 'Create Training Course for New TVs', Status: 5, Owner: 32, AssignedEmployee: 31, OrderIndex: 52, Priority: 0, }, { ID: 54, Subject: 'Review Training Course for any Omissions', Status: 5, Owner: 31, AssignedEmployee: 33, OrderIndex: 53, Priority: 0, }, { ID: 55, Subject: 'Review Overtime Report', Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 54, Priority: 0, }, { ID: 56, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 21, OrderIndex: 55, Priority: 0, }, { ID: 57, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 22, OrderIndex: 56, Priority: 0, }, { ID: 58, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 57, Priority: 0, }, { ID: 59, Subject: 'Overtime Approval Guidelines', Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 58, Priority: 0, }, { ID: 60, Subject: 'Refund Request Template', Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 59, Priority: 0, }, { ID: 61, Subject: 'Recall Rebate Form', Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 60, Priority: 0, }, { ID: 62, Subject: 'Create Report on Customer Feedback', Status: 5, Owner: 30, AssignedEmployee: 12, OrderIndex: 61, Priority: 0, }, { ID: 63, Subject: 'Review Customer Feedback Report', Status: 5, Owner: 30, AssignedEmployee: 8, OrderIndex: 62, Priority: 0, }, { ID: 64, Subject: 'Customer Feedback Report Analysis', Status: 3, Owner: 8, AssignedEmployee: 1, OrderIndex: 63, Priority: 0, }, { ID: 65, Subject: 'Prepare Shipping Cost Analysis Report', Status: 5, Owner: 8, AssignedEmployee: 10, OrderIndex: 64, Priority: 0, }, { ID: 66, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 65, Priority: 0, }, { ID: 67, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 66, Priority: 0, }, { ID: 68, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 67, Priority: 0, }, { ID: 69, Subject: 'Select Preferred Shipper', Status: 5, Owner: 10, AssignedEmployee: 2, OrderIndex: 68, Priority: 0, }, { ID: 70, Subject: 'Complete Shipper Selection Form', Status: 3, Owner: 2, AssignedEmployee: 1, OrderIndex: 69, Priority: 0, }, { ID: 71, Subject: 'Upgrade Server Hardware', Status: 5, Owner: 22, AssignedEmployee: 6, OrderIndex: 70, Priority: 0, }, { ID: 72, Subject: 'Upgrade Personal Computers', Status: 4, Owner: 21, AssignedEmployee: 6, OrderIndex: 71, Priority: 0, }, { ID: 73, Subject: 'Approve Personal Computer Upgrade Plan', Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 72, Priority: 0, }, { ID: 74, Subject: 'Decide on Mobile Devices to Use in the Field', Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 73, Priority: 0, }, { ID: 75, Subject: 'Upgrade Apps to Windows RT or stay with WinForms', Status: 5, Owner: 24, AssignedEmployee: 6, OrderIndex: 74, Priority: 0, }, { ID: 76, Subject: 'Estimate Time Required to Touch-Enable Apps', Status: 5, Owner: 24, AssignedEmployee: 25, OrderIndex: 75, Priority: 0, }, { ID: 77, Subject: 'Report on Tranistion to Touch-Based Apps', Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 76, Priority: 0, }, { ID: 78, Subject: 'Try New Touch-Enabled WinForms Apps', Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 77, Priority: 0, }, { ID: 79, Subject: 'Rollout New Touch-Enabled WinForms Apps', Status: 4, Owner: 6, AssignedEmployee: 24, OrderIndex: 78, Priority: 0, }, { ID: 80, Subject: 'Site Up-Time Report', Status: 5, Owner: 3, AssignedEmployee: 6, OrderIndex: 79, Priority: 0, }, { ID: 81, Subject: 'Review Site Up-Time Report', Status: 5, Owner: 3, AssignedEmployee: 4, OrderIndex: 80, Priority: 0, }, { ID: 82, Subject: 'Review Online Sales Report', Status: 5, Owner: 4, AssignedEmployee: 1, OrderIndex: 81, Priority: 0, }, { ID: 83, Subject: 'Determine New Online Marketing Strategy', Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 82, Priority: 0, }, { ID: 84, Subject: 'New Online Marketing Strategy', Status: 5, Owner: 8, AssignedEmployee: 42, OrderIndex: 83, Priority: 0, }, { ID: 85, Subject: 'Approve New Online Marketing Strategy', Status: 5, Owner: 8, AssignedEmployee: 4, OrderIndex: 84, Priority: 0, }, { ID: 86, Subject: 'Submit New Website Design', Status: 5, Owner: 8, AssignedEmployee: 28, OrderIndex: 85, Priority: 0, }, { ID: 87, Subject: 'Create Icons for Website', Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 86, Priority: 0, }, { ID: 88, Subject: 'Review PSDs for New Website', Status: 5, Owner: 28, AssignedEmployee: 6, OrderIndex: 87, Priority: 0, }, { ID: 89, Subject: 'Create New Shopping Cart', Status: 5, Owner: 6, AssignedEmployee: 24, OrderIndex: 88, Priority: 0, }, { ID: 90, Subject: 'Create New Product Pages', Status: 5, Owner: 6, AssignedEmployee: 25, OrderIndex: 89, Priority: 0, }, ];

<!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.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/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>

.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { width: 24%; display: inline-block; margin-top: 10px; }