how to render a specific field dynamically in Material Table React

Question

HI I am using Material Table of React, what I want to do is generate a label tag for every cell, what I did is:

            <Table
                onChangePage={handleChangePage}
                page={props.currentPage}
                totalCount={props.totalCount}
                options={{
                    paging:true,
                    pageSizeOptions:[10, 15, 25, 50],
                    pageSize: props.rowsPerPage,
                    padding: "dense",
                    search: false,
                    toolbar:false

                }}
                columns={columns.map((tableColumn) =>{
                    return{
                        ...tableColumn,
                        render: (rowData:VulnerabilityData) =>
                            (<label>
                                    {rowData[tableColumn.field]}. <---- error 'undefined'
                            </label>)
                    }
                })}
                data={vulnerabilityDataAct}

            />

In order to get the specific field, I passed in the tableColumn.field in the render, but I got the error TS2538: Type 'undefined' cannot be used as an index type.

I think tableColumn.field is not allowed here, so how do I dynamically pass the tableColumn field and used as an index to render the value???

Edit: columns variables in above code:

const columns: TableColumn<VulnerabilityData>[] = [
    {
        title: 'Due Date',
        field: 'remediation_due_date',
    },
    {
        title: 'Application',
        field: 'primaryApplication'
    },
    {
        title: 'Impact',
        field: 'consequence'
    },
    {
        title: 'Mitigation',
        field: 'solution'
    },
    {
        title: 'CVE Description',
        field: 'cve_urls'
    },
    {
        title: 'Vulnerability Fix',
        field: 'vendor_urls'
    }
// and other 100 columns
];

and the definition of VulnerabilityData

export interface VulnerabilityData {

    primaryApplication: string;
    networkEnvironment: string;
    remediation_due_date: string,
  // ... other fields

}

@Viet thank you for reminding me. columns added – Hongli Bu Aug 13 '21 at 04:00 — Hongli Bu, Aug 13 '21 at 04:00

score 1 · Answer 1 · answered Aug 13 '21 at 03:31

1

The First thing is that you don't have to specify index numbers in the custom column rendering. In custom column rendering Material table provides single rowData for that specific talbe field. This means you're not required to specify index number Just use the rowData.FieldName. You can do it as follows

columns={[    
{ title: "Any Title", render: rowData => rowData.FieldYouWantToDisplay },
]}

answered Aug 13 '21 at 03:31

Abdulhakim Zeinu

3,333
1
30
37

I know we can do this, but what if I have 100 columns and all need `render` – Hongli Bu Aug 13 '21 at 04:01
and I want the `FieldYouWantToDisplay` to be dynamic, not hardcode on every field definition – Hongli Bu Aug 13 '21 at 04:05
If so column is a column it should be rendered under its own column. I don't think there will be a way to render 100 columns under one column. But you can render several rows dynamically. – Abdulhakim Zeinu Aug 13 '21 at 04:58
can't we use `map` or something like that to dynamic render while looping thru columns?? – Hongli Bu Aug 13 '21 at 05:05
I searched over the internet and found this. http://5.9.10.113/64490419/how-to-set-material-table-dynamic-columns-in-react-typescript It shows how to render dynamic column by using `map` – Abdulhakim Zeinu Aug 13 '21 at 05:15

score 1 · Answer 2 · answered Aug 20 '21 at 21:40

Taking a shot at this. It looks like the error you are seeing here may be a typescript compiler error.

See this post: Type 'undefined' cannot be used as index type

If it is a compiler error, you may fix it by explicitly defining the type of tableColumns in your map function. This type could be {field: string}, in order to let the typescript compiler know that tableColumn.Field will not be undefined.

You could also tackle this by setting a type on columns field before it is mapped.

Or you could also use rowData[tableColumns.field!], as in the SO link.

I hope this solves your problem!

how to render a specific field dynamically in Material Table React

2 Answers2