Persistencia del estado de React Grid
La Ignite UI for React en React Grid permite a los desarrolladores guardar y restaurar fácilmente el estado de la cuadrícula. Cuando se aplica IgrGridState
en React IgrGrid
, se exponen los métodos GetState
, GetStateAsString
, ApplyState
y ApplyStateFromString
que los desarrolladores pueden usar para lograr la persistencia del estado en cualquier escenario.
Funciones admitidas
IgrGridState
permite guardar y restaurar el estado de las siguientes características:
Clasificación
Filtración
Filtrado avanzado
Paginación
CellSelection
RowSelection
ColumnSelection
RowPinning
Expansión
GroupBy
Columns
Multi column headers
Orden de columnas
Column properties defined by the IColumnState
interface.
Uso
El getState
método devuelve el estado de la cuadrícula en un IgrGridStateInfo
objeto, que contiene toda la información de estado. Es posible que se requieran pasos adicionales para guardarlo.
Devuelve GetStateAsString
una cadena JSON serializada, por lo que los desarrolladores pueden tomarla y guardarla en cualquier almacenamiento de datos (base de datos, nube, navegador localStorage, etc.).
El desarrollador puede optar por obtener solo el estado de una determinada característica o características, pasando una matriz con nombres de características como argumento. La matriz vacía dará como resultado el uso de las opciones de estado predeterminadas.
<IgrGrid >
<IgrGridState ref ={(ref) => { gridState = ref; }}></IgrGridState >
</IgrGrid >
tsx
const state : IgrGridStateInfo = gridState.getState([]);
const stateString : string = gridState.getStateAsString([]);
const sortingFilteringStates : IgrGridStateInfo = gridState.getState(['sorting' , 'filtering' ]);
tsx
ApplyState
- El método acepta un IgrGridStateInfo
objeto como argumento y restaurará el estado de cada característica que se encuentre en el objeto o en las características especificadas como segundo argumento.
ApplyStateFromString
- El método acepta una cadena JSON serializada como argumento y restaurará el estado de cada característica que se encuentre en la cadena JSON o en las características especificadas como segundo argumento.
gridState.applyState(gridState, []);
gridState.applyStateFromString(gridStateString, []);
gridState.applyState(sortingFilteringStates, [])
tsx
El Options
objeto implementa la IgrGridStateOptions
interfaz, es decir, para cada clave, que es el nombre de una determinada característica, existe el valor booleano que indica si se realizará un seguimiento del estado de esta característica. GetState
/ GetStateAsString
methods no colocará el estado de estas características en el valor devuelto y ApplyState
/ ApplyStateFromString
methods no restaurará el estado de las mismas.
<IgrGridState options ={{ cellSelection: false , sorting: false }}> </IgrGridState >
tsx
Las API de punto único fáciles de usar permiten lograr una funcionalidad de persistencia de estado completa en solo unas pocas líneas de código. Copie y pegue el código desde abajo : guardará el estado de la cuadrícula en el objeto del navegador LocalStorage
cada vez que el usuario abandone la página actual. Cada vez que el usuario regrese a la página principal, se restaurará el estado de la cuadrícula. Ya no es necesario configurar esas complejas expresiones avanzadas de filtrado y ordenación cada vez para obtener los datos que desea: hágalo una vez y haga que el código de abajo haga el resto por sus usuarios:
<IgrGrid rendered ={restoreGridState} >
<IgrGridState ref ={(ref) => { gridState = ref; }}></IgrGridState >
</IgrGrid >
tsx
useEffect(() => {
restoreGridState();
window.addEventListener('beforeunload' , saveGridState);
return () => {
window.removeEventListener('beforeunload' , saveGridState);
}
}, []);
function saveGridState() {
const state = gridState.getState([]);
window.localStorage.setItem('grid-state' , JSON.stringify(state));
}
function restoreGridState() {
const state = window.localStorage.getItem('grid-state' );
if (state) {
gridState.applyState(JSON.parse(state), []);
}
}
function saveGridState() {
const state = gridState.getStateAsString([]);
window.localStorage.setItem('grid-state' , state);
}
function restoreGridState() {
const state = window.localStorage.getItem('grid-state' );
if (state) {
gridState.applyStateFromString(state, []);
}
}
tsx
Manifestación
export class CustomersDataItem {
public constructor (init: Partial<CustomersDataItem> ) {
Object .assign(this , init);
}
public ID: string ;
public CompanyName: string ;
public ContactName: string ;
public ContactTitle: string ;
public Address: string ;
public City: string ;
public Region: string ;
public PostalCode: string ;
public Country: string ;
public Phone: string ;
public Fax: string ;
}
export class CustomersData extends Array <CustomersDataItem > {
public constructor ( ) {
super ();
this .push(new CustomersDataItem(
{
ID : `ALFKI` ,
CompanyName : `Alfreds Futterkiste` ,
ContactName : `Maria Anders` ,
ContactTitle : `Sales Representative` ,
Address : `Obere Str. 57` ,
City : `Berlin` ,
Region : `East` ,
PostalCode : `12209` ,
Country : `Germany` ,
Phone : `030-0074321` ,
Fax : `030-0076545`
}));
this .push(new CustomersDataItem(
{
ID : `ANATR` ,
CompanyName : `Ana Trujillo Emparedados y helados` ,
ContactName : `Ana Trujillo` ,
ContactTitle : `Owner` ,
Address : `Avda. de la Constitución 2222` ,
City : `México D.F.` ,
Region : `South` ,
PostalCode : `05021` ,
Country : `Mexico` ,
Phone : `(5) 555-4729` ,
Fax : `(5) 555-3745`
}));
this .push(new CustomersDataItem(
{
ID : `ANTON` ,
CompanyName : `Antonio Moreno Taquería` ,
ContactName : `Antonio Moreno` ,
ContactTitle : `Owner` ,
Address : `Mataderos 2312` ,
City : `México D.F.` ,
Region : `South` ,
PostalCode : `05023` ,
Country : `Mexico` ,
Phone : `(5) 555-3932` ,
Fax : `(5) 555-3745`
}));
this .push(new CustomersDataItem(
{
ID : `AROUT` ,
CompanyName : `Around the Horn` ,
ContactName : `Thomas Hardy` ,
ContactTitle : `Sales Representative` ,
Address : `120 Hanover Sq.` ,
City : `London` ,
Region : `East` ,
PostalCode : `WA1 1DP` ,
Country : `UK` ,
Phone : `(171) 555-7788` ,
Fax : `(171) 555-6750`
}));
this .push(new CustomersDataItem(
{
ID : `BERGS` ,
CompanyName : `Berglunds snabbköp` ,
ContactName : `Christina Berglund` ,
ContactTitle : `Order Administrator` ,
Address : `Berguvsvägen 8` ,
City : `Luleå` ,
Region : `South` ,
PostalCode : `S-958 22` ,
Country : `Sweden` ,
Phone : `0921-12 34 65` ,
Fax : `0921-12 34 67`
}));
this .push(new CustomersDataItem(
{
ID : `BLAUS` ,
CompanyName : `Blauer See Delikatessen` ,
ContactName : `Hanna Moos` ,
ContactTitle : `Sales Representative` ,
Address : `Forsterstr. 57` ,
City : `Mannheim` ,
Region : `East` ,
PostalCode : `68306` ,
Country : `Germany` ,
Phone : `0621-08460` ,
Fax : `0621-08924`
}));
this .push(new CustomersDataItem(
{
ID : `BLONP` ,
CompanyName : `Blondesddsl père et fils` ,
ContactName : `Frédérique Citeaux` ,
ContactTitle : `Marketing Manager` ,
Address : `24, place Kléber` ,
City : `Strasbourg` ,
Region : `East` ,
PostalCode : `67000` ,
Country : `France` ,
Phone : `88.60.15.31` ,
Fax : `88.60.15.32`
}));
this .push(new CustomersDataItem(
{
ID : `BOLID` ,
CompanyName : `Bólido Comidas preparadas` ,
ContactName : `Martín Sommer` ,
ContactTitle : `Owner` ,
Address : `C/ Araquil, 67` ,
City : `Madrid` ,
Region : `East` ,
PostalCode : `28023` ,
Country : `Spain` ,
Phone : `(91) 555 22 82` ,
Fax : `(91) 555 91 99`
}));
this .push(new CustomersDataItem(
{
ID : `BONAP` ,
CompanyName : `Bon app'` ,
ContactName : `Laurence Lebihan` ,
ContactTitle : `Owner` ,
Address : `12, rue des Bouchers` ,
City : `Marseille` ,
Region : `West` ,
PostalCode : `13008` ,
Country : `France` ,
Phone : `91.24.45.40` ,
Fax : `91.24.45.41`
}));
this .push(new CustomersDataItem(
{
ID : `BOTTM` ,
CompanyName : `Bottom-Dollar Markets` ,
ContactName : `Elizabeth Lincoln` ,
ContactTitle : `Accounting Manager` ,
Address : `23 Tsawassen Blvd.` ,
City : `Tsawassen` ,
Region : `BC` ,
PostalCode : `T2F 8M4` ,
Country : `Canada` ,
Phone : `(604) 555-4729` ,
Fax : `(604) 555-3745`
}));
this .push(new CustomersDataItem(
{
ID : `BSBEV` ,
CompanyName : `B's Beverages` ,
ContactName : `Victoria Ashworth` ,
ContactTitle : `Sales Representative` ,
Address : `Fauntleroy Circus` ,
City : `London` ,
Region : `South` ,
PostalCode : `EC2 5NT` ,
Country : `UK` ,
Phone : `(171) 555-1212` ,
Fax : `(5) 555-3745`
}));
this .push(new CustomersDataItem(
{
ID : `CACTU` ,
CompanyName : `Cactus Comidas para llevar` ,
ContactName : `Patricio Simpson` ,
ContactTitle : `Sales Agent` ,
Address : `Cerrito 333` ,
City : `Buenos Aires` ,
Region : `East` ,
PostalCode : `1010` ,
Country : `Argentina` ,
Phone : `(1) 135-5555` ,
Fax : `(1) 135-4892`
}));
this .push(new CustomersDataItem(
{
ID : `CENTC` ,
CompanyName : `Centro comercial Moctezuma` ,
ContactName : `Francisco Chang` ,
ContactTitle : `Marketing Manager` ,
Address : `Sierras de Granada 9993` ,
City : `México D.F.` ,
Region : `South` ,
PostalCode : `05022` ,
Country : `Mexico` ,
Phone : `(5) 555-3392` ,
Fax : `(5) 555-7293`
}));
this .push(new CustomersDataItem(
{
ID : `CHOPS` ,
CompanyName : `Chop-suey Chinese` ,
ContactName : `Yang Wang` ,
ContactTitle : `Owner` ,
Address : `Hauptstr. 29` ,
City : `Bern` ,
Region : `East` ,
PostalCode : `3012` ,
Country : `Switzerland` ,
Phone : `0452-076545` ,
Fax : `(5) 555-3745`
}));
this .push(new CustomersDataItem(
{
ID : `COMMI` ,
CompanyName : `Comércio Mineiro` ,
ContactName : `Pedro Afonso` ,
ContactTitle : `Sales Associate` ,
Address : `Av. dos Lusíadas, 23` ,
City : `Sao Paulo` ,
Region : `SP` ,
PostalCode : `05432-043` ,
Country : `Brazil` ,
Phone : `(11) 555-7647` ,
Fax : `(5) 555-3745`
}));
this .push(new CustomersDataItem(
{
ID : `CONSH` ,
CompanyName : `Consolidated Holdings` ,
ContactName : `Elizabeth Brown` ,
ContactTitle : `Sales Representative` ,
Address : `Berkeley Gardens 12 Brewery` ,
City : `London` ,
Region : `South` ,
PostalCode : `WX1 6LT` ,
Country : `UK` ,
Phone : `(171) 555-2282` ,
Fax : `(171) 555-9199`
}));
this .push(new CustomersDataItem(
{
ID : `DRACD` ,
CompanyName : `Drachenblut Delikatessen` ,
ContactName : `Sven Ottlieb` ,
ContactTitle : `Order Administrator` ,
Address : `Walserweg 21` ,
City : `Aachen` ,
Region : `South` ,
PostalCode : `52066` ,
Country : `Germany` ,
Phone : `0241-039123` ,
Fax : `0241-059428`
}));
this .push(new CustomersDataItem(
{
ID : `DUMON` ,
CompanyName : `Du monde entier` ,
ContactName : `Janine Labrune` ,
ContactTitle : `Owner` ,
Address : `67, rue des Cinquante Otages` ,
City : `Nantes` ,
Region : `East` ,
PostalCode : `44000` ,
Country : `France` ,
Phone : `40.67.88.88` ,
Fax : `40.67.89.89`
}));
this .push(new CustomersDataItem(
{
ID : `EASTC` ,
CompanyName : `Eastern Connection` ,
ContactName : `Ann Devon` ,
ContactTitle : `Sales Agent` ,
Address : `35 King George` ,
City : `London` ,
Region : `East` ,
PostalCode : `WX3 6FW` ,
Country : `UK` ,
Phone : `(171) 555-0297` ,
Fax : `(171) 555-3373`
}));
this .push(new CustomersDataItem(
{
ID : `ERNSH` ,
CompanyName : `Ernst Handel` ,
ContactName : `Roland Mendel` ,
ContactTitle : `Sales Manager` ,
Address : `Kirchgasse 6` ,
City : `Graz` ,
Region : `South` ,
PostalCode : `8010` ,
Country : `Austria` ,
Phone : `7675-3425` ,
Fax : `7675-3426`
}));
this .push(new CustomersDataItem(
{
ID : `FAMIA` ,
CompanyName : `Familia Arquibaldo` ,
ContactName : `Aria Cruz` ,
ContactTitle : `Marketing Assistant` ,
Address : `Rua Orós, 92` ,
City : `Sao Paulo` ,
Region : `SP` ,
PostalCode : `05442-030` ,
Country : `Brazil` ,
Phone : `(11) 555-9857` ,
Fax : `(5) 555-3745`
}));
this .push(new CustomersDataItem(
{
ID : `FISSA` ,
CompanyName : `FISSA Fabrica Inter. Salchichas S.A.` ,
ContactName : `Diego Roel` ,
ContactTitle : `Accounting Manager` ,
Address : `C/ Moralzarzal, 86` ,
City : `Madrid` ,
Region : `East` ,
PostalCode : `28034` ,
Country : `Spain` ,
Phone : `(91) 555 94 44` ,
Fax : `(91) 555 55 93`
}));
this .push(new CustomersDataItem(
{
ID : `FOLIG` ,
CompanyName : `Folies gourmandes` ,
ContactName : `Martine Rancé` ,
ContactTitle : `Assistant Sales Agent` ,
Address : `184, chaussée de Tournai` ,
City : `Lille` ,
Region : `South` ,
PostalCode : `59000` ,
Country : `France` ,
Phone : `20.16.10.16` ,
Fax : `20.16.10.17`
}));
this .push(new CustomersDataItem(
{
ID : `FOLKO` ,
CompanyName : `Folk och fä HB` ,
ContactName : `Maria Larsson` ,
ContactTitle : `Owner` ,
Address : `Åkergatan 24` ,
City : `Bräcke` ,
Region : `East` ,
PostalCode : `S-844 67` ,
Country : `Sweden` ,
Phone : `0695-34 67 21` ,
Fax : `0695 33-4455`
}));
this .push(new CustomersDataItem(
{
ID : `FRANK` ,
CompanyName : `Frankenversand` ,
ContactName : `Peter Franken` ,
ContactTitle : `Marketing Manager` ,
Address : `Berliner Platz 43` ,
City : `München` ,
Region : `East` ,
PostalCode : `80805` ,
Country : `Germany` ,
Phone : `089-0877310` ,
Fax : `089-0877451`
}));
this .push(new CustomersDataItem(
{
ID : `FRANR` ,
CompanyName : `France restauration` ,
ContactName : `Carine Schmitt` ,
ContactTitle : `Marketing Manager` ,
Address : `54, rue Royale` ,
City : `Nantes` ,
Region : `South` ,
PostalCode : `44000` ,
Country : `France` ,
Phone : `40.32.21.21` ,
Fax : `40.32.21.20`
}));
this .push(new CustomersDataItem(
{
ID : `FRANS` ,
CompanyName : `Franchi S.p.A.` ,
ContactName : `Paolo Accorti` ,
ContactTitle : `Sales Representative` ,
Address : `Via Monte Bianco 34` ,
City : `Torino` ,
Region : `East` ,
PostalCode : `10100` ,
Country : `Italy` ,
Phone : `011-4988260` ,
Fax : `011-4988261`
}));
}
}
ts コピー import React , { useEffect, useRef, useState } from 'react' ;
import ReactDOM from 'react-dom/client' ;
import {
FilterMode,
IgrActionStrip,
IgrGrid,
IgrColumn,
IgrGridModule,
IgrGridPinningActions,
IgrGridToolbar,
IgrGridToolbarActions,
IgrGridToolbarHiding,
IgrGridToolbarPinning,
IgrPaginator,
IgrGridState,
IgrGridStateOptions,
GridSelectionMode
} from "@infragistics/igniteui-react-grids" ;
import { IgrButton, IgrCheckbox, IgrCheckboxModule, IgrCheckboxChangeEventArgs, IgrIcon, IgrIconModule } from "@infragistics/igniteui-react" ;
import { registerIconFromText } from 'igniteui-webcomponents' ;
import { CustomersData } from './CustomersData' ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
import './index.css' ;
const mods : any [] = [
IgrGridModule,
IgrIconModule,
IgrCheckboxModule
];
mods.forEach((m) => m.register());
const restoreIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>' ;
const saveIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM6 6h9v4H6z"/></svg>' ;
const clearIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>' ;
const forwardIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>' ;
const deleteIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>' ;
const refreshIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>' ;
export default function App() {
const gridData = new CustomersData();
const [allOptions , setAllOptions ] = useState(true );
const [options , setOption ] = useState<IgrGridStateOptions > ({
cellSelection: true ,
rowSelection: true ,
filtering: true ,
advancedFiltering: true ,
paging: true ,
sorting: true ,
groupBy: true ,
columns: true ,
expansion: true ,
rowPinning: true ,
columnSelection: true
});
let grid : IgrGrid ;
function gridRef (ref : IgrGrid ) {
grid = ref;
}
let paginatorRef = useRef<IgrPaginator > (null );
const stateKey = "grid-state" ;
let gridStateRef = useRef<IgrGridState > (null );
useEffect(() => {
registerIconFromText("restore" , restoreIcon, "material" );
registerIconFromText("save" , saveIcon, "material" );
registerIconFromText("clear" , clearIcon, "material" );
registerIconFromText("forward" , forwardIcon, "material" );
registerIconFromText("delete" , deleteIcon, "material" );
registerIconFromText("refresh" , refreshIcon, "material" );
restoreGridState();
window.addEventListener("beforeunload" , saveGridState);
return () => {
window.removeEventListener("beforeunload" , saveGridState);
};
}, []);
function saveGridState() {
const state = gridStateRef.current.getStateAsString([]);
window.localStorage.setItem(stateKey, state);
}
function restoreGridState() {
const state = window.localStorage.getItem(stateKey);
if (state) {
gridStateRef.current.applyStateFromString(state, []);
}
}
function resetGridState() {
paginatorRef.current.page = 0 ;
paginatorRef.current.perPage = 15 ;
paginatorRef.current.totalRecords = gridData.length;
grid.clearFilter(null );
grid.sortingExpressions = [];
grid.groupingExpressions = [];
grid.deselectAllColumns();
grid.deselectAllRows();
grid.clearCellSelection();
}
function onChange(s: IgrCheckbox, e: IgrCheckboxChangeEventArgs) {
if (s.name === 'allFeatures' ) {
const bEnabled = e.detail.checked;
setOption({
cellSelection: bEnabled,
rowSelection: bEnabled,
filtering: bEnabled,
advancedFiltering: bEnabled,
paging: bEnabled,
sorting: bEnabled,
groupBy: bEnabled,
columns: bEnabled,
expansion: bEnabled,
rowPinning: bEnabled,
columnSelection: bEnabled
});
for (const key of Object .keys (options )) {
gridStateRef .current .options [key ] = bEnabled;
}
} else {
gridStateRef.current.options[s.name] = e.detail.checked;
}
}
function leavePage() {
saveGridState();
window.location.replace("./grids/grid/state-persistence-about" );
}
function clearStorage() {
window.localStorage.removeItem(stateKey);
}
function reloadPage() {
window.location.reload();
}
return (
<div className ="vertical sampleContainer" >
<div className ="container horizontal" >
<IgrButton clicked ={restoreGridState} >
<IgrIcon name ="restore" collection ="material" > </IgrIcon >
<span > Restore</span >
</IgrButton >
<IgrButton clicked ={saveGridState} >
<IgrIcon name ="save" collection ="material" > </IgrIcon >
<span > Save</span >
</IgrButton >
<IgrButton clicked ={resetGridState} >
<IgrIcon name ="clear" collection ="material" > </IgrIcon >
<span > Reset</span >
</IgrButton >
<IgrButton clicked ={leavePage} >
<IgrIcon name ="forward" collection ="material" > </IgrIcon >
<span > Leave</span >
</IgrButton >
<IgrButton clicked ={clearStorage} >
<IgrIcon name ="delete" collection ="material" > </IgrIcon >
<span > Clear</span >
</IgrButton >
<IgrButton clicked ={reloadPage} >
<IgrIcon name ="refresh" collection ="material" > </IgrIcon >
<span > Reload</span >
</IgrButton >
</div >
<div className ="container horizontal" >
<ul >
<li > Clicking the SAVE button or leaving the page <a id ="leaveLink" href ="./grids/grid/state-persistence-about" > <strong > here</strong > </a > will save grid state to localStorage.</li >
<li > Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.</li >
<li > Select/Deselect checkboxes to control saving / restoring feature state.</li >
</ul >
</div >
<div className ="container horizontal" >
<IgrCheckbox name ="allFeatures" change ={onChange} checked ={allOptions} > <span > All Features</span > </IgrCheckbox >
<IgrCheckbox name ="advancedFiltering" change ={onChange} checked ={options.advancedFiltering} > <span > Adv. Filtering</span > </IgrCheckbox >
<IgrCheckbox name ="cellSelection" change ={onChange} checked ={options.cellSelection} > <span > Cell Selection</span > </IgrCheckbox >
<IgrCheckbox name ="columns" change ={onChange} checked ={options.columns} > <span > Columns</span > </IgrCheckbox >
<IgrCheckbox name ="columnSelection" change ={onChange} checked ={options.columnSelection} > <span > Col Selection</span > </IgrCheckbox >
<IgrCheckbox name ="expansion" change ={onChange} checked ={options.expansion} > <span > Expansion</span > </IgrCheckbox >
<IgrCheckbox name ="filtering" change ={onChange} checked ={options.filtering} > <span > Filtering </span > </IgrCheckbox >
<IgrCheckbox name ="paging" change ={onChange} checked ={options.paging} > <span > Paging</span > </IgrCheckbox >
<IgrCheckbox name ="rowPinning" change ={onChange} checked ={options.rowPinning} > <span > Row Pinning</span > </IgrCheckbox >
<IgrCheckbox name ="rowSelection" change ={onChange} checked ={options.rowSelection} > <span > Row Selection</span > </IgrCheckbox >
<IgrCheckbox name ="sorting" change ={onChange} checked ={options.sorting} > <span > Sorting</span > </IgrCheckbox >
<IgrCheckbox name ="groupBy" change ={onChange} checked ={options.groupBy} > <span > Group By</span > </IgrCheckbox >
</div >
<IgrGrid ref ={gridRef} data ={gridData} primaryKey ="ID" width ="95%" height ="500px" autoGenerate ="false" moving ="true" allowFiltering ="true"
allowAdvancedFiltering ="true" filterMode ={FilterMode.ExcelStyleFilter} columnSelection ={GridSelectionMode.Multiple} rowSelection ={GridSelectionMode.Multiple} >
<IgrGridState ref ={gridStateRef} > </IgrGridState >
<IgrGridToolbar >
<IgrGridToolbarActions >
<IgrGridToolbarHiding > </IgrGridToolbarHiding >
<IgrGridToolbarPinning > </IgrGridToolbarPinning >
</IgrGridToolbarActions >
</IgrGridToolbar >
<IgrActionStrip >
<IgrGridPinningActions > </IgrGridPinningActions >
</IgrActionStrip >
<IgrPaginator ref ={paginatorRef} > </IgrPaginator >
<IgrColumn field ="ID" width ="100px" sortable ="true" filterable ="true" pinned ="true" > </IgrColumn >
<IgrColumn field ="ContactName" header ="Contact Name" minWidth ="200px" sortable ="true" filterable ="true" pinned ="true" > </IgrColumn >
<IgrColumn field ="ContactTitle" header ="Contact Title" minWidth ="200px" sortable ="true" filterable ="true" groupable ="true" > </IgrColumn >
<IgrColumn field ="CompanyName" header ="Company Name" minWidth ="200px" sortable ="true" filterable ="true" groupable ="true" > </IgrColumn >
<IgrColumn field ="Country" minWidth ="200px" sortable ="true" filterable ="true" groupable ="true" > </IgrColumn >
<IgrColumn field ="City" minWidth ="200px" sortable ="true" filterable ="true" groupable ="true" > </IgrColumn >
<IgrColumn field ="Address" minWidth ="200px" sortable ="true" filterable ="true" groupable ="true" > </IgrColumn >
<IgrColumn field ="PostalCode" header ="Postal Code" minWidth ="200px" sortable ="true" filterable ="true" groupable ="true" > </IgrColumn >
</IgrGrid >
</div >
);
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<App /> );
tsx コピー
.horizontal {
gap: 10px ;
flex-basis : fit-content;
flex-wrap : wrap;
}
.sampleContainer {
padding : 0.5rem
}
css コピー
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Limitaciones
Recursos adicionales