라이브 데모
아래 표에 붙은 화면 코드는 이 페이지의 마크업 한 벌이 전부입니다. 화면 전용 JS 는 0줄입니다.
검색·코드필터·기간·정렬·서버페이징·합계·엑셀·컬럼(표시/너비/순서)·수정모드(엑셀식 범위선택·복사·붙여넣기·채우기)가 선언만으로 붙습니다.
해볼 것 → 헤더 클릭(정렬) · 수정 버튼(편집 모드) · 셀 드래그(범위 선택) · Ctrl/⌘+C(복사, 토스트로 뜸) ·
Ctrl/⌘+V(붙여넣기) · 채우기 핸들 드래그 · 컬럼 버튼(메모 열 켜기) · 행 클릭(상세 모달) · 돋보기(연결 화면 이동)
데모라 저장은 하지 않습니다. 수정모드에서 저장을 누르면 서버가 받은 내용을 검사만 하고 돌려줍니다
(허용 필드 화이트리스트 동작을 보기 위한 것 — 서버 연동 참고).
| 회사 | 담당자 | 제목 | 메모 | 귀속년월 | 기한 | 금액 | 수량 | 상태 | 연결 |
|---|---|---|---|---|---|---|---|---|---|
| 벨리사운드 | 박하늘 | 알림 발송 배치 #156 | 협의 중 — 금액 확정 전 | 2026-08 | 2026-03-30 | 3,750,000 | 5.75 | 보류 | 미연결 |
| 벨리사운드 | 김선규 | 결제 모듈 연동 #141 | 협의 중 — 금액 확정 전 | 2026-08 | 2026-06-23 | 350,000 | 9.50 | 작성중 | 미연결 |
| 벨리사운드 | 이범규 | 리포트 내보내기 #122 | 2026-08 | 2026-02-03 | 3,250,000 | 2.75 | 보류 | 미연결 | |
| 벨리사운드 | 박하늘 | 알림 발송 배치 #82 | 2026-08 | 2026-05-17 | 2,400,000 | 9.00 | 보류 | 미연결 | |
| 벨리사운드 | 김선규 | 결제 모듈 연동 #80 | 2026-08 | 2026-02-18 | 550,000 | 7.50 | 완료 | 연결 | |
| 벨리사운드 | 박하늘 | 관리자 권한 정리 #24 | 협의 중 — 금액 확정 전 | 2026-08 | 2026-07-05 | 1,450,000 | 6.00 | 완료 | 미연결 |
| 벨리사운드 | 김선규 | 리포트 내보내기 #10 | 2026-08 | 2026-07-01 | 1,600,000 | 5.50 | 보류 | 연결 | |
| 벨리사운드 | 김선규 | 이미지 업로드 개선 #9 | 협의 중 — 금액 확정 전 | 2026-08 | 2026-05-18 | 2,900,000 | 2.50 | 진행중 | 미연결 |
| 벨리사운드 | 이승규 | 통계 대시보드 #205 | 2026-07 | 2026-08-22 | 1,300,000 | 9.00 | 보류 | 연결 | |
| 벨리사운드 | 이범규 | 결제 모듈 연동 #177 | 협의 중 — 금액 확정 전 | 2026-07 | 2026-05-24 | 50,000 | 10.00 | 보류 | 미연결 |
이 표를 만든 코드
헤더 선언 한 줄이 그 열의 검색·필터·정렬·편집 방식을 전부 정합니다.
<table class="data-table" data-grid data-server data-batch-url="/demo/batch" data-total="52" data-page="1" data-size="10" data-sum-row="on" data-sums="amount:...,qty:..."> <thead><tr> <th data-search data-sort data-code data-label="회사" data-field="company" data-edit="select" data-creatable data-options="…">회사</th> <th data-sort data-range="month" data-label="귀속년월" data-field="accrualYm" data-edit="month">귀속년월</th> <th data-sort data-sum data-label="금액" data-field="amount" data-edit="number" data-dec="0">금액</th> <th data-col-off data-label="메모" data-field="memo" data-edit="text">메모</th> </tr></thead> <tbody> <tr class="row-clickable" data-id="1" data-modal-url="/demo/form?id=1"> <td data-raw="아이티큐브">아이티큐브</td> <!-- 표시와 정렬값이 다르면 data-raw 로 원시값 --> … </table>