Vuetify에서 행 그룹화

이 기사에서는 유사한 값으로 Vuetify 테이블의 행을 그룹화하는 방법에 대한 경험을 공유하고자 합니다.

주제를 조사하는 동안 그룹화에 대한 정보가 많지 않다는 것을 알았습니다. 물론 기본 그룹화 예제를 찾을 수 있지만 제 사용 사례에는 약간의 고급 기능이 필요했습니다.

작은 소개

제품 데이터가 있다고 가정합니다. 자체 비용과 수량은 날짜별로 구분됩니다. 예를 들어:


상품명
제품 코드
자기 비용
수량
처리 날짜


🍌 바나나
111222333
1.4
50
2021-09-09

🍌 바나나
111222333
1.2
20
2021-09-10

🍌 바나나
111222333
1.5
74
2021-09-11

🍎 사과
222111333
0.5
100
2021-09-09

🍎 사과
222111333
0.9
80
2021-09-10

🍉 수박
362272838
1.1
24
2021-09-10

🍉 수박
362272838
1
45
2021-09-11

🍉 수박
362272838
0.8
73
2021-09-12


매일 우리는 제품을 받고 있지만 비용과 수량은 다릅니다. 이를 분석하려면 이러한 상세한 데이터가 필요하지만 유사한 제품을 "접거나"그룹화하여 평균 자체 비용, 총 비용 및 총 수량과 같은 요약 정보를 얻을 수 있다면 좋을 것입니다.

따라서 이 경우 이전의 유사한 데이터를 요약하고 표시할 하나의 메타 또는 임시 행이 필요합니다.

되게 해봐...

다음과 같은 JavaScript 스니펫이 있다고 가정합니다.

fields: [
    {value: 'product_name', text: 'Product name', sortable: true, groupable: true},
    {value: 'product_code', text: 'Product code', sortable: true, groupable: true},
    {value: 'quantity', text: 'Quantity', sortable: true, groupable: false},
    {value: 'produced_at', text: 'Process date', sortable: false, groupable: false},
],
items: [
    {
        "product_name": "🍌 Banana",
        "product_code": 111222333,
        "Self cost": 1.4,
        "Quantity": 50,
        "produced_at": "2021-09-09"
    },
    {
        "product_name": "🍌 Banana",
        "product_code": 111222333,
        "Self cost": 1.2,
        "Quantity": 20,
        "produced_at": "2021-09-10"
    },
    {
        "product_name": "🍌 Banana",
        "product_code": 111222333,
        "Self cost": 1.5,
        "Quantity": 74,
        "produced_at": "2021-09-11"
    },
    {
        "product_name": "🍎 Apple",
        "product_code": 222111333,
        "Self cost": 0.5,
        "Quantity": 100,
        "produced_at": "2021-09-09"
    },
    {
        "product_name": "🍎 Apple",
        "product_code": 222111333,
        "Self cost": 0.9,
        "Quantity": 80,
        "produced_at": "2021-09-10"
    },
    {
        "product_name": "🍉 Watermelon",
        "product_code": 362272838,
        "Self cost": 1.1,
        "Quantity": 24,
        "produced_at": "2021-09-10"
    },
    {
        "product_name": "🍉 Watermelon",
        "product_code": 362272838,
        "Self cost": 1,
        "Quantity": 45,
        "produced_at": "2021-09-11"
    },
    {
        "product_name": "🍉 Watermelon",
        "product_code": 362272838,
        "Self cost": 0.8,
        "Quantity": 73,
        "produced_at": "2021-09-12"
    }
],

그리고 우리는 HTML에 위의 데이터를 제공합니다.

<v-app>
    <v-data-table :headers="fields"
                  :items="items"
                   class="elevation-1 bordered"
                   group-by="product_code"
                   show-group-by>
         ...
    </v-data-table>
</v-app>

그래서 우리는 다음과 같은 것을 얻습니다:

Ezgif.com-gif-maker GIF | Gfycat

Gfycat에서 Ezgif.com-gif-maker GIF를 보고 공유하세요



gfycat.com




멋지죠? 제품 이름과 제품 코드로 그룹화할 수 있을 뿐만 아니라 그룹화를 비활성화하여 모든 것을 한 눈에 볼 수 있습니다. 그러나 예를 들어 바나나, 사과, 수박의 평균 자체 비용을 계산하거나 수량을 합산하는 등 일부 열의 데이터를 요약하려는 경우에는 어떻게 해야 할까요?

Vuetify는 훌륭하고 잘 문서화된 API 을 제공합니다. 그룹화 사용자 지정을 위해 다음 매개 변수가 있는 group.summary 슬롯을 조사해야 합니다.

{
  group: string,
  groupBy: string[],
  isMobile: boolean,
  items: any[],
  headers: DataTableHeader[],
  isOpen: boolean,
  toggle: () => void
}

우리의 경우 위의 개체에서 배열을 분해하여 items 배열을 가져올 수 있습니다.

<template #group.summary="{ items }">
    <th class="totals">Totals:</th>
    <th class="totals">{{ calculateTotals(items).total_quantity }}</th>
    <th class="totals">{{ calculateTotals(items).average_self_cost }}</th>
    <th class="totals"></th>
</template>

이제 여기에서 필요한 모든 데이터를 제어하고 필요에 따라 수정할 수 있습니다.

HTML의 최종 버전은 다음과 같습니다.

<v-app>
    <v-data-table :headers="fields"
                  :items="items"
                   class="elevation-1 bordered"
                   group-by="product_code"
                   show-group-by>
             <template #group.summary="{ items }">
                <th class="totals">Totals:</th>
                <th class="totals">{{ calculateTotals(items).total_quantity }}</th>
                <th class="totals">{{ calculateTotals(items).average_self_cost }}</th>
                <th class="totals"></th>
             </template>
    </v-data-table>
</v-app>

다음과 같이 표시됩니다.

출력-2021-10-05 23.58.43 GIF | Gfycat

Gfycat에서 Output-2021-10-05 23.58.43 GIF 시청 및 공유



gfycat.com




유사한 행을 최소화하여 "유일한"상품을 볼 수 있으며 요약 데이터를 한눈에 볼 수 있습니다. 이러한 요약 정보는 100-250행과 같은 큰 데이터 세트가 있을 때 매우 유용합니다.

개선 사항으로 수동으로 이 작업을 수행하고 훨씬 빠르게 통계 수치를 보는 대신 표시된 행에 대해 동일한 데이터를 한 번에 접는 토글을 추가할 수 있습니다.

이 기사가 마음에 들었고 새로운 것을 얻었기를 바랍니다.

각주

이것은 나의 첫 번째 기사이므로 엄격합니다. ✌🏻
모든 제안에 감사드립니다.
그리고 여기까지 읽어주셔서 감사합니다.