React Table, показать данные из аксессора, пользовательский рендеринг из другого столбца - PullRequest
Новая
       20

React Table, показать данные из аксессора, пользовательский рендеринг из другого столбца

1 голос
/ 28 июня 2019

У меня есть небольшая интересная проблема, я новичок в ( React-Table ), и у меня есть требование, которое я не знаю, как выполнить.

Я хочу, чтобы txName отображал значение столбца txName, однако при нажатии на ячейку я хочу перенаправить значение скрытого столбца txId.

Пока это то, что у меня есть, я надеюсь использовать fgpBinder, чтобы указать в таблице реакции, какой столбец использовать.

Колонны, через которые я прохожу. 

"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 }
];

Код, который я пробовал, я получаю данные txName и txId в журнале 

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

Функция здесь работает и заполняет ячейку значением "txData", однако я хочу значение 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;
}

Например, txName может быть foo и txId может быть www.bah.com

Я хотел бы показать foo, но когда я щелкаю по ячейке, меня перенаправляют на www.bah.com

1 Ответ

0 голосов
/ 09 июля 2019

Чтобы иметь дело со столбцом, который имеет определенное поведение, вам необходимо добавить в свойство столбца реквизиты Cell, в которых вы указываете, как отображать свое значение.

Чтобы отобразить столбец с заголовкомTransformer со значением txName и ссылкой txId, инициализируйте ваш столбец следующим образом: 

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;
}

Это общая конструкция столбцов.Если вы хотите указать только столбец с заголовком Transformer, вам просто нужно инициализировать столбец следующим образом: 

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