Hi,
I am currently facing a challenge with implementing dynamic grid columns with custom cells, along with column lock functionality. I have attempted to address this issue by creating a separate file for the grid configuration, where I define all the column properties and provide template names.
Here is an excerpt from my "gridConfig.tsx" file:
let CommandCell = (props: GridCellProps) => <MyCommandCell {...props} deleteData={deleteData} edit={enterEdit} remove={remove} add={add} discard={discard} update={update} newId={newId} cancel={cancel} editField={editField} />
let CommandCell1 = (props: GridCellProps) => <DropDownConnection {...props} alldata1={dropDownDataConnection} keyField="id" textField="connectionName"/>
const columnDefinitions = [{
field: SELECTED_FIELD,
title: "",
width: "50px",
filterable: false,
headerSelectionValue:
data.findIndex((item) => !selectedState[idGetter(item)]) === -1,
selected: false,
show: true,
},
{
field: "id",
title: "ID",
filter: "numeric",
width: "200px",
template: ColumnMenuCheckboxFilter,
editable: false,
selected: false,
show: false,
},
{
field: "tenantId",
title: "Tenant Id",
filter: "numeric",
width: "200px",
template: ColumnMenuCheckboxFilter,
editable: false,
selected: false,
show: false,
},
{
field: "connectionId",
title: "Connection Id",
filter: "text",
width: "200px",
template: ColumnMenuCheckboxFilter,
editable: false,
cell: CommandCell1,
selected: false,
show: true,
}]
In the "GridComponent.tsx" file, I have utilized the column definitions as follows:
{columnDefinitions.map((column, index) => column.show &&
<Column key={index} field={column.field} title={column.title} width={column?.width} cell= {column.cell}editable={column?.editable} />
)}
<Column title="Action Buttons" cell={CommandCell} width="200px" locked filterable={false} />
The issue I am encountering is related to passing props, as I am unable to include component code directly within the grid configuration. Could you please assist me in finding a solution to this problem?
Thank you very much in advance for your kind support!
I inspected the provided code excerpts, usually, the props are passed to the customCell, this can be seen in the following demo:
https://stackblitz.com/edit/react-p1t1u2?file=app%2Fmain.jsx
It seems that this is the approach that you are using, can you provide a runnable sample with your current implementation, you can use the one above as a starting point, this will help us reproduce the issue locally and find a suitable solution.
Regards,
Filip