How to edit particular cells

[ND]

I was trying to render this table. Please refer this for image -https://drive.google.com/file/d/1DqsJzqLb32DCQJUFfkjeklprsor9y4Bh/view?usp=sharing

I need template function only on field progress and Name. I will be reusing same table for multiple data fields, as data is dynamic.

I was tried to access in different ways 1) I have passed template function , but when I do console for props - i can see the particular object but I was unable to access fields. and 2) In grid component I tried use some conditions but didn't worked. Please provide answer using React Hooks.

In case of style why does table not taking height inherit?

const template = (props) => {

console.log(props);

switch (props.field) {

case "Name":

return (

<div style={{ display: "flex" }}>

<img src={props.image} />

<div>

<p>Danielp>

<p>Developerp>

div>

div>

);

case "default":

return <div>div>;

}

};

<GridComponent dataSource={data} height={"inherit"} allowPaging={true}>

<ColumnsDirective>

{fields.map((item) => {

return (

<>

{item === "Name" ? (

<ColumnDirective

headerText="Name image"

template={template}

/>

) : item !== "image" ? (

<ColumnDirective key={item} field={item} />

) : (

""

)}

);

})}

ColumnsDirective>

GridComponent>

[Sujith Kumar Rajkumar]

Hi ND, 

 

Greetings from Syncfusion support. 

 

Please find the response for your queries below, 

 

Query – 1: “I have passed template function , but when I do console for props - i can see the particular object but I was unable to access fields.” 

 

Based on the provided information we could understand that your requirement is to access the column field inside the template. You can achieve this by accessing the field as demonstrated in the below code snippet, 

 

const template = (props) => { 

    var colField = props.column.field; 

    var value = props.OrderID; 

    return ( 

      <div> 

        {colField} - {value} 

      </div> 

    ); 

}; 

 

Query – 2: “In grid component I tried use some conditions but didn't worked.” 

 

From this query we suspect that you are facing problem while trying to render the Grid column directive using conditions. If so, you can achieve the same by using the below code snippet, 

 

<GridComponent dataSource={data} height="350"> 

    <ColumnsDirective> 

      {fields.map((item) => { 

        return item.field === "OrderID" ? ( 

           <ColumnDirective field={item.field} template={template} /> 

        ) : ( 

           <ColumnDirective field={item.field} headerText={item.headerText} /> 

        ); 

       })} 

    </ColumnsDirective> 

</GridComponent> 

 

We have prepared a sample based on the above queries for your reference. You can find it below, 

 

Sample: https://codesandbox.io/s/142135-hooks-functional-component-forked-63cdv?file=/src/index.js 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R