In this web-app, we have 3 different types of users: Participants, Volunteers and Staff. The Volunteers are the only users that we store their "availability" in schedules that staff can view by clicking a "View Volunteer Schedule" button next to their row in the DataGrid.

This is how the DataGrid looks:

DataGrid Image

On the far left, there are buttons that will open a new tab with the user's schedule information.

This is the function of that button in ManageUser.jsx:

  /**
     * View Volunteer Schedule
     * @param e
     */
    function viewVolunteerSchedule(e) {
        if (e.row.data.role !== "Volunteer") {
            alert("This user is not a volunteer.", "Error");
        } else {
            let volunteerEmail = e.row.data.email;
            window.open("/admin/view-volunteer-schedule?email=" + volunteerEmail)
        }
    }

what I want to figure out is, rather than having this button appear on every row, displaying an error message when it is clicked on a non-volunteer - how do I go about making this button only appear in rows where the condition is met: "this user is a volunteer"?

The <DataGrid> in the return statement has the following component for rendering this column:

<Column type={"buttons"}>
    <Button text="View Schedule"
        icon="event"
        hint="View Volunteer Schedule"
        onClick={viewVolunteerSchedule}>
    </Button>
</Column>

How do I go about accessing this particular row's "role" variable in a datagrid?, so that I might make this button only visible under certain conditions?

I tried adding the line:

visible={data.role==='Volunteer'}

but this doesn't seem to be the correct data as it only made them all invisible. Any help or advice is greatly appreciated.