How can I add hyperlink to table head column entries in react using material ui table?

Question

// this is my header

const tableHeadCells = [
    {id:"Customer_ID",label:"CustomerId"},
    {id:"Type", label: "Type"},
    {id:"First_Name", label: "First Name"},
    {id:"Last_Name", label: "Last Name"},
    {id:"Company_Name", label: "Company Name"},
    {id:"Person Mobile", label: "Person Mobile"},
    {id:"Person Email", label: "Person Email"},
    {id:"Status",label: "Status"},
    {id: "Date", label: "Date"}
]

// this is the table data

function createData(CustomerId,Type, First_Name,Last_Name, Company_Name, Person_Mobile, 
                    Person_Email,Status,Date) {
  return {
          CustomerId,Type, First_Name,Last_Name, Company_Name, Person_Mobile, 
          Person_Email,Status,Date};
  }

}

const tableBodyRowsData = [

  createData(1,'COMPANY','Gaurav', 'Kumar', 'Complere Infosystem',923456789 , 
             "Gaurav@gmail.com","ACTIVE","11/12/2019"),
  createData(2,'COMPANY','Shyam', 'Lal', 'Complere Infosystem',913456789 , 
             "Shyam@gmail.com","ACTIVE","11/12/2019"),
  createData(3,'COMPANY','Ram', 'Lal', 'Complere Infosystem',933456789 , 
             "ram@gmail.com","ACTIVE","11/12/2019"),
  createData(4,'COMPANY','Sahil', 'Kumar' , 'Complere Infosystem',943456789 , 
             "Sahil@gmail.com","ACTIVE","11/12/2019"),

];

// this is the piece of code that I am using to display the head cells and data in table

<TableContainer>
    <Table className={classes.table}>
      <TableHead>
        <TableRow>
          {headCells.map( (item) => (
            <TableCell
              key={item.id}>
                {item.label}
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {handleRecordsPaging().map( (item) => (
          <TableRow 
            key={item.CustomerId}
          >
          {Object.values(item).map( (value) => (
              <TableCell key={value}>{value}</TableCell> 
          ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

// I want to know that how can I make the first column (Customer_ID) of the table clickable?, If I click on it, then it should go to the other page?

Answer 1

Use the index param to determine if its the first one and then either add a onclick event handler or a Link

Something like

<TableRow>
          {headCells.map( (item, index) => (
            <TableCell
              key={item.id}
              onClick={index?null:handler}>
                {item.label}

            </TableCell>
          ))}
</TableRow>

Where the hander is responsible for the navigation using React Router .