React Table, show the data from accessor, custom rendering from another column

user_11332314 0
Viewed 4564

I have a bit of an interesting problem, I am new to (React-Table) and I have a requirement I am unsure how to fulfill.

I want the txName to render so that it shows the value of the txName column, however on click of the cell, I want to redirect to the value of the txId column which is hidden.

So far this is what I have, I am hoping to use fgpBinder to tell react-table which column to use.

The columns I am passing through.

"dumbColumns": [
  { accessor: "icpNumber", Header: "ICP", minWidth: 210 },
  { accessor: "icpStatus", Header: "Status", minWidth: 180 },
  { accessor: "lvCircuit", Header: "LV Circuit", minWidth: 120 },
  { accessor: "txId", fgpBinder: "txName", label: "txName" , Header:"Transformer", id : "txId", minWidth : 140 },
  { accessor: "txName", fgpBinder: "txId" , label: "txId" , Header:"Transformer", id: "txId", minWidth: 140, show: false },
  { accessor: "txRating", Header: "Transformer Rating", minWidth: 80 },
  { accessor: "fdrId", Header: "Feeder", minWidth: 180 },
  { accessor: "zsId", Header: "Zone Substation", minWidth: 180 },
  { accessor: "gxpId", Header: "GXP", minWidth: 140 },
  { accessor: "anzsic", Header: "anzsic", minWidth: 100 },
  { accessor: "address", Header: "ICP Address", minWidth: 410 }
];

Code I have tried, I am getting back the txName and txId data in the log

buildData(data){
  data.forEach(element => {
    console.log(element)
  });
  return data;
}

The function here works and populates the cell with the value "txData" however I want the value of txdata

buildColumns(data){
  data.forEach(element => {
    if(element["fgpBinder"]){
      console.log(element)
      element["Cell"] = row => (
        <span>{element.fgpBinder}</span>
      )
    }
    // element["Cell"] = row => (
    //   <a href="https://www.google.com">
    //   CLICK ME
    //   </a>
    // )
  });
  return data;
}

For example the txName could be foo and the txId could be www.bah.com

I would like to show foo but when i click the cell, be redirected to www.bah.com

react-table reactjs javascript
1 Answers

To deal with a column that has a specific behavior, you need to add to your column property the props Cell, in which you specify how to render your value.

To show the column with header Transformer with the txName value and the link txId, initialize your column like this:

buildColumns (columns) {
  let finalColumns = [];
  finalColumns = columns.map(column => {
    let finalColumn = {
      Header: column.Header,
      accessor: column.accessor,
      label: column.label,
      id: column.id,
      minWidth: column.minWidth,
      show: column.show
    }
    // CASE : fgpBinder exists, which implies a special Cell content
    if (column.fgpBinder) {
        finalColumn.Cell = (row) => (
          <a href={row.original[column.fgpBinder]}>{row.value}</a>
        );
    }
    return finalColumn;  
  });

  return finalColumns;
}

This is a generic columns construction. If you want to specify only the column with Header Transformer, you just need to initialize the column like this:

{
  Header: "Transformer",
  id: "txId",
  accessor: "txName",
  Cell: row => <a href={row.original.txId}>{row.value}</a>,
  fgpBinder: "txId",
  label: "txId",
  minWidth: 140,
}
user_73214620
Related