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

}

Can you show columns?

Viet
– Viet

2021-08-13 03:15:26 +00:00
Commented Aug 13, 2021 at 3:15 — Viet
– Viet, Commented Aug 13, 2021 at 3:15
@Viet thank you for reminding me. columns added

Hongli Bu
– Hongli Bu

2021-08-13 04:00:02 +00:00
Commented Aug 13, 2021 at 4:00 — Hongli Bu
– Hongli Bu, Commented Aug 13, 2021 at 4:00

Abdulhakim Zeinu · Accepted Answer · 2021-08-13 03:31:55Z

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, 2021 at 3:31

Abdulhakim Zeinu

3,8712 gold badges37 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hongli Bu Over a year ago

I know we can do this, but what if I have 100 columns and all need render

Hongli Bu Over a year ago

and I want the FieldYouWantToDisplay to be dynamic, not hardcode on every field definition

Abdulhakim Zeinu Over a year ago

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.

Hongli Bu Over a year ago

can't we use map or something like that to dynamic render while looping thru columns??

Abdulhakim Zeinu Over a year ago

I searched over the internet and found this. 5.9.10.113/64490419/… It shows how to render dynamic column by using map

rexess · Accepted Answer · 2021-08-20 21:40:50Z

1

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!

answered Aug 20, 2021 at 21:40

rexess

7454 silver badges10 bronze badges

Collectives™ on Stack Overflow

how to render a specific field dynamically in Material Table React

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related