React-table: невозможно интерполировать вложенные json данные внутри реакционной таблицы - PullRequest
Новая
       61

React-table: невозможно интерполировать вложенные json данные внутри реакционной таблицы

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

Это полный код Редактировать black-frost-j9zuv

У меня react-table. версия 6.1.1. Я добавил полный код в приведенный выше codeSandbox, а также добавил соответствующие фрагменты кода ниже.

Я могу интерполировать данные для [0] index, но я не могу сделать это для всех записей, и это проблема.

Как я сделал для [0] index, я использую sh, чтобы сделать нечто подобное. но не уверен, как именно этого добиться.

Код для настраиваемой ячейки 

MyCell({
    value,
    columnProps: {
      rest: { someFunc }
    }
  }) {
    const data = {
      // labels: value.map((val, idx) => {
      //   return idx;
      // }),
      datasets: [
        {
          backgroundColor: [
            "#ff8779",
            "#2a84e9",
            "#e2e2e2",
            "#ff8779",
            "#2a84e9",
            "#e2e2e2"
          ],
          data: value
        }
      ]
    };

    return <Pie data={data} />;
  }

Код для столбцов 

  columns = [
    // * embedding checkbox
    {
      Header: "Select",
      Cell: row => (
        <input
          type="checkbox"
          defaultChecked={this.state.checked[row.index]}
          checked={this.state.checked[row.index]}
        />
      )
    },
    {
      Header: "System",
      accessor: "sites[0].systems[0].systemName"
    },
    {
      Header: "Measurement",
      accessor: "sites[0].systems[0].measurements[0].name"
    },
    {
      Header: "Min",
      accessor: "sites[0].systems[0].measurements[0].min"
    },
    {
      Header: "Max",
      accessor: "sites[0].systems[0].measurements[0].max"
    },
    {
      Header: "Avg",
      accessor: "sites[0].systems[0].measurements[0].average"
    },
    {
      Header: "Last",
      accessor: "sites[0].systems[0].measurements[0].last"
    },
    {
      Header: "Bar",
      accessor: "sites[0].systems[0].measurements[0].buckets.values",
      Cell: this.MyCell
    }
  ];

код для react-table component внутри render() 

            <ReactTable
                  className="-striped -highlight"
                  ref={r => (this.reactTable = r)}
                  data={[...measurementsData]}
                  pageSize={
                    measurementsData.length > 10 ? 10 : measurementsData.length
                  }
                  filterable
                  resizable={true}
                  columns={this.columns}
                  showPaginationTop={false}
                  showPaginationBottom={false}
                />

1 Ответ

1 голос
/ 09 июля 2020

Вам нужно написать специальную Cell функцию

Извините, но я не знаю, как «придумать» -сглаживать массивы, поэтому я применил тот же подход к моему ответу на ваш предыдущий вопрос 

  renderJson(sites, property) {
    let flat = sites.map(md => md.systems);
    flat = [].concat(...flat);
    flat = flat.map(md => md.measurements);
    flat = [].concat(...flat);

    return (
      <div>
        {flat.map(measurement => {
          return (
            <>
              {measurement[property]}
              <br />
            </>
          );
        })}
      </div>
    );
  }

, а затем 

      Cell: row => {
        return this.renderJson(row.original.sites, 'name')
      }
.
.
.
      Cell: row => {
        return this.renderJson(row.original.sites, 'min')
      }
.
.
.
      Cell: row => {
        return this.renderJson(row.original.sites, 'max')
      }

Вот ссылка, чтобы увидеть его в действии https://codesandbox.io/s/stoic-mclaren-kvmpg

...