If you have technical questions, please create a support ticket in the DevExpress Support Center.
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;
xxxxxxxxxx
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;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
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);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#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;
}
To configure a header filter, use the global headerFilter object or a field's headerFilter object. This demo specifies the following properties in the global headerFilter object:
-
search
Allows you to configure a search panel within a header filter. -
showRelevantValues
Specifies whether to show all field values or only those that satisfy the other applied filters.
In this demo, a filter is applied to the Country field. This filter includes only the United Kingdom. The City field displays only cities in this country because the showRelevantValues property is true. If you clear the corresponding check box under the PivotGrid, the City field displays all cities, regardless of the other applied filters.