Разверните React Bootstrap Table для получения более детальных данных. - PullRequest
Новая
       19

Разверните React Bootstrap Table для получения более детальных данных.

1 голос
/ 10 октября 2019

У меня есть таблица начальной загрузки, которая отображает информацию о продажах менеджера, сгруппированных по менеджерам, чтобы я мог видеть их общую производительность. Я хотел бы добавить возможность щелчка по строке и расширения таблицы для включения данных на уровне торгового представителя.

Данные: 

const SALES = [
          {
          manager: 'Mgr 1', revenue: 49.98, repName: 'Rep 1', forecast: 81.00, 
          },
          {
          manager: 'Mgr 1', revenue: 10, repName: 'Rep 1', forecast: 91.00, 
          },
          {
          manager: 'Mgr 1', revenue: 9.99, repName: 'Rep 13', forecast: 82.00, 
          },
          {
          manager: 'Mgr 2', revenue: 99.99, repName: 'Rep 3', forecast: 101.00, 
          },
          {
          manager: 'Mgr 2', revenue: 9.99, repName: 'Rep 5', forecast: 89.00, 
          },
          {
          manager: 'Mgr 3', revenue: 199.99, repName: 'Rep 6', forecast: 77.00, 
          },
      ];

Следующие функциональные группы / агрегатымои данные для моей исходной таблицы: 

function groupByTotal(arr, groupByCols, aggregateCols, counter) {
        const subSet = (o, keys) => keys.reduce((r, k) => (r[k] = o[k], r), {})
        let grouped = {};
        arr.forEach(o => {
          const values = groupByCols.map(k => o[k]).join("|");
          if (grouped[values]) {
            aggregateCols.forEach(col => grouped[values][col] += o[col])
            if (counter) { grouped[values].Count++ }
          } else {
            grouped[values] = subSet(o, groupByCols);
            if (counter) { grouped[values].Count = 1 }
            aggregateCols.forEach(col => grouped[values][col] = o[col])
          }
        })
        return Object.values(grouped);
      }

const groupedSales = groupByTotal(SALES, ['manager'], ['revenue','forecast']);

Создание таблицы: 

const columns = [{
        dataField: 'manager',
        text: 'Sale Owner',
      }, {
        dataField: 'revenue',
        text: 'Revenue',
      }, {
        dataField: 'forecast',
        text: 'Forecast', 
      }];

      const expandRow = {
        renderer: row => (
          // Add rep level data to table below the appropriate manager
        ),
        showExpandColumn: true
      };

return (
   <BootstrapTable
      keyField='manager'
      data={ groupedSales }
      columns={ columns }
      expandRow={ expandRow }
   />  
)

Идеальное решение было бы, если бы оно выглядело примерно так:

enter image description here

Может кто-нибудь помочь мне создать соответствующий файл расширения или предложить другой способ? Спасибо.

1 Ответ

0 голосов
/ 10 октября 2019

Посмотрите на это, это может решить вашу проблему. 

http://allenfang.github.io/react-bootstrap-table/example.html#expand
...