Demos
Grid(React)
FlexSheet
Drag and Drop

Drag & Drop (React)

FlexSheet supports dragging and dropping the columns or rows into other columns or rows. FlexSheet not only copies or moves the data of the cells, but also copies or moves the style of the cells. When you drag and drop columns/rows without pressing any key, it will move the selected columns or rows into the target columns or rows. When you drag and drop columns/rows with 'Ctrl' key pressed, it will copy the selected columns or rows into the target columns or rows. When you drag and drop columns/rows with 'Shift' key pressed, it will change the position of the selected columns or rows with the target columns or rows.

Learn about FlexSheet | FlexSheet API Reference

This example uses React.

JavaScript
Angular
Vue
React
app.jsx
index.html
app.css
Copy to CodeMine
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React from 'react';
import useEvent from 'react-use-event-hook';
import * as wjcGrid from '@mescius/wijmo.grid';
import * as wjGridSheet from '@mescius/wijmo.react.grid.sheet';
import './app.css';
function App() {
    const initializeFlexSheet = useEvent((flex) => {
        flex.deferUpdate(() => {
            let colIdx, rowIdx;
            for (colIdx = 0; colIdx < flex.columns.length; colIdx++) {
                for (rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) {
                    flex.setCellData(rowIdx, colIdx, colIdx + rowIdx);
                }
            }
            flex.applyCellsStyle({ fontWeight: "bold" }, [
                new wjcGrid.CellRange(0, 0, 5, 0),
                new wjcGrid.CellRange(6, 1, 11, 1)
            ]);
            flex.applyCellsStyle({ textDecoration: "underline" }, [
                new wjcGrid.CellRange(0, 2, 5, 2),
                new wjcGrid.CellRange(6, 3, 11, 3)
            ]);
            flex.applyCellsStyle({ fontStyle: "italic" }, [
                new wjcGrid.CellRange(0, 4, 5, 4),
                new wjcGrid.CellRange(6, 5, 11, 5)
            ]);
            flex.applyCellsStyle({ format: "c2" }, [
                new wjcGrid.CellRange(0, 0, 5, 7)
            ]);
            flex.applyCellsStyle({ backgroundColor: "#4488CC" }, [
                new wjcGrid.CellRange(0, 0, 11, 0),
                new wjcGrid.CellRange(0, 2, 11, 2),
                new wjcGrid.CellRange(0, 4, 11, 4)
            ]);
            flex.applyCellsStyle({ color: "#CC8844" }, [
                new wjcGrid.CellRange(0, 1, 11, 1),
                new wjcGrid.CellRange(0, 3, 11, 3),
                new wjcGrid.CellRange(0, 5, 11, 5)
            ]);
            flex.applyCellsStyle({ color: "#336699" }, [
                new wjcGrid.CellRange(0, 6, 5, 7)
            ]);
            flex.applyCellsStyle({ backgroundColor: "#996633" }, [
                new wjcGrid.CellRange(6, 6, 11, 7)
            ]);
        });
    });
    return (<div className="container-fluid">
      <wjGridSheet.FlexSheet initialized={initializeFlexSheet}>
        <wjGridSheet.Sheet name="unbound" rowCount={12} columnCount={8}/>
      </wjGridSheet.FlexSheet>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import ReactDOM from 'react-dom/client'; import React from 'react'; import useEvent from 'react-use-event-hook'; import * as wjcGrid from '@mescius/wijmo.grid'; import * as wjGridSheet from '@mescius/wijmo.react.grid.sheet'; import './app.css'; function App() { const initializeFlexSheet = useEvent((flex) => { flex.deferUpdate(() => { let colIdx, rowIdx; for (colIdx = 0; colIdx < flex.columns.length; colIdx++) { for (rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) { flex.setCellData(rowIdx, colIdx, colIdx + rowIdx); } } flex.applyCellsStyle({ fontWeight: "bold" }, [ new wjcGrid.CellRange(0, 0, 5, 0), new wjcGrid.CellRange(6, 1, 11, 1) ]); flex.applyCellsStyle({ textDecoration: "underline" }, [ new wjcGrid.CellRange(0, 2, 5, 2), new wjcGrid.CellRange(6, 3, 11, 3) ]); flex.applyCellsStyle({ fontStyle: "italic" }, [ new wjcGrid.CellRange(0, 4, 5, 4), new wjcGrid.CellRange(6, 5, 11, 5) ]); flex.applyCellsStyle({ format: "c2" }, [ new wjcGrid.CellRange(0, 0, 5, 7) ]); flex.applyCellsStyle({ backgroundColor: "#4488CC" }, [ new wjcGrid.CellRange(0, 0, 11, 0), new wjcGrid.CellRange(0, 2, 11, 2), new wjcGrid.CellRange(0, 4, 11, 4) ]); flex.applyCellsStyle({ color: "#CC8844" }, [ new wjcGrid.CellRange(0, 1, 11, 1), new wjcGrid.CellRange(0, 3, 11, 3), new wjcGrid.CellRange(0, 5, 11, 5) ]); flex.applyCellsStyle({ color: "#336699" }, [ new wjcGrid.CellRange(0, 6, 5, 7) ]); flex.applyCellsStyle({ backgroundColor: "#996633" }, [ new wjcGrid.CellRange(6, 6, 11, 7) ]); }); }); return (<div className="container-fluid"> <wjGridSheet.FlexSheet initialized={initializeFlexSheet}> <wjGridSheet.Sheet name="unbound" rowCount={12} columnCount={8}/> </wjGridSheet.FlexSheet> </div>); } const container = document.getElementById('app'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo Wijmo FlexSheet Drag and Drop</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.src.js" integrity="sha512-G6mEj6h18+m3MvzdviSDfPle/TfH0//cXcB33AKlNR/Rha0yQsKefDZKRTkIZos97HEGq2JMV1RT5ybMoQ3WsQ==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>
.container-fluid .wj-flexsheet { height: 400px; margin: 6px 0; }
(function (global) { window.process = { env: { NODE_ENV: "production" } } System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.grid.immutable': 'npm:@mescius/wijmo.grid.immutable/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.react.chart.analytics": "npm:@mescius/wijmo.react.chart.analytics/index.js", "@mescius/wijmo.react.chart.animation": "npm:@mescius/wijmo.react.chart.animation/index.js", "@mescius/wijmo.react.chart.annotation": "npm:@mescius/wijmo.react.chart.annotation/index.js", "@mescius/wijmo.react.chart.finance.analytics": "npm:@mescius/wijmo.react.chart.finance.analytics/index.js", "@mescius/wijmo.react.chart.finance": "npm:@mescius/wijmo.react.chart.finance/index.js", "@mescius/wijmo.react.chart.hierarchical": "npm:@mescius/wijmo.react.chart.hierarchical/index.js", "@mescius/wijmo.react.chart.interaction": "npm:@mescius/wijmo.react.chart.interaction/index.js", "@mescius/wijmo.react.chart.radar": "npm:@mescius/wijmo.react.chart.radar/index.js", "@mescius/wijmo.react.chart": "npm:@mescius/wijmo.react.chart/index.js", "@mescius/wijmo.react.core": "npm:@mescius/wijmo.react.core/index.js", '@mescius/wijmo.react.chart.map': 'npm:@mescius/wijmo.react.chart.map/index.js', "@mescius/wijmo.react.gauge": "npm:@mescius/wijmo.react.gauge/index.js", "@mescius/wijmo.react.grid.detail": "npm:@mescius/wijmo.react.grid.detail/index.js", "@mescius/wijmo.react.grid.filter": "npm:@mescius/wijmo.react.grid.filter/index.js", "@mescius/wijmo.react.grid.grouppanel": "npm:@mescius/wijmo.react.grid.grouppanel/index.js", '@mescius/wijmo.react.grid.search': 'npm:@mescius/wijmo.react.grid.search/index.js', "@mescius/wijmo.react.grid.multirow": "npm:@mescius/wijmo.react.grid.multirow/index.js", "@mescius/wijmo.react.grid.sheet": "npm:@mescius/wijmo.react.grid.sheet/index.js", '@mescius/wijmo.react.grid.transposed': 'npm:@mescius/wijmo.react.grid.transposed/index.js', '@mescius/wijmo.react.grid.transposedmultirow': 'npm:@mescius/wijmo.react.grid.transposedmultirow/index.js', '@mescius/wijmo.react.grid.immutable': 'npm:@mescius/wijmo.react.grid.immutable/index.js', "@mescius/wijmo.react.grid": "npm:@mescius/wijmo.react.grid/index.js", "@mescius/wijmo.react.input": "npm:@mescius/wijmo.react.input/index.js", "@mescius/wijmo.react.olap": "npm:@mescius/wijmo.react.olap/index.js", "@mescius/wijmo.react.viewer": "npm:@mescius/wijmo.react.viewer/index.js", "@mescius/wijmo.react.nav": "npm:@mescius/wijmo.react.nav/index.js", "@mescius/wijmo.react.base": "npm:@mescius/wijmo.react.base/index.js", '@mescius/wijmo.react.barcode.common': 'npm:@mescius/wijmo.react.barcode.common/index.js', '@mescius/wijmo.react.barcode.composite': 'npm:@mescius/wijmo.react.barcode.composite/index.js', '@mescius/wijmo.react.barcode.specialized': 'npm:@mescius/wijmo.react.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'react': 'npm:react/index.js', 'react-dom': 'npm:react-dom/index.js', 'react-dom/client': 'npm:react-dom/client.js', "scheduler": "npm:scheduler/index.js", 'redux': 'npm:redux/dist/redux.min.js', 'react-redux': 'npm:react-redux/dist/react-redux.min.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', "react-use-event-hook": "npm:react-use-event-hook/dist/esm/useEvent.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);