The columns are automatically generated when
columns declaration is empty or undefined while initializing the grid.
All the columns in the dataSource are bound as grid columns.
import { GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
const data = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }
];
export default class App extends React.Component {
render() {
return <GridComponent dataSource={data}/>;
}
}import { GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
const data: object[] = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }];
export default class App extends React.Component<{}, {}>{
public render() {
return <GridComponent dataSource={data}/>
}
}Primary key can be defined in the declaration of column object of the grid. When we didn’t declare the columns, the grid will generate the columns automatically. For these auto generated columns, you can set isPrimaryKey column property as true by using the following ways,
If Primary key “column index” is known then refer the following code example
import { Edit, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
const data = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }
];
export default class App extends React.Component {
constructor() {
super(...arguments);
this.editOptions = {
allowAdding: true, allowDeleting: true, allowEditing: true
};
}
dataBound() {
if (this.grid) {
const column = this.grid.columns[0];
column.isPrimaryKey = true;
}
}
render() {
this.dataBound = this.dataBound.bind(this);
return <GridComponent dataSource={data} dataBound={this.dataBound} editSettings={this.editOptions} ref={g => this.grid = g}>
<Inject services={[Edit]}/>
</GridComponent>;
}
}import { ColumnModel, Edit, EditSettingsModel, Grid, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
const data: object[] = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }];
export default class App extends React.Component<{}, {}>{
public grid: Grid | null;
public editOptions: EditSettingsModel = {
allowAdding: true, allowDeleting: true, allowEditing: true
};
public dataBound(){
if (this.grid) {
const column: ColumnModel = this.grid.columns[0] as ColumnModel;
column.isPrimaryKey = true;
}
}
public render() {
this.dataBound = this.dataBound.bind(this);
return <GridComponent dataSource={data} dataBound= { this.dataBound }
editSettings={this.editOptions} ref={g => this.grid = g}>
<Inject services={[Edit]} />
</GridComponent>
}
}If Primary key column and its field is known then primary key for the respective column can be defined as follows.
const column: ColumnModel = this.grid.getColumnByField('OrderID');
column.isPrimaryKey = true;You can set column options such as format, width to the auto generated columns by using dataBound event of the grid.
In the below example, width is set for OrderID column, date type is set for OrderDate column and numeric type is set for Freight column.
import { GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
const data = [
{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.3800, OrderDate: "1996-07-02T00:00:00.000Z" },
{ OrderID: 10249, CustomerID: 'TOMSP', Freight: 32.3800, OrderDate: "1996-07-19T00:00:00.000Z" },
{ OrderID: 10250, CustomerID: 'HANAR', Freight: 32.3800, OrderDate: "1996-07-22T00:00:00.000Z" }
];
export default class App extends React.Component {
constructor() {
super(...arguments);
this.isInitial = false;
}
load() {
this.isInitial = true;
}
dataBound() {
if (this.grid && this.isInitial) {
this.isInitial = false;
const columns = this.grid.columns;
columns[0].width = 120;
for (const col of columns) {
if (col.field === "OrderDate") {
col.type = "date";
}
if (col.type === "date") {
col.format = { type: "date", format: "dd/MM/yyyy" };
}
if (col.field === 'Freight') {
col.format = "P2";
}
}
this.grid.refreshColumns();
}
}
render() {
this.dataBound = this.dataBound.bind(this);
this.load = this.load.bind(this);
return <GridComponent dataSource={data} dataBound={this.dataBound} load={this.load} ref={g => this.grid = g}/>;
}
}import { ColumnModel, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
const data: object = [
{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.3800, OrderDate: "1996-07-02T00:00:00.000Z" },
{ OrderID: 10249, CustomerID: 'TOMSP', Freight: 32.3800, OrderDate: "1996-07-19T00:00:00.000Z" },
{ OrderID: 10250, CustomerID: 'HANAR', Freight: 32.3800, OrderDate: "1996-07-22T00:00:00.000Z" }];
export default class App extends React.Component<{}, {}>{
isInitial = false;
public grid: Grid | null;
public load() {
this.isInitial=true;
}
public dataBound() {
if (this.grid && this.isInitial) {
this.isInitial=false;
const columns: ColumnModel[] = this.grid.columns as ColumnModel[];
columns[0].width = 120;
for (const col of columns) {
if(col.field === "OrderDate"){
col.type="date";
}
if (col.type === "date") {
col.format = { type: "date", format: "dd/MM/yyyy" };
}
if (col.field === 'Freight') {
col.format = "P2";
}
}
this.grid.refreshColumns();
}
}
public render() {
this.dataBound = this.dataBound.bind(this);
this.load = this.load.bind(this);
return <GridComponent dataSource={data} dataBound= { this.dataBound} load= { this.load}
ref={g => this.grid = g}/>
}
}