Contents
Column chooser in React Grid component
25 Mar 202524 minutes to read
The column chooser feature in the Syncfusion® React Grid component allows you to dynamically show or hide columns. This feature can be enabled by defining the showColumnChooser property as true.
To use the column chooser, you need to inject the ColumnChooser module.
import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions = ['ColumnChooser'];
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' showInColumnChooser={false}/>
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right'/>
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right'/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false}/>
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]}/>
</GridComponent>;
}
;
export default App;import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ColumnChooser'];
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];The column chooser dialog displays the header text of each column by default. If the header text is not defined for a column, the corresponding column field name is displayed instead.
Hide column in column chooser dialog
You can hide the column names in column chooser by defining the showInColumnChooser as false. This feature is useful when working with a large number of columns or when you want to limit the number of columns that are available for selection in the column chooser dialog.
In this example, the showInColumnChooser property is set to false for the Order ID column. As a result, the Order ID column will not be displayed in the column chooser dialog.
import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions = ['ColumnChooser'];
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' showInColumnChooser={false} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
};
export default App;import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ColumnChooser'];
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' showInColumnChooser={false} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];The
showInColumnChooserproperty is applied to eachelement individually. By setting it to false, you can hide specific columns from the column chooser dialog.
Open column chooser by externally
The Syncfusion® React Grid provides the flexibility to open the column chooser dialog on a web page using an external button. By default, the column chooser button is displayed in the right corner of the grid component, and clicking the button opens the column chooser dialog below it. However, you can programmatically open the column chooser dialog at specific X and Y axis positions by using the openColumnChooser method.
Here’s an example of how to open the column chooser in the Grid using an external button:
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const show = () => {
if (grid) {
/* give X and Y axis */
grid.columnChooserModule.openColumnChooser(100, 40);
}
};
return <div>
<ButtonComponent cssClass='e-flat' onClick={show}>Open Column Chooser</ButtonComponent>
<GridComponent dataSource={data} showColumnChooser={true} height={295} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' showInColumnChooser={false}/>
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right'/>
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right'/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false}/>
</ColumnsDirective>
<Inject services={[ColumnChooser]}/>
</GridComponent>
</div>;
}
;
export default App;import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnChooser, ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: Grid | null;
const show = () => {
if (grid) {
/* give X and Y axis */
grid.columnChooserModule.openColumnChooser(100, 40);
}
}
return <div>
<ButtonComponent cssClass='e-flat' onClick={show}>Open Column Chooser</ButtonComponent>
<GridComponent dataSource={data} showColumnChooser={true} height={295} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' showInColumnChooser={false} />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[ColumnChooser]} />
</GridComponent>
</div>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Customize column chooser dialog size
The column chooser dialog in Syncfusion® React Grid comes with default size, but you can modify its height and width as per your specific needs using CSS styles.
To customize the column chooser dialog size, you can use the following CSS styles:
.e-grid .e-dialog.e-ccdlg {
height: 500px;
width: 200px;
}
.e-grid .e-ccdlg .e-cc-contentdiv {
height: 200px;
width: 230px;
}import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions = ['ColumnChooser'];
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' showInColumnChooser={false} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
};
export default App;import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ColumnChooser'];
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' showInColumnChooser={false} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Change default search operator of the column chooser
The column chooser dialog in the Syncfusion® React Grid provides a search box that allows you to search for column names. By default, the search functionality uses the “startsWith” operator to match columns and display the results in the column chooser dialog. However, there might be cases where you need to change the default search operator to achieve more precise data matching.
To change the default search operator of the column chooser in Syncfusion® Grid, you need to use the operator property of the columnChooserSettings.
Here’s an example of how to change the default search operator of the column chooser to contains in the React Grid:
import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions = ['ColumnChooser'];
const columnChooserSettings = { operator: 'contains' };
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} columnChooserSettings={columnChooserSettings}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' showInColumnChooser={false} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
};
export default App;import { ColumnChooser, ColumnChooserSettingsModel, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ColumnChooser'];
const columnChooserSettings: ColumnChooserSettingsModel = { operator: 'contains' };
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} columnChooserSettings={columnChooserSettings}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' showInColumnChooser={false} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Diacritics searching in column chooser
By default, the grid ignores diacritic characters when performing a search in the column chooser. However, in some cases, you may want to include diacritic characters in the search. To enable this behavior, you can set the columnchoosersettings.ignoreAccent property to true.
Here is an example that demonstrates the usage of the ignoreAccent property to include diacritic characters for searching in the column chooser:
import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions = ['ColumnChooser'];
const columnChooserSettings = { ignoreAccent: true };
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} columnChooserSettings={columnChooserSettings}>
<ColumnsDirective>
<ColumnDirective field='ÒrderID̂' headerText='Òrder ID̂' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='F̂reight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
};
export default App;import { ColumnChooser, ColumnChooserSettingsModel, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['ColumnChooser'];
const columnChooserSettings: ColumnChooserSettingsModel = { ignoreAccent: true };
return <GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} columnChooserSettings={columnChooserSettings}>
<ColumnsDirective>
<ColumnDirective field='ÒrderID̂' headerText='Òrder ID̂' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='F̂reight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
};
export default App;export let data = [
{
ÒrderID̂: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ',
ShipPostalCode: '51100',
ShipCountry: 'France',
F̂reight: 32.38,
Verified: !0,
},
{
ÒrderID̂: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ',
ShipPostalCode: '44087',
ShipCountry: 'Germany',
F̂reight: 11.61,
Verified: !1,
},
{
ÒrderID̂: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ',
ShipPostalCode: '05454-876',
ShipCountry: 'Brazil',
F̂reight: 65.83,
Verified: !0,
},
{
ÒrderID̂: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ',
ShipPostalCode: '69004',
ShipCountry: 'France',
F̂reight: 41.34,
Verified: !0,
},
{
ÒrderID̂: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ',
ShipPostalCode: 'B-6000',
ShipCountry: 'Belgium',
F̂reight: 51.3,
Verified: !0,
},
{
ÒrderID̂: 10253,
CustomerID: 'HANAR',
EmployeeID: 3,
OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ',
ShipPostalCode: '05454-876',
ShipCountry: 'Brazil',
F̂reight: 58.17,
Verified: !0,
},
{
ÒrderID̂: 10254,
CustomerID: 'CHOPS',
EmployeeID: 5,
OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese',
ShipCity: 'Bern',
ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ',
ShipPostalCode: '3012',
ShipCountry: 'Switzerland',
F̂reight: 22.98,
Verified: !1,
},
{
ÒrderID̂: 10255,
CustomerID: 'RICSU',
EmployeeID: 9,
OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt',
ShipCity: 'Genève',
ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ',
ShipPostalCode: '1204',
ShipCountry: 'Switzerland',
F̂reight: 148.33,
Verified: !0,
},
{
ÒrderID̂: 10256,
CustomerID: 'WELLI',
EmployeeID: 3,
OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora',
ShipCity: 'Resende',
ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP',
ShipPostalCode: '08737-363',
ShipCountry: 'Brazil',
F̂reight: 13.97,
Verified: !1,
},
{
ÒrderID̂: 10257,
CustomerID: 'HILAA',
EmployeeID: 4,
OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos',
ShipCity: 'San Cristóbal',
ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira',
ShipPostalCode: '5022',
ShipCountry: 'Venezuela',
F̂reight: 81.91,
Verified: !0,
},
{
ÒrderID̂: 10258,
CustomerID: 'ERNSH',
EmployeeID: 1,
OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel',
ShipCity: 'Graz',
ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ',
ShipPostalCode: '8010',
ShipCountry: 'Austria',
F̂reight: 140.51,
Verified: !0,
},
{
ÒrderID̂: 10259,
CustomerID: 'CENTC',
EmployeeID: 4,
OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma',
ShipCity: 'México D.F.',
ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ',
ShipPostalCode: '05022',
ShipCountry: 'Mexico',
F̂reight: 3.25,
Verified: !1,
},
{
ÒrderID̂: 10260,
CustomerID: 'OTTIK',
EmployeeID: 4,
OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen',
ShipCity: 'Köln',
ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ',
ShipPostalCode: '50739',
ShipCountry: 'Germany',
F̂reight: 55.09,
Verified: !0,
},
{
ÒrderID̂: 10261,
CustomerID: 'QUEDE',
EmployeeID: 4,
OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ',
ShipPostalCode: '02389-673',
ShipCountry: 'Brazil',
F̂reight: 3.05,
Verified: !1,
},
{
ÒrderID̂: 10262,
CustomerID: 'RATTC',
EmployeeID: 8,
OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery',
ShipCity: 'Albuquerque',
ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM',
ShipPostalCode: '87110',
ShipCountry: 'USA',
F̂reight: 48.29,
Verified: !0,
},
];export let data: Object[] = [
{
ÒrderID̂: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ',
ShipPostalCode: '51100',
ShipCountry: 'France',
F̂reight: 32.38,
Verified: !0,
},
{
ÒrderID̂: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ',
ShipPostalCode: '44087',
ShipCountry: 'Germany',
F̂reight: 11.61,
Verified: !1,
},
{
ÒrderID̂: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ',
ShipPostalCode: '05454-876',
ShipCountry: 'Brazil',
F̂reight: 65.83,
Verified: !0,
},
{
ÒrderID̂: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ',
ShipPostalCode: '69004',
ShipCountry: 'France',
F̂reight: 41.34,
Verified: !0,
},
{
ÒrderID̂: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ',
ShipPostalCode: 'B-6000',
ShipCountry: 'Belgium',
F̂reight: 51.3,
Verified: !0,
},
{
ÒrderID̂: 10253,
CustomerID: 'HANAR',
EmployeeID: 3,
OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ',
ShipPostalCode: '05454-876',
ShipCountry: 'Brazil',
F̂reight: 58.17,
Verified: !0,
},
{
ÒrderID̂: 10254,
CustomerID: 'CHOPS',
EmployeeID: 5,
OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese',
ShipCity: 'Bern',
ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ',
ShipPostalCode: '3012',
ShipCountry: 'Switzerland',
F̂reight: 22.98,
Verified: !1,
},
{
ÒrderID̂: 10255,
CustomerID: 'RICSU',
EmployeeID: 9,
OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt',
ShipCity: 'Genève',
ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ',
ShipPostalCode: '1204',
ShipCountry: 'Switzerland',
F̂reight: 148.33,
Verified: !0,
},
{
ÒrderID̂: 10256,
CustomerID: 'WELLI',
EmployeeID: 3,
OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora',
ShipCity: 'Resende',
ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP',
ShipPostalCode: '08737-363',
ShipCountry: 'Brazil',
F̂reight: 13.97,
Verified: !1,
},
{
ÒrderID̂: 10257,
CustomerID: 'HILAA',
EmployeeID: 4,
OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos',
ShipCity: 'San Cristóbal',
ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira',
ShipPostalCode: '5022',
ShipCountry: 'Venezuela',
F̂reight: 81.91,
Verified: !0,
},
{
ÒrderID̂: 10258,
CustomerID: 'ERNSH',
EmployeeID: 1,
OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel',
ShipCity: 'Graz',
ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ',
ShipPostalCode: '8010',
ShipCountry: 'Austria',
F̂reight: 140.51,
Verified: !0,
},
{
ÒrderID̂: 10259,
CustomerID: 'CENTC',
EmployeeID: 4,
OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma',
ShipCity: 'México D.F.',
ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ',
ShipPostalCode: '05022',
ShipCountry: 'Mexico',
F̂reight: 3.25,
Verified: !1,
},
{
ÒrderID̂: 10260,
CustomerID: 'OTTIK',
EmployeeID: 4,
OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen',
ShipCity: 'Köln',
ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ',
ShipPostalCode: '50739',
ShipCountry: 'Germany',
F̂reight: 55.09,
Verified: !0,
},
{
ÒrderID̂: 10261,
CustomerID: 'QUEDE',
EmployeeID: 4,
OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ',
ShipPostalCode: '02389-673',
ShipCountry: 'Brazil',
F̂reight: 3.05,
Verified: !1,
},
{
ÒrderID̂: 10262,
CustomerID: 'RATTC',
EmployeeID: 8,
OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery',
ShipCity: 'Albuquerque',
ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM',
ShipPostalCode: '87110',
ShipCountry: 'USA',
F̂reight: 48.29,
Verified: !0,
},
];Column Chooser Template in Syncfusion React Grid
The Column Chooser Template feature allows full customization of the column chooser’s header, content, and footer, making it easier to manage column visibility. To enable the column chooser, set showColumnChooser to true and add ColumnChooser to the toolbar property.
To implement a custom column chooser template in the Grid, use the following properties:
-
columnChooserSettings.headerTemplate - Defines the header template of the column chooser.
-
columnChooserSettings.template- Defines the content template.
-
columnChooserSettings.footerTemplate - Defines the footer template.
In this example, a Syncfusion TreeView component is rendered inside the column chooser. To use the TreeView component, install the Syncfusion TreeView package as described in the documentation. The columnChooserSettings.template property is used to render the TreeView component with checkboxes.Checkbox selection is handled using the nodeClicked and keyPress events, which organize columns into Order Details, Shipping Details, and Delivery Status.
The column chooser footer is customized using columnChooserSettings.footerTemplate, replacing the default buttons with customized Apply and Close buttons. The Apply button updates column visibility based on selection, while the Close button closes the column chooser via the onClick event. Additionally, the header is customized using columnChooserSettings.headerTemplate to include a title and an icon.
import * as React from 'react';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Inject, Toolbar, ColumnChooser } from '@syncfusion/ej2-react-grids';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { stackedHeaderData } from './datasource';
function App() {
function HeaderTemplate() {
return (<div>
<span className="e-icons e-columns" id="column-chooser-icon" style=></span>
<span id="column-chooser-text" style=>Column Options</span>
</div>);
}
function Template(props) {
const parentNodes = [
{ id: 1, name: 'Order Details', hasChild: true, expanded: true },
{ id: 2, name: 'Shipping Details', hasChild: true, expanded: true },
{ id: 3, name: 'Delivery Status', hasChild: true, expanded: true },
];
let treeData = [];
if (props.columns && props.columns.length) {
treeData = props.columns.map((column) => {
let parentId;
switch (column.field) {
case 'OrderID':
case 'OrderDate':
parentId = 1;
break;
case 'ShipCountry':
case 'Freight':
parentId = 2;
break;
case 'Status':
parentId = 3;
break;
default:
break;
}
return {
id: column.uid,
name: column.headerText,
pid: parentId,
isChecked: column.visible
};
});
const uniquePids = [];
treeData.forEach((item) => {
if (!uniquePids.includes(item.pid)) {
uniquePids.push(item.pid);
}
});
const filteredParents = parentNodes.filter((parent) => uniquePids.includes(parent.id));
treeData.push(...filteredParents);
}
else {
treeData = [];
}
const fields = { dataSource: treeData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
const enableRTL = gridInstance.enableRtl ? true : false;
React.useEffect(() => {
if (treeObj) {
treeObj.setProperties({ fields });
}
}, [props.columns]);
return (<div>
{props.columns && props.columns.length ? (<TreeViewComponent fields={fields} cssClass="no-border" enableRtl={enableRTL} showCheckBox={true} nodeClicked={nodeCheck.bind(this)} keyPress={nodeCheck.bind(this)} ref={(treeview) => { treeObj = treeview; }} />) : (<div className="no-record-text">No Matches Found</div>)}
</div>);
}
function FooterTemplate() {
return (<div id="columnChooserFooter">
<ButtonComponent onClick={columnChooserSubmit}>Apply</ButtonComponent>
<ButtonComponent onClick={columnChooserClose}>Close</ButtonComponent>
</div>);
}
function nodeCheck(args) {
let checkedNode = [args.node];
if (args.event.target.classList.contains('e-fullrow') || args.event.key == "Enter") {
let getNodeDetails = treeObj.getNode(args.node);
if (getNodeDetails.isChecked == 'true') {
treeObj.uncheckAll(checkedNode);
}
else {
treeObj.checkAll(checkedNode);
}
}
}
function columnChooserClose() {
gridInstance.columnChooserModule.hideDialog();
}
function columnChooserSubmit() {
const checkedElements = [];
const uncheckedElements = [];
var showColumns = gridInstance.getVisibleColumns().filter(function (column) { return (column.showInColumnChooser === true); });
showColumns = showColumns.map(function (col) { return col.headerText; });
const treeItems = document.querySelectorAll('.e-list-item');
treeItems.forEach(item => {
const itemDetails = treeObj.getNode(item);
if (!itemDetails.hasChildren) {
if (item.getAttribute('aria-checked') === 'true') {
checkedElements.push(itemDetails.text);
}
else {
uncheckedElements.push(itemDetails.text);
}
}
});
showColumns = showColumns.filter((col) => !uncheckedElements.includes(col));
checkedElements.forEach(item => {
if (!showColumns.includes(item)) {
showColumns.push(item);
}
});
var columnsToUpdate = { visibleColumns: showColumns, hiddenColumns: uncheckedElements };
gridInstance.columnChooserModule.changeColumnVisibility(columnsToUpdate);
}
let treeObj;
let gridInstance;
const toolbar = ['ColumnChooser'];
const columnChooserSettings = { template: Template, headerTemplate: HeaderTemplate, footerTemplate: FooterTemplate };
return <div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={stackedHeaderData} ref={(grid) => { gridInstance = grid; }} allowPaging={true} toolbar={toolbar} showColumnChooser={true} columnChooserSettings={columnChooserSettings}>
<ColumnsDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='160' textAlign='Right' isPrimaryKey={true} showInColumnChooser={false}></ColumnDirective>
<ColumnDirective field='CustomerName' headerText='Name' width='100' ></ColumnDirective>
<ColumnDirective columns={[
{ field: 'OrderID', headerText: 'ID', textAlign: 'Right', width: 90 },
{ field: 'OrderDate', headerText: 'Date', textAlign: 'Right', width: 110, format: 'yMd', }
]} headerText='Order Details' textAlign='Center' />
<ColumnDirective columns={[
{ field: 'ShipCountry', headerText: 'Country', textAlign: 'Left', width: 115 },
{ field: 'Freight', headerText: 'Charges', textAlign: 'Right', width: 130, format: 'C2' },
]} headerText='Shipping Details' textAlign='Center' />
<ColumnDirective columns={[
{ field: 'Status', headerText: 'Status', textAlign: 'Center', width: 110 },
]} headerText='Delivery Status' textAlign='Center' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ColumnChooser]} />
</GridComponent>
</div>
</div>
};
export default App;import * as React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { stackedHeaderData } from './datasource';
import { TreeView, TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Inject, Toolbar,ColumnModel, ColumnChooser, ToolbarItems, ColumnChooserSettingsModel } from '@syncfusion/ej2-react-grids';
function App() {
function HeaderTemplate() {
return (<div>
<span className="e-icons e-columns" id="column-chooser-icon" style=></span>
<span id="column-chooser-text" style=>Column Options</span>
</div>);
}
function Template(props:any) {
const parentNodes = [
{ id: 1, name: 'Order Details', hasChild: true, expanded: true },
{ id: 2, name: 'Shipping Details', hasChild: true, expanded: true },
{ id: 3, name: 'Delivery Status', hasChild: true, expanded: true },
];
let treeData: { [key: string]: Object }[]= [];
if (props.columns && props.columns.length) {
treeData = props.columns.map((column:ColumnModel) => {
let parentId;
switch (column.field) {
case 'OrderID':
case 'OrderDate':
parentId = 1;
break;
case 'ShipCountry':
case 'Freight':
parentId = 2;
break;
case 'Status':
parentId = 3;
break;
default:
break;
}
return {
id: column.uid,
name: column.headerText,
pid: parentId,
isChecked: column.visible
};
});
const uniquePids: string[] = [];
treeData.forEach((item: any) => {
if (!uniquePids.includes(item.pid)) {
uniquePids.push(item.pid);
}
});
const filteredParents = parentNodes.filter((parent: any) => uniquePids.includes(parent.id));
treeData.push(...filteredParents);
}
else {
treeData = [];
}
const fields = { dataSource: treeData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
const enableRTL = gridInstance.enableRtl ? true : false;
React.useEffect(() => {
if (treeObj) {
treeObj.setProperties({ fields });
}
}, [props.columns]);
return (<div>
{props.columns && props.columns.length ? (<TreeViewComponent fields={fields} cssClass="no-border" enableRtl={enableRTL} showCheckBox={true} nodeClicked={nodeCheck.bind(this)} keyPress={nodeCheck.bind(this)} ref={(treeview) => { treeObj = treeview; }} />) : (<div className="no-record-text">No Matches Found</div>)}
</div>);
}
function FooterTemplate() {
return (<div id="columnChooserFooter">
<ButtonComponent onClick={columnChooserSubmit}>Apply</ButtonComponent>
<ButtonComponent onClick={columnChooserClose}>Close</ButtonComponent>
</div>);
}
function nodeCheck(args:any) {
let checkedNode: any = [args.node];
if (args.event.target.classList.contains('e-fullrow') || args.event.key == "Enter") {
let getNodeDetails: any = treeObj.getNode(args.node);
if (getNodeDetails.isChecked == 'true') {
treeObj.uncheckAll(checkedNode);
}
else {
treeObj.checkAll(checkedNode);
}
}
}
function columnChooserClose() {
gridInstance.columnChooserModule.hideDialog();
}
function columnChooserSubmit() {
const checkedElements: any = [];
const uncheckedElements: any = [];
var showColumns: any = gridInstance.getVisibleColumns().filter(function (column: any) { return (column.showInColumnChooser === true); });
showColumns = showColumns.map(function (col: any) { return col.headerText; });
const treeItems = document.querySelectorAll('.e-list-item');
treeItems.forEach(item => {
const itemDetails = treeObj.getNode(item);
if (!itemDetails.hasChildren) {
if (item.getAttribute('aria-checked') === 'true') {
checkedElements.push(itemDetails.text);
}
else {
uncheckedElements.push(itemDetails.text);
}
}
});
showColumns = showColumns.filter((col: any) => !uncheckedElements.includes(col));
checkedElements.forEach(item => {
if (!showColumns.includes(item)) {
showColumns.push(item);
}
});
var columnsToUpdate: any = { visibleColumns: showColumns, hiddenColumns: uncheckedElements };
gridInstance.columnChooserModule.changeColumnVisibility(columnsToUpdate);
}
let treeObj: TreeView;
let gridInstance: GridComponent;
const toolbar: ToolbarItems[] = ['ColumnChooser'];
const columnChooserSettings: ColumnChooserSettingsModel = { template: Template, headerTemplate: HeaderTemplate, footerTemplate: FooterTemplate }
return <div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={stackedHeaderData} ref={(grid) => { gridInstance = grid; }} allowPaging={true} toolbar={toolbar} showColumnChooser={true} columnChooserSettings={columnChooserSettings}>
<ColumnsDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='160' textAlign='Right' isPrimaryKey={true} showInColumnChooser={false}></ColumnDirective>
<ColumnDirective field='CustomerName' headerText='Name' width='100' ></ColumnDirective>
<ColumnDirective columns={[
{ field: 'OrderID', headerText: 'ID', textAlign: 'Right', width: 90 },
{ field: 'OrderDate', headerText: 'Date', textAlign: 'Right', width: 110, format: 'yMd', }
]} headerText='Order Details' textAlign='Center' />
<ColumnDirective columns={[
{ field: 'ShipCountry', headerText: 'Country', textAlign: 'Left', width: 115 },
{ field: 'Freight', headerText: 'Charges', textAlign: 'Right', width: 130, format: 'C2' },
]} headerText='Shipping Details' textAlign='Center' />
<ColumnDirective columns={[
{ field: 'Status', headerText: 'Status', textAlign: 'Center', width: 110 },
]} headerText='Delivery Status' textAlign='Center' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ColumnChooser]} />
</GridComponent>
</div>
</div>
};
export default App;let stackedHeaderData = [];
const customerName = ["VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC", "OTTIK", "QUEDE"];
const shipCities = ["Reims", "Münster", "Rio de Janeiro", "Lyon", "Charleroi", "Bern", "Genève", "Resende", "San Cristóbal", "Graz", "México D.F.", "Köln", "Rio de Janeiro"];
const shipCountries= ["France", "Germany", "Brazil", "Belgium", "Switzerland", "Austria", "Mexico", "Venezuela"];
const statusOptions= ["Delivered", "Delivered", "In-progress", "Delivered", "In-progress", "In-progress", "Delivered", "Delivered", "In-progress", "Delivered"];
const date = [new Date(1704067200000), new Date(1706745600000), new Date(1730467200000), new Date(1727788800000), new Date(1725206400000), new Date(1722528000000), new Date(1719849600000),
new Date(1717312000000), new Date(1714720000000), new Date(1712041600000), new Date(1709459200000), new Date(1706781000000), new Date(1704288000000)];
const freightValues = [10.5, 20.75, 30.0, 40.25, 50.6, 60.85, 70.9, 80.1, 90.45, 100.55];
const feedbackValues = [1, 2, 3, 4, 5];
for (let i = 1; i <= 830; i++) {
stackedHeaderData.push({
OrderID: 150000 + i,
CustomerID: 1000 + i,
CustomerName: customerName[i % customerName.length],
OrderDate: date[i % date.length],
ShippedDate: date[i % date.length],
Freight: freightValues[i % freightValues.length],
ShipName: customerName[i % customerName.length] + " Logistics",
ShipAddress: "Address " + i,
ShipCity: shipCities[i % shipCities.length],
ShipRegion: null,
ShipCountry: shipCountries[i % shipCountries.length],
Year: 2025,
Salary: Math.floor(Math.random() * 30000) + 25000,
Feedback: statusOptions[i % statusOptions.length] === "In-progress" ? 0 : feedbackValues[i % feedbackValues.length],
Status: statusOptions[i % statusOptions.length]
});
}export let stackedHeaderData: Object[] = [];
const customerName: string[] = ["VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC", "OTTIK", "QUEDE"];
const shipCities: string[] = ["Reims", "Münster", "Rio de Janeiro", "Lyon", "Charleroi", "Bern", "Genève", "Resende", "San Cristóbal", "Graz", "México D.F.", "Köln", "Rio de Janeiro"];
const shipCountries: string[] = ["France", "Germany", "Brazil", "Belgium", "Switzerland", "Austria", "Mexico", "Venezuela"];
const statusOptions: string[] = ["Delivered", "Delivered", "In-progress", "Delivered", "In-progress", "In-progress", "Delivered", "Delivered", "In-progress", "Delivered"];
const date: Date[] = [new Date(1704067200000), new Date(1706745600000), new Date(1730467200000), new Date(1727788800000), new Date(1725206400000), new Date(1722528000000), new Date(1719849600000),
new Date(1717312000000), new Date(1714720000000), new Date(1712041600000), new Date(1709459200000), new Date(1706781000000), new Date(1704288000000)];
const freightValues: number[] = [10.5, 20.75, 30.0, 40.25, 50.6, 60.85, 70.9, 80.1, 90.45, 100.55];
const feedbackValues: number[] = [1, 2, 3, 4, 5];
for (let i = 1; i <= 830; i++) {
stackedHeaderData.push({
OrderID: 150000 + i,
CustomerID: 1000 + i,
CustomerName: customerName[i % customerName.length],
OrderDate: date[i % date.length],
ShippedDate: date[i % date.length],
Freight: freightValues[i % freightValues.length],
ShipName: customerName[i % customerName.length] + " Logistics",
ShipAddress: "Address " + i,
ShipCity: shipCities[i % shipCities.length],
ShipRegion: null,
ShipCountry: shipCountries[i % shipCountries.length],
Year: 2025,
Salary: Math.floor(Math.random() * 30000) + 25000,
Feedback: statusOptions[i % statusOptions.length] === "In-progress" ? 0 : feedbackValues[i % feedbackValues.length],
Status: statusOptions[i % statusOptions.length]
});
}Enable and disable search option
By default, the search option in the column chooser allows filtering specific columns from the Grid’s column list.
The search option is enabled by default in the column chooser. However, you can disable it by setting the columnChooserSettings.enableSearching property to false.
The following example demonstrates how to enable or disable the search option dynamically using a Switch and its change event in the Grid.
import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons'
function App() {
let grid;
const toolbarOptions = ['ColumnChooser'];
const toggleColumnSelection = (args) => {
grid.columnChooserSettings.enableSearching = args.checked;
}
return (
<div>
<label style=>Enable and disable search option</label>
<SwitchComponent change={toggleColumnSelection}></SwitchComponent>
<GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' showInColumnChooser={false} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
</div>
)
};
export default App;import { ColumnChooser, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons'
import { ChangeEventArgs} from '@syncfusion/ej2-react-dropdowns';
function App() {
let grid: GridComponent | null;
const toolbarOptions: ToolbarItems[] = ['ColumnChooser'];
const toggleColumnSelection = (args: ChangeEventArgs) => {
(grid as GridComponent).selectionSettings.enableToggle = args.checked;
}
return (
<div>
<label style=>Enable and disable search option</label>
<SwitchComponent checked={true} change={toggleColumnSelection}></SwitchComponent>
<GridComponent dataSource={data} toolbar={toolbarOptions} height={272} showColumnChooser={true} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' showInColumnChooser={false} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ColumnChooser]} />
</GridComponent >
</div>
)
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];