Блог

Главная - Вопросы по программированию - Реакция-таблица добавляет итог в качестве первой строки

Реакция-таблица добавляет итог в качестве первой строки

#reactjs #react-table

#reactjs #react-таблица

Вопрос:

Я использую react-table 6.9.2. Я хочу иметь возможность добавить строку вверху (прямо под заголовком), которая отображает общее количество по каждому столбцу.

Вот моя функция, которая просто выводит таблицу со статическими значениями:

 function App() {
  const data = [
    {
      one: 2,
      two: 10.4,
      three: 10.1,
      four: 54,
      five: 5,
      six: 5,
      seven: 10,
      eight: 10,
      nine: 10
    },
    {
      one: 1,
      two: 10.4,
      three: 10.1,
      four: 54,
      five: 5,
      six: 5,
      seven: 10,
      eight: 10,
      nine: 10
    }
  ];
  return (
    <div className="App">
      <ReactTable
        data={data}
        showPagination={false}
        columns={[
          {
            Header: "Sales Overview",
            columns: [
              {
                Header: "one",
                id: "one",
                accessor: "one",
                show: true
              },
              {
                Header: "two",
                accessor: "two",
                show: true
              },
              {
                Header: "three",
                id: "three",
                accessor: "three",
                show: true
              },
              {
                Header: "four",
                id: "four",
                accessor: "four",
                show: true
              },
              {
                Header: "five",
                id: "five",
                accessor: "five",
                show: true
              },
              {
                Header: "six",
                id: "six",
                accessor: "six",
                show: true
              },
              {
                Header: "seven",
                id: "seven",
                show: true,
                accessor: "seven"
              },
              {
                Header: "eight",
                id: "eight",
                show: true,
                accessor: "eight"
              },
              {
                Header: "nine",
                id: "nine",
                accessor: "nine",
                show: true
              }
            ]
          }
        ]}
        loading={false}
        minRows={1}
        className="-striped -highlight"
      />
    </div>
  );
}

Есть ли способ, которым я могу добавить итоговую строку вверху? Даже если я получу общее значение каждого столбца, отправленного в data, могу ли я заказать, чтобы всегда отображалась общая строка вверху?

На случай, если это поможет, я также создал изолированную среду для отображения таблицы: https://codesandbox.io/s/2vz3z741op

Заранее спасибо!

Комментарии:

1. Простым решением было бы отказаться от основного заголовка (обзор продаж) и использовать подзаголовки для хранения сводных столбцов (всего строк)

2. @jgoday Не могли бы вы показать мне пример? Я не понимаю, как это будет работать

3. Хорошо, codesandbox.io/s/xp19oy14np . React-table, похоже, поддерживает только 2 вложенных заголовка, поэтому вы можете использовать второй уровень для имитации общего нижнего колонтитула. Извините меня за отступы в коде и беспорядок в стиле, но я использую старый ноутбук с неисправной клавиатурой…

4. @jgoday выглядит хорошо, спасибо!

Ответ №1:

Вы можете просто добавить итоговую запись в массив данных:

https://codesandbox.io/s/qv7vjpr69

 const getTotals = (data, key) => {
  let total = 0;
  data.forEach(item => {
    total  = item[key];
  });
  return total;
};
function App() {
  const data = [
    {
      one: "first row",
      two: 10.4,
      ...
    },
    {
      one: "second row",
      two: 10.4,
      ...
    }
  ];
  data.unshift({
    one: "totals",
    two: getTotals(data, "two"),
    three: getTotals(data, "three"),
    four: getTotals(data, "four"),
    five: getTotals(data, "five"),
    six: getTotals(data, "six"),
    seven: getTotals(data, "seven"),
    eight: getTotals(data, "eight"),
    nine: getTotals(data, "nine")
  });