Как создать ‘RowSpan’, используя PrimeNG p-datatable

#angular #primeng

#angular #primeng

Вопрос:

У меня есть таблица, которая должна выглядеть следующим образом.

  --------- ------- --------- ---------- -------- -------- -------- 
| Product | Color | Type    | Stats    | 2016   | 2017   | 2018   |                    
 --------- ------- --------- ---------- -------- -------- -------- 
| Nike    | Blue  |Sneakers | Qty sold | 150    | 167    | 251    |
|         |       |          ---------- -------- -------- -------- 
|         |       |         | Price    | $17.99 | $18.99 | $21.99 |
|         |       |          ---------- -------- -------- --------   
|         |       |         | Profit   | $600   | $750   | $1230  |   
 --------- ------- --------- ---------- -------- -------- --------      
| Converse| White |Sneakers | Qty sold | 145    | 151    | 201    |
|         |       |          ---------- -------- -------- -------- 
|         |       |         | Price    | $17.99 | $18.99 | $21.99 |
|         |       |          ---------- -------- -------- --------   
|         |       |         | Profit   | $550   | $450   | $930  |   
 --------- ------- --------- ---------- -------- -------- --------         
  

Я пробую примеры с этой страницы, но безуспешно.

Спасибо за помощь

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

1. Поделитесь своей работой над Stackblitz для начала.

2. какую версию Primeng вы используете

3. @AshokanSivapragasam Я не знаком с этим инструментом. Я сделаю все возможное, чтобы поместить туда.

4. @TheParam Я использую версию 4.3.0

5. @Richard77 Интересно, нашли ли вы способ это сделать?

Ответ №1:

Это может быть вашей отправной точкой. Я публикую пример в Stackblitz. Я выполняю интерполяцию, чтобы указать диапазон строк, используя PrimeNG. Теперь я мог бы применить rowspan для html-таблицы. Пожалуйста, отредактируйте его, чтобы импровизировать этот пример в соответствии с требованиями.

Для будущих вопросов, пожалуйста, посетите Stackblitz, чтобы опубликовать рабочий пример.