ответная таблица, как создать заголовки столбцов и ячейки с массивом - PullRequest
Новая
       11

ответная таблица, как создать заголовки столбцов и ячейки с массивом

0 голосов
/ 06 марта 2019

Я использую реагирующую таблицу в своем проекте, и мне интересно, как динамически создавать заголовки с массивом.

в моем компоненте у меня есть: 

const columns = [
  {Header: 'day', accessor: ''}, 
  {Header: 'day', accessor: ''}
]

<ReactTable
    className="-striped -highlight"
    data={this.props.items}
    columns={columns}
    defaultPageSize={20}/>

и у меня есть данные json какчто: 

"items": [
    {
      "day": "01",
      "city": "A",
      "1": "",
      "2": "",
      "3": "",
      "4": null,
      "5": "",
      "6": 256,
      "7": 36.07,
      "8": 35.15,
      "9": "",
      "10": "",
      "11": 6.49,
      "12": 5.9,
      "13": "",
      "14": "",
      "15": 72.0,
      "16": 62.109375,
      "17": 266.78,
      "18": 83.59375,
      "19": 444.96
    },
    {
      "day": "02",
      "city": "B",
      "1": "",
      "2": "",
      "3": "",
      "4": null,
      "5": "",
      "6": 234,
      "7": 36.52,
      "8": 35.6,
      "9": "",
      "10": "",
      "11": 6.08,
      "12": 5.71,
      "13": "",
      "14": "",
      "15": 64.0,
      "16": 43.162393162393165,
      "17": 121.97,
      "18": 84.1880341880342,
      "19": 346.49
    },
    {
      "day": "03",
      "city": "B",
      "1": "",
      "2": "",
      "3": "",
      "4": null,
      "5": "",
      "6": 221,
      "7": 36.96,
      "8": 35.93,
      "9": "",
      "10": "",
      "11": 5.82,
      "12": 5.28,
      "13": "",
      "14": "",
      "15": 56.99999999999999,
      "16": 39.366515837104075,
      "17": 94.48,
      "18": 78.28054298642535,
      "19": 227.4
    },
   ]

так вот, я хочу, чтобы каждый элемент в массиве элементов имел столбец.и заголовки этих столбцов будут их дневным свойством, а ячейки будут значениями, которые в списке 1, 2, 3, 5, 6. Как я могу это сделать?

1 Ответ

2 голосов
/ 06 марта 2019

У вас может быть просто цикл в функции для динамического создания необходимых заголовков на основе первого объекта вашего списка items: 

getColumns () {
  let columns = [];
  let headers = Object.keys(items[0]);
  headers.forEach(header => {
    columns.push({
      Header: header
      accessor: ""
    })
  }

  return columns;
}

Надеюсь, это то, что вы искали (если я не понял вопроса).

UPDATE

Первое, что нужно сделать, - это создать массив строк, который будет отображаться так, как вы хотите. Действительно, массив items должен быть преобразован во что-то вроде этого: 

[{
  "day01": "A",
  "day02": "B",
  "day03": "B"
},
{...}]

Это можно сделать так: 

  render () {
    const rows = this.buildDataFromItems(items);   // items is your json array
    const columns = this.buildColumnsFromItems(items);
    return(
      <ReactTable
        columns={columns}
        data={rows}
      />
    )
  }

  buildColumnsFromItems (items) {
    let headers = [];
    items.forEach(item => {
      headers.push("day" + item.day);
    })

    let columns = [];
    headers.forEach(header => {
      columns.push({
        Header: header,
        accessor: header
      })
    });

    return columns;
  }

  buildDataFromItems (items) {
    let rows = [];
    let currentHeader = "";
    let currentRow = {};

    for (let i = 0; i < Object.keys(items[0]).length && Object.keys(items[0])[i] !== "day"; i++) {
      currentRow = {};
      items.forEach(item => {
        currentHeader = "day" + item.day;
        currentRow[currentHeader] = item[Object.keys(items[0])[i]];
      })

      rows.push(currentRow);
    }

    return rows;
  }

Этот кусок кода должно быть достаточно, чтобы привести вас к окончательному решению, я надеюсь:)

...