React Tree Grid Toolbar
La barra de herramientas Ignite UI for React es un contenedor para las operaciones de UI en React Tree Grid. La barra de herramientas React se encuentra en la parte superior del componente React, es decir, IgrTreeGrid
, y coincide con su tamaño horizontal. El contenedor de la barra de herramientas puede albergar cualquier contenido personalizado o conjunto de controles de UI predefinidos. El conjunto predeterminado para React Tree Grid incluye:
- Ocultación de columna
- Fijación de columnas
- Exportación de Excel
- Filtrado avanzado
La barra de herramientas y los componentes de UI predefinidos admiten eventos React y exponen API para desarrolladores.
Ejemplo de cuadrícula de barra de herramientas React
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrAvatarModule } from "@infragistics/igniteui-react";
import { IgrTreeGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarAdvancedFiltering, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarExporter, IgrColumn } from "@infragistics/igniteui-react-grids";
import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { IgrAvatar } from "@infragistics/igniteui-react";
import { IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrTreeGridModule,
IgrAvatarModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this.treeGrid = r;
this.setState({});
}
private column1: IgrColumn
constructor(props: any) {
super(props);
this.treeGridRef = this.treeGridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrTreeGrid
autoGenerate="false"
ref={this.treeGridRef}
id="treeGrid"
data={this.employeesFlatAvatars}
primaryKey="ID"
foreignKey="ParentID"
allowAdvancedFiltering="true">
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarAdvancedFiltering
>
</IgrGridToolbarAdvancedFiltering>
<IgrGridToolbarHiding
>
</IgrGridToolbarHiding>
<IgrGridToolbarPinning
>
</IgrGridToolbarPinning>
<IgrGridToolbarExporter
>
</IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
field="Name"
dataType="String"
bodyTemplate={this.webTreeGridAvatarCellTemplate}
name="column1">
</IgrColumn>
<IgrColumn
field="Title"
dataType="String">
</IgrColumn>
<IgrColumn
field="ID"
dataType="Number">
</IgrColumn>
<IgrColumn
field="Age"
dataType="Number">
</IgrColumn>
<IgrColumn
field="HireDate"
dataType="Date">
</IgrColumn>
</IgrTreeGrid>
</div>
</div>
);
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
return (
<div className="cell__inner">
<IgrAvatar shape='circle' src={props.dataContext.cell.row.data.Avatar}>
</IgrAvatar>
<span className="name">{props.dataContext.cell.value}</span>
</div>
);
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
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.
Las Actions
predefinidas y los componentes de la interfaz de usuario title
se agregan dentro de IgrGridToolbar
y todo esto es necesario para tener una barra de herramientas que proporcione interacciones predeterminadas con las funciones de cuadrícula correspondientes:
<IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate="true">
<IgrGridToolbar key="toolbar">
<IgrGridToolbarTitle key="toolbarTitle">
<span key="toolbarTitleText">Tree Grid Toolbar<span>
</IgrGridToolbarTitle>
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarAdvancedFiltering key="advancedFiltering"></IgrGridToolbarAdvancedFiltering>
<IgrGridToolbarPinning key="pinning"></IgrGridToolbarPinning>
<IgrGridToolbarHiding key="hiding"></IgrGridToolbarHiding>
<IgrGridToolbarExporter key="export"></IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
</IgrTreeGrid>
tsx
Como se ve en el fragmento de código anterior, los componentes predefinidos de la interfaz de usuario de acciones están incluidos en el contenedor IgrGridToolbarActions. De esta manera, el título de la barra de herramientas se alinea a la izquierda de la barra de herramientas y las acciones se alinean a la derecha de la barra de herramientas.
Por supuesto, cada una de estas UI se puede agregar de forma independiente entre sí o puede que no se agreguen en absoluto. De esta manera, el contenedor de la barra de herramientas quedará vacío:
<IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate="true">
<IgrGridToolbar key="toolbar">
</IgrGridToolbar>
</IgrTreeGrid>
tsx
Para obtener una visión completa de cada uno de los componentes predeterminados de la interfaz de usuario, continúe leyendo la sección Funciones a continuación.
Características
La barra de herramientas es excelente para separar la lógica/interacciones, lo que afecta a la cuadrícula en su conjunto.
Como se muestra arriba, se puede configurar para proporcionar componentes predeterminados para controlar, ocultar columnas, fijar columnas, filtrar avanzado y exportar datos desde la cuadrícula.
Estas funciones se pueden habilitar de forma independiente una de otra siguiendo un patrón similar al componente de tarjeta de la suite Ignite UI for React.
A continuación se enumeran las características principales de la barra de herramientas con código de ejemplo para cada una de ellas.
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport React, { useRef } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import {
IgrCellTemplateContext,
IgrGridToolbar,
IgrGridToolbarActions,
IgrGridToolbarAdvancedFiltering,
IgrGridToolbarExporter,
IgrGridToolbarHiding,
IgrGridToolbarPinning,
IgrGridToolbarTitle,
IgrTreeGrid,
IgrTreeGridModule,
} from "@infragistics/igniteui-react-grids";
import { IgrColumn } from "@infragistics/igniteui-react-grids";
import { IgrAvatar, IgrAvatarModule, IgrComponentValueChangedEventArgs, IgrInput, IgrInputBase, IgrInputModule, IgrSwitch, IgrSwitchModule } from "@infragistics/igniteui-react";
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import { EmployeesFlatAvatars } from "./EmployeesFlatAvatars";
IgrTreeGridModule.register();
IgrAvatarModule.register();
IgrSwitchModule.register();
IgrInputModule.register();
export default function App() {
const employeesData = new EmployeesFlatAvatars();
const treeGridRef = useRef<IgrTreeGrid>(null);
function webTreeGridAvatarCellTemplate(props: {
dataContext: IgrCellTemplateContext;
}) {
return (
<div className="cell__inner">
<IgrAvatar
shape="circle"
src={props.dataContext.cell.row.data.Avatar}
></IgrAvatar>
<span className="name">{props.dataContext.cell.value}</span>
</div>
);
}
const spanRef = useRef(null);
const changeTitle = (input: IgrInputBase, event: IgrComponentValueChangedEventArgs) => {
spanRef.current.innerText = event.detail;
}
const enableFiltering = (switchComponent: IgrSwitch) => {
const toolbarFiltering = document.getElementsByTagName('igc-grid-toolbar-advanced-filtering')[0] as any;
toolbarFiltering.hidden = !switchComponent.checked;
};
const enableHiding = (switchComponent: IgrSwitch) => {
const toolbarHiding = document.getElementsByTagName('igc-grid-toolbar-hiding')[0] as any;
toolbarHiding.hidden = !switchComponent.checked;
};
const enablePinning = (switchComponent: IgrSwitch) => {
const toolbarPinning = document.getElementsByTagName('igc-grid-toolbar-pinning')[0] as any;
toolbarPinning.hidden = !switchComponent.checked;
};
const enableExport = (switchComponent: IgrSwitch) => {
const toolbarExporter = document.getElementsByTagName('igc-grid-toolbar-exporter')[0] as any;
toolbarExporter.hidden = !switchComponent.checked;
};
return (
<div className="container sample ig-typography">
<div className="container fill">
<div className="control_panel">
<IgrInput inputOcurred={changeTitle} type="text" label="Toolbar title" value="Tree grid toolbar" />
<IgrSwitch change={enableFiltering} checked>
<span key="filtering">Advanced Filtering</span>
</IgrSwitch>
<IgrSwitch change={enableHiding} checked>
<span key="hiding">Column hiding</span>
</IgrSwitch>
<IgrSwitch change={enablePinning} checked>
<span key="pinning">Column pinning</span>
</IgrSwitch>
<IgrSwitch change={enableExport} checked>
<span key="exporting">Exporting</span>
</IgrSwitch>
</div>
<IgrTreeGrid
autoGenerate="false"
ref={treeGridRef}
data={employeesData}
primaryKey="ID"
foreignKey="ParentID"
>
<IgrGridToolbar key="toolbar">
<IgrGridToolbarTitle key="toolbarTitle">
<span key="toolbarTitleText" ref={spanRef}>Tree grid toolbar</span>
</IgrGridToolbarTitle>
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarAdvancedFiltering key="toolbarFiltering"></IgrGridToolbarAdvancedFiltering>
<IgrGridToolbarHiding key="toolbarHiding"></IgrGridToolbarHiding>
<IgrGridToolbarPinning key="toolbarPinning"></IgrGridToolbarPinning>
<IgrGridToolbarExporter key="toolbarExporter"></IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
field="Name"
dataType="string"
bodyTemplate={webTreeGridAvatarCellTemplate}
></IgrColumn>
<IgrColumn field="Title" dataType="string"></IgrColumn>
<IgrColumn field="ID" dataType="number"></IgrColumn>
<IgrColumn field="Age" dataType="number"></IgrColumn>
<IgrColumn field="HireDate" dataType="date"></IgrColumn>
</IgrTreeGrid>
</div>
</div>
);
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
.control_panel {
width: 700px;
margin-bottom: 10px;
}
css
Título
Establecer un título para la barra de herramientas en su cuadrícula se logra utilizando IgrGridToolbarTitle
.
Los usuarios pueden proporcionar cualquier cosa, desde texto simple hasta plantillas más complejas.
<IgrGridToolbar key="toolbar">
<IgrGridToolbarTitle key="toolbarTitle">
<span key="toolbarTitleText">Grid toolbar title<span>
</IgrGridToolbarTitle>
</IgrGridToolbar>
tsx
Comportamiento
IgrGridToolbarActions
es donde los usuarios pueden colocar acciones/interacciones en relación con la cuadrícula principal. Al igual que con la parte del título de la barra de herramientas, los usuarios pueden proporcionar cualquier cosa dentro de esa parte de la plantilla, incluidos los componentes de interacción predeterminados de la barra de herramientas.
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
</IgrGridToolbarActions>
</IgrGridToolbar>
tsx
Fijación de columnas
El componente IgrGridToolbarPinning
proporciona la interfaz de usuario predeterminada para interactuar con la fijación de columnas en la cuadrícula.
El componente está configurado para funcionar desde el primer momento con la cuadrícula principal que contiene la barra de herramientas, así como varias propiedades de entrada para personalizar la interfaz de usuario, como el título del componente, el marcador de posición para la entrada del componente y la altura del menú desplegable.
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarPinning key="pinning" title="Grid pinned columns" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarPinning>
</IgrGridToolbarActions>
</IgrGridToolbar>
tsx
Ocultación de columnas
IgrGridToolbarHiding
proporciona la interfaz de usuario predeterminada para interactuar con la ocultación de columnas. Expone las mismas propiedades de entrada para personalizar la interfaz de usuario, como el título del componente, el marcador de posición para la entrada del componente y la altura del menú desplegable.
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarHiding key="hiding" title="Grid column hiding" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
tsx
Filtrado avanzado
El componente Filtrado avanzado de la barra de herramientas proporciona la interfaz de usuario predeterminada para la función Filtrado avanzado. El componente expone una forma de cambiar el texto predeterminado del botón.
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarAdvancedFiltering key="advancedFiltering"></IgrGridToolbarAdvancedFiltering>
</IgrGridToolbarActions>
</IgrGridToolbar>
tsx
Exportación de datos
Al igual que con el resto de las acciones de la barra de herramientas, la exportación se realiza a través de IgrGridToolbarExporter
listo para usar.
El componente exportador de la barra de herramientas expone varias propiedades de entrada para personalizar tanto la interfaz de usuario como la experiencia de exportación.
Estos van desde cambiar el texto que se muestra hasta habilitar/deshabilitar opciones en el menú desplegable y personalizar el nombre del archivo generado. Para obtener una referencia completa, consulte la documentación de la API de ToolbarExporter
.
A continuación se muestra un fragmento que muestra algunas de las opciones que se pueden personalizar a través de la plantilla React:
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarExporter key="export" exportCSV="true" exportExcel="true" filename="exported_data"></IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
tsx
Además de cambiar el nombre del archivo exportado, el usuario puede configurar aún más las opciones del exportador esperando el evento ToolbarExporting
y personalizando la entrada de opciones en las propiedades del evento.
De forma predeterminada, al exportar a CSV, el exportador exporta utilizando un separador de coma y utiliza una extensión '.csv' para el archivo de salida. Puede personalizar estos parámetros de exportación suscribiéndose a eventos del exportador o cambiando los valores de los campos de opciones del exportador. También puede cancelar el proceso de exportación configurando el campo de cancelación de los argumentos del evento en verdadero.
El siguiente fragmento de código demuestra la suscripción al evento de exportación de la barra de herramientas y la configuración de las opciones del exportador:
function configureExport(evt: IgrGridToolbarExportEventArgs) {
const args = evt.detail;
const options: IgrExporterOptionsBase = args.options;
options.fileName = `Report_${new Date().toDateString()}`;
(args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
columnArgs.cancel = columnArgs.header === 'Name';
});
}
<IgrTreeGrid toolbarExporting={configureExport}>
</IgrTreeGrid>
tsx
El siguiente ejemplo demuestra cómo personalizar los archivos exportados:
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrAvatarModule } from "@infragistics/igniteui-react";
import { IgrTreeGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrColumn } from "@infragistics/igniteui-react-grids";
import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { IgrExporterOptionsBase, IgrGridToolbarExportEventArgs } from "@infragistics/igniteui-react-grids";
import { IgrAvatar } from "@infragistics/igniteui-react";
import { IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrTreeGridModule,
IgrAvatarModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this.treeGrid = r;
this.setState({});
}
private column1: IgrColumn
constructor(props: any) {
super(props);
this.treeGridRef = this.treeGridRef.bind(this);
this.webTreeGridToolbarExporting = this.webTreeGridToolbarExporting.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrTreeGrid
autoGenerate="false"
ref={this.treeGridRef}
id="treeGrid"
data={this.employeesFlatAvatars}
primaryKey="ID"
foreignKey="ParentID"
toolbarExporting={this.webTreeGridToolbarExporting}>
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarExporter
>
</IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
field="Name"
dataType="String"
bodyTemplate={this.webTreeGridAvatarCellTemplate}
name="column1">
</IgrColumn>
<IgrColumn
field="Title"
dataType="String">
</IgrColumn>
<IgrColumn
field="ID"
dataType="Number">
</IgrColumn>
<IgrColumn
field="Age"
dataType="Number">
</IgrColumn>
<IgrColumn
field="HireDate"
dataType="Date">
</IgrColumn>
</IgrTreeGrid>
</div>
</div>
);
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridToolbarExporting(sender: IgrTreeGrid, evt: IgrGridToolbarExportEventArgs): void {
const args = evt.detail;
const options: IgrExporterOptionsBase = args.options;
if (options) {
options.fileName = `Report_${new Date().toDateString()}`;
(args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
columnArgs.cancel = columnArgs.header === 'Name';
});
}
}
public webTreeGridAvatarCellTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
return (
<div className="cell__inner">
<IgrAvatar shape='circle' src={props.dataContext.cell.row.data.Avatar}>
</IgrAvatar>
<span className="name">{props.dataContext.cell.value}</span>
</div>
);
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
css
Indicador de exportación
Cuando se utiliza el componente exportador de la barra de herramientas predeterminado, cada vez que se realiza una operación de exportación, la barra de herramientas mostrará un indicador de progreso mientras la operación está en curso.
Además, los usuarios pueden configurar la propiedad ShowProgress
la barra de herramientas y utilizarla para sus propias operaciones de larga duración o simplemente como otra forma de indicar una acción que tiene lugar en la cuadrícula.
El ejemplo que se utiliza a continuación tiene una cantidad significativa de datos, a fin de aumentar el tiempo necesario para exportar los datos para que se pueda ver la barra de progreso. Además cuenta con otro botón que simula una operación de larga duración en la red:
export class OrdersTreeDataItem {
public constructor(init: Partial<OrdersTreeDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public Category: string;
public OrderDate: string;
public Units: number;
public UnitPrice: number;
public Price: number;
public Delivered: boolean;
}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OrdersTreeDataItem(
{
ID: 1,
ParentID: -1,
Name: `Order 1`,
Category: ``,
OrderDate: `2010-02-17`,
Units: 1844,
UnitPrice: 3.73,
Price: 6884.38,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chocolate Chip Cookies`,
Category: `Cookies`,
OrderDate: `2010-02-17`,
Units: 834,
UnitPrice: 3.59,
Price: 2994.06,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 102,
ParentID: 1,
Name: `Red Apples`,
Category: `Fruit`,
OrderDate: `2010-02-17`,
Units: 371,
UnitPrice: 3.66,
Price: 1357.86,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 103,
ParentID: 1,
Name: `Butter`,
Category: `Diary`,
OrderDate: `2010-02-17`,
Units: 260,
UnitPrice: 3.45,
Price: 897,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 104,
ParentID: 1,
Name: `Potato Chips`,
Category: `Snack`,
OrderDate: `2010-02-17`,
Units: 118,
UnitPrice: 1.96,
Price: 231.28,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 105,
ParentID: 1,
Name: `Orange Juice`,
Category: `Beverages`,
OrderDate: `2010-02-17`,
Units: 261,
UnitPrice: 5.38,
Price: 1404.18,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 2,
ParentID: -1,
Name: `Order 2`,
Category: ``,
OrderDate: `2022-05-27`,
Units: 1831,
UnitPrice: 8.23,
Price: 15062.77,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 201,
ParentID: 2,
Name: `Frozen Shrimps`,
Category: `Seafood`,
OrderDate: `2022-05-27`,
Units: 120,
UnitPrice: 20.45,
Price: 2454,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 202,
ParentID: 2,
Name: `Ice Tea`,
Category: `Beverages`,
OrderDate: `2022-05-27`,
Units: 840,
UnitPrice: 7,
Price: 5880,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 203,
ParentID: 2,
Name: `Fresh Cheese`,
Category: `Diary`,
OrderDate: `2022-05-27`,
Units: 267,
UnitPrice: 16.55,
Price: 4418.85,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 204,
ParentID: 2,
Name: `Carrots`,
Category: `Vegetables`,
OrderDate: `2022-05-27`,
Units: 360,
UnitPrice: 2.77,
Price: 997.2,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 205,
ParentID: 2,
Name: `Apple Juice`,
Category: `Beverages`,
OrderDate: `2022-05-27`,
Units: 244,
UnitPrice: 5.38,
Price: 1312.72,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 3,
ParentID: -1,
Name: `Order 3`,
Category: ``,
OrderDate: `2022-08-04`,
Units: 1972,
UnitPrice: 3.47,
Price: 6849.18,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 301,
ParentID: 3,
Name: `Skimmed Milk 1L`,
Category: `Diary`,
OrderDate: `2022-08-04`,
Units: 1028,
UnitPrice: 3.56,
Price: 3659.68,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 302,
ParentID: 3,
Name: `Bananas 5 Pack`,
Category: `Fruit`,
OrderDate: `2022-08-04`,
Units: 370,
UnitPrice: 6.36,
Price: 2353.2,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 303,
ParentID: 3,
Name: `Cauliflower`,
Category: `Vegetables`,
OrderDate: `2022-08-04`,
Units: 283,
UnitPrice: 0.95,
Price: 268.85,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 304,
ParentID: 3,
Name: `White Chocolate Cookies`,
Category: `Cookies`,
OrderDate: `2022-08-04`,
Units: 291,
UnitPrice: 1.95,
Price: 567.45,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 4,
ParentID: -1,
Name: `Order 4`,
Category: ``,
OrderDate: `2023-01-04`,
Units: 1065,
UnitPrice: 5.56,
Price: 5923.5,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 401,
ParentID: 4,
Name: `Mini Milk Chocolate Cookie Bites`,
Category: `Cookies`,
OrderDate: `2023-01-04`,
Units: 68,
UnitPrice: 2.25,
Price: 153,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 402,
ParentID: 4,
Name: `Wild Salmon Fillets`,
Category: `Seafood`,
OrderDate: `2023-01-04`,
Units: 320,
UnitPrice: 16.15,
Price: 5168,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 403,
ParentID: 4,
Name: `Diet Lemonade`,
Category: `Beverages`,
OrderDate: `2023-01-04`,
Units: 437,
UnitPrice: 0.5,
Price: 218.5,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 404,
ParentID: 4,
Name: `Potatos`,
Category: `Vegetables`,
OrderDate: `2023-01-04`,
Units: 240,
UnitPrice: 1.6,
Price: 384,
Delivered: true
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport React, { useRef } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import {
IgrGridToolbar,
IgrGridToolbarActions,
IgrGridToolbarExporter,
IgrGridToolbarTitle,
IgrHierarchicalGridModule,
} from "@infragistics/igniteui-react-grids";
import {
IgrTreeGrid,
IgrColumn,
} from "@infragistics/igniteui-react-grids";
import { IgrButton } from "@infragistics/igniteui-react";
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import { OrdersTreeData } from "./OrdersData";
IgrHierarchicalGridModule.register();
export default function App() {
const ordersData = new OrdersTreeData();
const treeGridRef = useRef<IgrTreeGrid>(null);
const toolbarRef = useRef<IgrGridToolbar>(null);
const localData: any[] = [];
for (let i = 0; i < 10000; i += 3) {
for (let c = 0; c < ordersData.length; c++) {
localData.push(ordersData[c]);
}
}
function showProgress() {
toolbarRef.current.showProgress = true;
setTimeout(() => {
toolbarRef.current.showProgress = false;
}, 5000);
}
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrTreeGrid
ref={treeGridRef}
data={localData}
autoGenerate="false"
primaryKey="ID"
foreignKey="ParentID"
height="350px"
>
<IgrGridToolbar ref={toolbarRef} key="toolbar">
<IgrGridToolbarTitle key="toolbarTitle">
<span key="toolbarTitleText">Tree Grid Toolbar</span>
</IgrGridToolbarTitle>
<IgrButton key="btn" clicked={showProgress}>
<span key="simulate">Simulate long running operation</span>
</IgrButton>
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarExporter key="toolbarExporter"></IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn field="ID" header="Order ID"></IgrColumn>
<IgrColumn field="Name" header="Order Product"></IgrColumn>
<IgrColumn field="Category" header="Category"></IgrColumn>
<IgrColumn field="Units" header="Units" dataType="number"></IgrColumn>
<IgrColumn field="UnitPrice" header="Unit Price" dataType="currency"></IgrColumn>
<IgrColumn field="Price" header="Price" dataType="currency"></IgrColumn>
<IgrColumn field="OrderDate" header="Order Date" dataType="date"></IgrColumn>
</IgrTreeGrid>
</div>
</div>
);
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Estilo
Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:
<IgrTreeGrid className="grid"></IgrTreeGrid>
tsx
Luego configure las propiedades CSS relacionadas para esa clase:
.grid {
--ig-grid-toolbar-background-color: #2a2b2f;
--ig-grid-toolbar-title-text-color: #ffcd0f;
--ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css
Manifestación
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrAvatarModule } from "@infragistics/igniteui-react";
import { IgrTreeGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarAdvancedFiltering, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarExporter, IgrColumn } from "@infragistics/igniteui-react-grids";
import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { IgrAvatar } from "@infragistics/igniteui-react";
import { IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrTreeGridModule,
IgrAvatarModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private grid: IgrTreeGrid
private gridRef(r: IgrTreeGrid) {
this.grid = r;
this.setState({});
}
private column1: IgrColumn
constructor(props: any) {
super(props);
this.gridRef = this.gridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrTreeGrid
autoGenerate="false"
ref={this.gridRef}
id="grid"
data={this.employeesFlatAvatars}
primaryKey="ID"
foreignKey="ParentID"
allowAdvancedFiltering="true">
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarAdvancedFiltering
>
</IgrGridToolbarAdvancedFiltering>
<IgrGridToolbarHiding
>
</IgrGridToolbarHiding>
<IgrGridToolbarPinning
>
</IgrGridToolbarPinning>
<IgrGridToolbarExporter
>
</IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
field="Name"
dataType="String"
bodyTemplate={this.webTreeGridAvatarCellTemplate}
name="column1">
</IgrColumn>
<IgrColumn
field="Title"
dataType="String">
</IgrColumn>
<IgrColumn
field="ID"
dataType="Number">
</IgrColumn>
<IgrColumn
field="Age"
dataType="Number">
</IgrColumn>
<IgrColumn
field="HireDate"
dataType="Date">
</IgrColumn>
</IgrTreeGrid>
</div>
</div>
);
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
return (
<div className="cell__inner">
<IgrAvatar shape='circle' src={props.dataContext.cell.row.data.Avatar}>
</IgrAvatar>
<span className="name">{props.dataContext.cell.value}</span>
</div>
);
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
#grid {
--ig-grid-toolbar-background-color: #2a2b2f;
--ig-grid-toolbar-title-text-color: #ffcd0f;
--ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css
Referencias de API
El servicio Grid Toolbar tiene algunas API más para explorar, que se enumeran a continuación.
IgrTreeGrid
Events:ToolbarExporting
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.