라이브 데모
아래 표에 붙은 화면 코드는 이 페이지의 마크업 한 벌이 전부입니다. 화면 전용 JS 는 0줄입니다.
검색·코드필터·기간·정렬·서버페이징·합계·엑셀·컬럼(표시/너비/순서)·수정모드(엑셀식 범위선택·복사·붙여넣기·채우기)가 선언만으로 붙습니다.
해볼 것 → 헤더 클릭(정렬) · 수정 버튼(편집 모드) · 셀 드래그(범위 선택) · Ctrl/⌘+C(복사, 토스트로 뜸) ·
Ctrl/⌘+V(붙여넣기) · 채우기 핸들 드래그 · 컬럼 버튼(메모 열 켜기) · 행 클릭(상세 모달) · 돋보기(연결 화면 이동)
데모라 저장은 하지 않습니다. 수정모드에서 저장을 누르면 서버가 받은 내용을 검사만 하고 돌려줍니다
(허용 필드 화이트리스트 동작을 보기 위한 것 — 서버 연동 참고).
| 회사 | 담당자 | 제목 | 메모 | 귀속년월 | 기한 | 금액 | 수량 | 상태 | 연결 |
|---|---|---|---|---|---|---|---|---|---|
| 아이티큐브 | 김선규 | 검색 성능 개선 #200 | 2026-08 | 2026-03-31 | 200,000 | 9.00 | 작성중 | 연결 | |
| 아이티큐브 | 박하늘 | 통계 대시보드 #185 | 2026-08 | 2026-05-13 | 3,850,000 | 7.25 | 작성중 | 연결 | |
| 아이티큐브 | 박하늘 | 알림 발송 배치 #183 | 협의 중 — 금액 확정 전 | 2026-08 | 2026-02-09 | 950,000 | 2.00 | 진행중 | 미연결 |
| 아이티큐브 | 박하늘 | 관리자 권한 정리 #164 | 2026-08 | 2026-07-03 | 1,750,000 | 2.75 | 진행중 | 미연결 | |
| 아이티큐브 | 김선규 | 목록 화면 개편 #132 | 협의 중 — 금액 확정 전 | 2026-08 | 2026-02-27 | 3,800,000 | 10.00 | 보류 | 미연결 |
| 아이티큐브 | 정다인 | 리포트 내보내기 #79 | 2026-08 | 2026-05-26 | 3,250,000 | 5.50 | 보류 | 미연결 | |
| 아이티큐브 | 정다인 | 알림 발송 배치 #64 | 2026-08 | 2026-05-11 | 3,150,000 | 5.00 | 완료 | 미연결 | |
| 아이티큐브 | 박하늘 | 이미지 업로드 개선 #61 | 2026-08 | 2026-01-29 | 2,650,000 | 1.50 | 진행중 | 미연결 | |
| 아이티큐브 | 이승규 | 검색 성능 개선 #33 | 협의 중 — 금액 확정 전 | 2026-08 | 2026-06-09 | 3,250,000 | 9.25 | 작성중 | 미연결 |
| 아이티큐브 | 정다인 | 결제 모듈 연동 #237 | 협의 중 — 금액 확정 전 | 2026-07 | 2026-05-31 | 350,000 | 3.50 | 완료 | 미연결 |
이 표를 만든 코드
헤더 선언 한 줄이 그 열의 검색·필터·정렬·편집 방식을 전부 정합니다.
<table class="data-table" data-grid data-server data-batch-url="/demo/batch" data-total="53" 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>