RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Demos/WidgetsGallery/Demo/PivotGrid/HeaderFilter/ below:

Filtering - React Pivot Grid

import React, { useState } from 'react'; import { PivotGrid, HeaderFilter, Search, FieldChooser, FieldPanel, } from 'devextreme-react/pivot-grid'; import { CheckBox } from 'devextreme-react/check-box'; import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store'; const dataSource = new PivotGridDataSource({ fields: [ { dataField: '[Product].[Category]', area: 'column' }, { dataField: '[Product].[Subcategory]', area: 'column' }, { dataField: '[Customer].[City]', area: 'row' }, { dataField: '[Measures].[Internet Total Product Cost]', area: 'data', format: 'currency' }, { dataField: '[Customer].[Country]', area: 'filter', filterValues: ['[Customer].[Country].&[United Kingdom]'], }, { dataField: '[Ship Date].[Calendar Year]', area: 'filter', filterValues: ['[Ship Date].[Calendar Year].&[2004]'], }, ], store: new XmlaStore({ url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll', catalog: 'Adventure Works DW Standard Edition', cube: 'Adventure Works', }), }); const App = () => { const [searchEnabled, setSearchEnabled] = useState(true); const [showRelevantValues, setShowRelevantValues] = useState(true); return ( <div> <PivotGrid id="sales" allowFiltering={true} allowSorting={true} allowSortingBySummary={true} height={570} showBorders={true} dataSource={dataSource} > <HeaderFilter showRelevantValues={showRelevantValues} width={300} height={400} > <Search enabled={searchEnabled} /> </HeaderFilter> <FieldChooser allowSearch={true} /> <FieldPanel visible={true} /> </PivotGrid> <div className="options"> <div className="caption">Options</div> <div className="options-container"> <div className="option"> <CheckBox value={searchEnabled} text="Allow Search" onValueChange={setSearchEnabled} /> </div> <div className="option"> <CheckBox value={showRelevantValues} text="Show Relevant Values" onValueChange={setShowRelevantValues} /> </div> </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'), );

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/25.1.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/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>

#sales { max-height: 570px; } .options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { width: 24%; display: inline-block; margin-top: 10px; } .options-container { display: flex; align-items: center; }

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4