I'm using the grid component whose data source is an array of objects with each property is displayed correct. however the property names of object are used as column names despite being explicitly mentioned explicitly.
import React, { useRef, useState } from 'react';
import {
GridComponent, ColumnsDirective, ColumnDirective, Inject,
Resize, Reorder, ColumnChooser,
RowSelectEventArgs,
Toolbar,
RecordDoubleClickEventArgs,
RecordClickEventArgs,
ColumnDragEventArgs,
ResizeArgs,
KeyboardEventArgs
} from '@syncfusion/ej2-react-grids';
import { Pagination } from '@mui/material'
import { ClickEventArgs } from '@syncfusion/ej2-react-buttons';
import { ItemModel } from '@syncfusion/ej2-navigations/src/toolbar/toolbar-model';
import { error, guard, trace } from '../../services/common';
type DataGridPropsType<T> = {
rows: T[],
count: number,
page: number,
size: number,
children?: any,
onSelect?: (data: T) => void,
onAdd?: () => void,
onEdit?: (arg: T) => void,
onDelete?: (arg: T) => void
}
function getToolbarOptions<T>(func: ()=>T, props: DataGridPropsType<T>): (string | ItemModel)[] {
// some code
return toolbarOptions
}
export function DataGrid<T>(props: DataGridPropsType<T>) {
const record = useRef({} as T)
const setCurrent = (arg: T)=> record.current = arg
const getCurrent = () => record.current
const grid = useRef({} as GridComponent | null)
const toolbarOptions = getToolbarOptions(getCurrent, props)
const mod = (props.count??10) % (props.size??10)
const pages = (props.count??10) / (props.size??10) + mod>0?1:0
return (
<>
<GridComponent dataSource={props.rows}
height="400"
gridLines='Both'
allowResizing={true} allowReordering={true} showColumnChooser={true} toolbar={toolbarOptions}
selectedRowIndex={0}
rowSelected={(args: RowSelectEventArgs) => {
const data = args.data as T
setCurrent(data)
props.onSelect?.(data)
}}
recordClick={(args: RecordClickEventArgs)=> {
const data = args.rowData as T
setCurrent(data)
props.onSelect?.(data)
}}
recordDoubleClick={ (args: RecordDoubleClickEventArgs)=>{
const data = args.rowData as T
setCurrent(data)
props.onEdit?.(data)
}}
columnDrop={(arg: ColumnDragEventArgs)=>{
}}
resizeStop={(arg:ResizeArgs)=>{
const col = arg.column
trace(`${col?.field} resized to ${col?.width}`)
}}
keyPressed={(args: KeyboardEventArgs)=>{
switch(args.code){
case 'Delete':
props.onDelete?.(getCurrent())
break
case 'Insert':
props.onAdd?.()
break
case 'Enter':
props.onEdit?.(getCurrent())
break
}
trace( `${args.code}`)
}}
ref={g => grid.current = g} >
<ColumnsDirective>
{props.children}
</ColumnsDirective>
<Inject services={[Toolbar, Resize, Reorder, ColumnChooser]} />
</GridComponent>
<Pagination count={pages} />
</>
)
}
type DataFieldPropsType = {
field: string,
title: string,
width?: number,
alignment?: 'Left' | 'Right' | 'Center' | 'Justify',
visible?: boolean,
order?: number
}
export function DataField(props: DataFieldPropsType) {
const {field, title, width, alignment, visible, order} = props
return (
<ColumnDirective
field={field}
headerTextAlign ='Left'
headerText={title}
allowReordering={true}
allowResizing={true}
width={width??100}
textAlign={alignment??'Left'}
visible={visible ?? false}
index={order}
>
</ColumnDirective>
)
}
