Material-table: How to create Tree Data structure in only one column of Material-Table (Display an array of values in a dropdown list in one cell of the table under a specific column)

[marjanatwork]

Hi,

I am using Material-Table in my React application. I have a column that is supposed to display more than one value , it should display an array of values.
I want to display these values in a dropdown list with select option, in each row of the table , for this specific column.
For example, I have a column named "Areas" and I want to display an array of all areas related to that row of table, just in one cell under the "Areas" column in that row.
It seems that the ParentChild feature in Tree Data in material-table is meant for creating nested rows or indenting the rows , but I need this indentation in on cell under the specific column of the table only, not across the row .
Would you please let me know how I can implement it?

Thank you

[saikatstutorial]

@marjanatwork I think you need this https://material-table.com/#/docs/features/custom-column-rendering

[saikatstutorial]

You need column definition like this

{
    title: "Areas",
    render: rowData => (
        <select>
            {rowData.Areas.map((option, index) => (
                <option value={option} key={"Example_" + index}>
                    {option}
                </option>
            ))}
        </select>
    )
}

[EmmanuelORivera]

Hi, it is possible edit the info inside of the option tag??

[marjanatwork]

@saikatstutorial

Thank you very much Saikat, I could render those arrays through your solution, I appreciate it! but the problem now is that I can not search and filter based on the values of this column. Since I am using lookup for filtering here,I think I need to do mapping between the lookup table indices and the column data, in order to make it searchable. Would you please let me know how can I assign an array of values to a lookup field like 'Areas' field , while the array is not an acceptable datatype for the column in material-table?

Thank you

[saikatstutorial]

Hi, it is possible edit the info inside of the option tag??

@EmmanuelORivera I think best solution would be, have a button (next to select) to open a modal and edit select options

[saikatstutorial]

@saikatstutorial

Thank you very much Saikat, I could render those arrays through your solution, I appreciate it! but the problem now is that I can not search and filter based on the values of this column. Since I am using lookup for filtering here,I think I need to do mapping between the lookup table indices and the column data, in order to make it searchable. Would you please let me know how can I assign an array of values to a lookup field like 'Areas' field , while the array is not an acceptable datatype for the column in material-table?

Thank you

@marjanatwork seems this has to be an enhancement to use lookup as function with rowData

[marjanatwork]

@saikatstutorial
Thank you very much Saikat, I could render those arrays through your solution, I appreciate it! but the problem now is that I can not search and filter based on the values of this column. Since I am using lookup for filtering here,I think I need to do mapping between the lookup table indices and the column data, in order to make it searchable. Would you please let me know how can I assign an array of values to a lookup field like 'Areas' field , while the array is not an acceptable datatype for the column in material-table?
Thank you

@marjanatwork seems this has to be an enhancement to use lookup as function with rowData

@saikatstutorial Would you please give a sample code for this? Thank you

[marjanatwork]

@saikatstutorial Hi,
I am wondering if you have any suggestion for any alternative way for implementing that.
I would appreciate it if you can help me in this regard.

[saikatstutorial]

@marjanatwork you may use customFilterAndSearch at column level to implement own search logic

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[TienNguyen2803]

Hope can help you !

const categories = [{id:1 , name : "tivi" },{id:2 , name : "tủ lạnh" }]
const convertArrayToObject = (array, key) => {
     const initialValue = {};
     return array.reduce((obj, item) => {
       return {
         ...obj,
         [item[key]]: item.name,
       };
     }, initialValue);
};

const lookup = convertArrayToObject(categories, "id"); 
const columns = [
     { title: "Tên Thuơng Hiệu", field: "name" },
     {
        title: "Danh mục",
        field: "categoryId",
        lookup: lookup,
     },
];