How i can add dynamic columns for each row in react GridComponnet

Question

Hello Team,I have an object like this : datasource = [{name:'test',listItems:[{...},{...} ..]I want to define my gridComponent columns like this: name,[listItems]can somene help me please

Joseph Christ Nithin Issack · Answer

Hi Saidani Yosra,  Thanks for your update.  By default, the EJ2
Grid column only supports number, string, date, dateTime, Boolean, checkbox
type values, and which does not supports array type value. Refer to the below
documentation.columnType: https://ej2.syncfusion.com/documentation/api/grid/columnType/ We can show an array of
values in the Grid column using columnTemplate/valueAccessor features. But,
this is used only for the display purposes. We cannot perform any Grid actions
like Filtering, Sorting, column-spanning, Searching, Grouping, etc., on the
array type column. This is the behavior of EJ2 Grid.So, in your case we suggest
the best way is to use comma delimited string and parse it back in the back
end.Please get back to us for
further details.Regards,Joseph I.

saidaniyosra · Answer

thank you for your reply

but my question is how i can display columns based on list for each row

example of the object returned by the api:

{ name,

[

{'repaired', ...},

{'Not repaired',..}

{'NFF',..}

{'Product conform,..}

......

] }

my final Grid be like this

Attachment: captures_9fb2af33.rar

Pavithra Subramaniyam · Answer

Hi saidaniyosra,In EJ2 Grid, we can only show the nested objects field if the
records have a single object like {name:'test',listItems:{...}} But in
your dataSource, the “listItems” has an array of objects which is not supported in
our Grid component with default column settings. However, you can display the
values using columnTemplate/valueAccessor features. But as we said in our
previous update, this is for display purposes only, we cannot do any Grid
actions like Filtering, Sorting, column-spanning, Searching, Grouping, etc., on
this column. This is the behavior of EJ2 Grid.Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/column-template/#using-condition-template  https://ej2.syncfusion.com/react/documentation/grid/columns/columns/#valueaccessorsample                : https://stackblitz.com/edit/react-pupj5j?file=index.jsPlease get back to us for further details.Regards,Pavithra S