Standalone Field Chooser - React Pivot Grid

import React, { useRef, useState } from 'react'; import { PivotGrid, FieldChooser, } from 'devextreme-react/pivot-grid'; import { PivotGridFieldChooser, Texts, PivotGridFieldChooserRef, } from 'devextreme-react/pivot-grid-field-chooser'; import { SelectBox, } from 'devextreme-react/select-box'; import { Button, } from 'devextreme-react/button'; import { RadioGroup, } from 'devextreme-react/radio-group'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; import { ApplyChangesMode } from 'devextreme-react/common/grids'; import { FieldChooserLayout } from 'devextreme-react/common'; import service from './data.ts'; const applyChangesModeLabel = { 'aria-label': 'Apply Changes Mode' }; const applyChangesModes = ['instantly', 'onDemand']; const layouts = service.getLayouts(); const App = () => { const [applyChangesMode, setApplyChangesMode] = useState<ApplyChangesMode>('instantly'); const [layout, setLayout] = useState<FieldChooserLayout>(0); const fieldChooserRef = useRef<PivotGridFieldChooserRef>(null); return ( <React.Fragment> <PivotGrid dataSource={dataSource} allowSortingBySummary={true} allowFiltering={true} allowSorting={true} showBorders={true} > <FieldChooser enabled={false} /> </PivotGrid> <div className="container"> <PivotGridFieldChooser ref={fieldChooserRef} dataSource={dataSource} width={400} height={400} layout={layout} applyChangesMode={applyChangesMode} > <Texts allFields="All" columnFields="Columns" dataFields="Data" rowFields="Rows" filterFields="Filter" ></Texts> </PivotGridFieldChooser> { applyChangesMode === 'onDemand' && <div className="bottom-bar"> <Button text="Apply" type="default" onClick={() => fieldChooserRef.current.instance().applyChanges()} ></Button> <Button text="Cancel" onClick={() => fieldChooserRef.current.instance().cancelChanges()} ></Button> </div> } <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Choose layout:</span> <RadioGroup items={layouts} value={layout} className="option-editor" layout="vertical" valueExpr="key" displayExpr="name" onValueChange={setLayout}> </RadioGroup> </div> <div className="option"> <span>Apply Changes Mode:</span> <SelectBox className="option-editor" items={applyChangesModes} inputAttr={applyChangesModeLabel} width={180} value={applyChangesMode} onValueChange={setApplyChangesMode}> </SelectBox> </div> </div> </div> </React.Fragment> ); }; const dataSource = new PivotGridDataSource({ fields: [{ caption: 'Region', width: 120, dataField: 'region', area: 'row', headerFilter: { search: { enabled: true, }, }, }, { caption: 'City', dataField: 'city', width: 150, area: 'row', headerFilter: { search: { enabled: true, }, }, selector(data: { city: any; country: any; }) { return `${data.city} (${data.country})`; }, }, { dataField: 'date', dataType: 'date', area: 'column', }, { caption: 'Sales', dataField: 'amount', dataType: 'number', summaryType: 'sum', format: 'currency', area: 'data', }], store: service.getSales(), }); export default App;

import React, { useRef, useState } from 'react'; import { PivotGrid, FieldChooser } from 'devextreme-react/pivot-grid'; import { PivotGridFieldChooser, Texts } from 'devextreme-react/pivot-grid-field-chooser'; import { SelectBox } from 'devextreme-react/select-box'; import { Button } from 'devextreme-react/button'; import { RadioGroup } from 'devextreme-react/radio-group'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; import service from './data.js'; const applyChangesModeLabel = { 'aria-label': 'Apply Changes Mode' }; const applyChangesModes = ['instantly', 'onDemand']; const layouts = service.getLayouts(); const App = () => { const [applyChangesMode, setApplyChangesMode] = useState('instantly'); const [layout, setLayout] = useState(0); const fieldChooserRef = useRef(null); return ( <React.Fragment> <PivotGrid dataSource={dataSource} allowSortingBySummary={true} allowFiltering={true} allowSorting={true} showBorders={true} > <FieldChooser enabled={false} /> </PivotGrid> <div className="container"> <PivotGridFieldChooser ref={fieldChooserRef} dataSource={dataSource} width={400} height={400} layout={layout} applyChangesMode={applyChangesMode} > <Texts allFields="All" columnFields="Columns" dataFields="Data" rowFields="Rows" filterFields="Filter" ></Texts> </PivotGridFieldChooser> {applyChangesMode === 'onDemand' && ( <div className="bottom-bar"> <Button text="Apply" type="default" onClick={() => fieldChooserRef.current.instance().applyChanges()} ></Button> <Button text="Cancel" onClick={() => fieldChooserRef.current.instance().cancelChanges()} ></Button> </div> )} <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Choose layout:</span> <RadioGroup items={layouts} value={layout} className="option-editor" layout="vertical" valueExpr="key" displayExpr="name" onValueChange={setLayout} ></RadioGroup> </div> <div className="option"> <span>Apply Changes Mode:</span> <SelectBox className="option-editor" items={applyChangesModes} inputAttr={applyChangesModeLabel} width={180} value={applyChangesMode} onValueChange={setApplyChangesMode} ></SelectBox> </div> </div> </div> </React.Fragment> ); }; const dataSource = new PivotGridDataSource({ fields: [ { caption: 'Region', width: 120, dataField: 'region', area: 'row', headerFilter: { search: { enabled: true, }, }, }, { caption: 'City', dataField: 'city', width: 150, area: 'row', headerFilter: { search: { enabled: true, }, }, selector(data) { return `${data.city} (${data.country})`; }, }, { dataField: 'date', dataType: 'date', area: 'column', }, { caption: 'Sales', dataField: 'amount', dataType: 'number', summaryType: 'sum', format: 'currency', area: 'data', }, ], store: service.getSales(), }); export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!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.1.6/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>

.container { position: relative; margin-top: 20px; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: absolute; top: 29px; bottom: 5px; left: 420px; width: 180px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } .bottom-bar { width: 396px; text-align: right; margin-top: 5px; } #applyButton { margin-right: 10px; } .option-editor { margin-top: 5px; }

React Pivot Grid - Standalone Field Chooser