CODEWITHSUNDEEP
javascriptreactjsmaterial-uimaterial-table
Hongli Bu
Hongli Bu

Reputation: 561

Type error when using render when defining table columns in material table React

HI I am using Material table to generate table view, here I defined the columns:

const columns: TableColumn[] = [
    {
        title: 'TYPE',
        field: 'type_of_action',
        highlight: true,
    },
    {
        title: 'DESCRIPTION',
        field: 'description',
    },
    {
        title: 'REFERENCE ID',
        field: 'reference_id'
    },
    {
        title: 'ENVIRONMENT',
        field: 'environment'
    },
    {
        title: 'SEVERITY',
        field: 'severity'
    },
    {
        title: 'PRIORITY',
        field: 'priority'
    },
    {
        title: 'ACTION',
        field: 'action',
        render: (rowData) => (
            console.log(rowData.priority). <---- error
        ),
    }
];

I used render in the last columns. but I saw a error in my Intellij like:

TS2339: Property 'priority' does not exist on type '{}'.

actually my code works and I can see rowData.priority printed out in my console.

I now rowData here is type{} and cannot recognize priority

In order to resolve this, I need to define it inside the <MaterialTable> tag, otherwise fields cannot be recognized?

But putting so many lines of codes in the tag looks very dirty.Any ways to extract the column to a const variable while avoiding the type error?

One idea in my mind is to pass the columns variable in first, and manipulate using map, but I am not sure how to do this?

Upvotes: 2

Views: 754

Answers (1)

NicoE
NicoE

Reputation: 4873

Try adding the type property to your columns definition when the type is different than string:

const columns: TableColumn[] = [
{
        title: 'PRIORITY',
        field: 'priority',
        type: 'number'
    }
]

Posible values are: 'boolean', 'numeric', 'date', 'datetime', 'time', 'currency'.

You can find more details in this PR.

Upvotes: 0

Related Questions