Itertating array data into a Material UI table

Question

I am trying to create a table to list all of my users in one go but I am having trouble getting it to display properly.

If I have two arrays to mix in (one of column names and one for where the main array user list should these go inside the return statement? I am stuck at the minute were it is either outputting nothing on a blank screen or throwing this error.

const columns = [
        { field: 'id', headerName: 'ID', width: 70 },
        { field: 'firstname', headerName: 'First name', width: 130 },
        { field: 'lastName', headerName: 'Last name', width: 130 },
        { field: 'userName', headerName: 'Username', width: 130},
        { field: 'userEmail', headerName: 'Email', width: 180 },
        { field: 'userRole', headerName: 'Role', width: 80}
    ];
    const rows = [
        { id: userLists.userID, firstname: userLists.userFirstName, lastName: userLists.userSurname,  userName: userLists.username, userEmail: userLists.userEmail, userRole: userLists.userRoleID },
    ];


    return (

        <div style={{ height: 400, width: '100%' }}>
        {userLists.map(( {}) => {
         return   <DataGrid rows={rows} columns={columns} pageSize={10} checkboxSelection />
     })}
        </div>
    );
}

How are you accessing the property userID on userLists and the same time mapping over it? — Medi
– Medi, Commented Apr 21, 2021 at 13:15

The code painter · Accepted Answer · 2021-04-21 13:51:01Z

1

you should map your data this way :

const columns = [
        { field: 'id', headerName: 'ID', width: 70 },
        { field: 'firstname', headerName: 'First name', width: 130 },
        { field: 'lastName', headerName: 'Last name', width: 130 },
        { field: 'userName', headerName: 'Username', width: 130},
        { field: 'userEmail', headerName: 'Email', width: 180 },
        { field: 'userRole', headerName: 'Role', width: 80}
    ];
    const rows =userLists.map(user=>({ id: user.userID, firstname: user.userFirstName, lastName: user.userSurname,  userName: user.username, userEmail: user.userEmail, userRole: user.userRoleID }));


    return (

        <div style={{ height: 400, width: '100%' }}>
        <DataGrid rows={rows} columns={columns} pageSize={10} checkboxSelection />
        </div>
    );
}

answered Apr 21, 2021 at 13:51

The code painter

1,7743 gold badges17 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

Itertating array data into a Material UI table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related