소개
주문이나 거래, 결제 데이터 등의 합계를 한눈에 보기 쉽게 정리해야할 때가 있습니다.
이때 일반적으로 표 하단에 합계를 표기하는 방식을 많이 보실 수 있습니다.
(복잡한 데이터 속에서 중요한 수치를 빠르게 확인할 수 있도록)
셀렉트어드민에서 해당 표를 어떻게 구현할 수 있는데 관련 예제와 함께 안내드립니다.
예제: 재고 테이블에 합계 및 금액 계산 추가
재고 데이터를 보여주는 테이블에서 합계 및 금액 합산 기능을 추가하면, 데이터의 가독성을 높이고 빠르게 인사이트를 얻을 수 있습니다.
테이블에 재고량 및 금액 합계를 계산하여 표시하는 방법을 설명합니다.
예제 이미지
예제 전체 YAML
menus:
- path: pages/3qQ2sR
name: 합계 표시
pages:
- path: pages/3qQ2sR
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT
id, name, vintage, inflow, outflow, price, safeflow, deleted_at
FROM wine_stock
WHERE inflow IS NOT NULL
# display: table html
display: html table
actions:
- label: 확정
responseFn: |
return rows.map(e => {
e.deleted_at = e.deleted_at ? moment(e.deleted_at).format('YY.MM.DD') : '-'
return e
})
thead:
rows:
- class: bg-neutral-100 text-neutral-800 font-medium divide-x
cells:
- th: { rowspan: 2, content: "번호" }
- th: { rowspan: 2, content: "상품명" }
- th: { colspan: 2, content: "재고량" }
- th: { rowspan: 2, content: "판매기간", help: "해당기간까지 게시됩니다.", width: 200px}
-
class: "bg-neutral-100 text-neutral-800 font-medium divide-x"
cells:
- th: { class: "border", content: "입고" }
- th: { class: "border", content: "출고" }
tbody:
rows:
- class: "text-center divide-x hover:bg-neutral-100"
cells:
- td: { content: "{{id}}" }
- td: { content: "{{name}}", class: "text-left" }
- td: { content: "{{inflow}}", class: "text-right" }
- td: { content: "{{outflow}}", class: "text-right" }
- td: { content: "{{deleted_at}}" }
tfoot:
rows:
- class: "font-medium divide-x text-center"
cells:
- th: { colspan: 2, class: "bg-neutral-100 text-neutral-800", content: "수량합계" }
- td:
class: "text-right"
content: <span class="text-blue-600">{{inflow}}</span> Box
- td:
class: "text-right"
content: <span class="text-blue-600">{{outflow}}</span> Box
- td: ""
- class: "font-base divide-x text-center"
cells:
- th: { colspan: 2, class: "bg-neutral-100 text-neutral-800", content: "금액합계" }
- td: { class: "text-right", content: "{{inflow_amount}} 원" }
- td: { class: "text-right", content: "{{outflow_amount}} 원" }
- td: ""
- class: "font-base divide-x text-center"
cells:
- th: { colspan: 2, class: "bg-neutral-100 text-neutral-800", content: "재고금액합계" }
- td: { colspan: 2, content: "{{amount}} 원" }
- td: ""
totalFn: |
total.inflow = _.sumBy(rows, 'inflow')
total.outflow = _.sumBy(rows, 'outflow')
total.inflow_amount = _.sum(rows.map(e => (+e.price || 0) * +e.inflow))
total.outflow_amount = _.sum(rows.map(e => (+e.price || 0) * +e.outflow))
total.amount = total.inflow_amount - total.outflow_amount
total.inflow_amount = filters.number(total.inflow_amount)
total.outflow_amount = filters.number(total.outflow_amount)
total.amount = filters.number(total.amount)
세부사항 가이드
주요 구성요소
tfoot
- 재고량과 금액의 합계를 계산하여 하단에 표시합니다.
totalFn JS 사용
- 데이터를 기반으로 필요한 계산(합계, 금액 등)을 수행합니다.
구현 단계
1. thead와 tbody 구조
테이블의 헤더와 본문에는 재고량(inflow, outflow) 및 금액(price)을 표시합니다.
2. tfoot 블록 구성
테이블 하단에 합계를 표시하는 구조를 추가합니다.
- 재고량 합계:
입고와출고수량의 합계를 보여줍니다. - 금액 합계:
입고 금액과출고 금액을 계산하여 표시합니다. - 총 재고 금액:
입고 금액에서출고 금액을 뺀 결과를 나타냅니다.
예제:
tfoot:
rows:
- class: "font-medium divide-x text-center"
cells:
- th: { colspan: 2, class: "bg-neutral-100 text-neutral-800", content: "수량합계" }
- td: { class: "text-right", content: <span class="text-blue-600">{{inflow}}</span> Box }
- td: { class: "text-right", content: <span class="text-blue-600">{{outflow}}</span> Box }
- td: ""
- class: "font-base divide-x text-center"
cells:
- th: { colspan: 2, class: "bg-neutral-100 text-neutral-800", content: "금액합계" }
- td: { class: "text-right", content: "{{inflow_amount}} 원" }
- td: { class: "text-right", content: "{{outflow_amount}} 원" }
- td: ""
- class: "font-base divide-x text-center"
cells:
- th: { colspan: 2, class: "bg-neutral-100 text-neutral-800", content: "재고금액합계" }
- td: { colspan: 2, content: "{{amount}} 원" }
- td: ""
3. totalFn으로 데이터 계산
totalFn을 사용하여 테이블 데이터를 기반으로 필요한 합계 값을 계산합니다.
예제:
totalFn: |
total.inflow = _.sumBy(rows, 'inflow')
total.outflow = _.sumBy(rows, 'outflow')
total.inflow_amount = _.sum(rows.map(e => (+e.price || 0) * +e.inflow))
total.outflow_amount = _.sum(rows.map(e => (+e.price || 0) * +e.outflow))
total.amount = total.inflow_amount - total.outflow_amount
total.inflow_amount = filters.number(total.inflow_amount)
total.outflow_amount = filters.number(total.outflow_amount)
total.amount = filters.number(total.amount)
결과
이제 테이블 하단에 수량합계, 금액합계, 재고금액합계가 표시됩니다. 사용자에게 명확한 데이터를 제공하여 효율적인 의사 결정을 지원할 수 있습니다.