라이브 데모
아래 표에 붙은 화면 코드는 이 페이지의 마크업 한 벌이 전부입니다. 화면 전용 JS 는 0줄입니다.
검색·코드필터·기간·정렬·서버페이징·합계·엑셀·컬럼(표시/너비/순서)·수정모드(엑셀식 범위선택·복사·붙여넣기·채우기)가 선언만으로 붙습니다.
해볼 것 → 헤더 클릭(정렬) · 수정 버튼(편집 모드) · 셀 드래그(범위 선택) · Ctrl/⌘+C(복사, 토스트로 뜸) ·
Ctrl/⌘+V(붙여넣기) · 채우기 핸들 드래그 · 컬럼 버튼(메모 열 켜기) · 행 클릭(상세 모달) · 돋보기(연결 화면 이동)
데모라 저장은 하지 않습니다. 수정모드에서 저장을 누르면 서버가 받은 내용을 검사만 하고 돌려줍니다
(허용 필드 화이트리스트 동작을 보기 위한 것 — 서버 연동 참고).
| 회사 | 담당자 | 제목 | 메모 | 귀속년월 | 기한 | 금액 | 수량 | 상태 | 연결 |
|---|---|---|---|---|---|---|---|---|---|
| 임포트 | 정다인 | 알림 발송 배치 #170 | 2026-08 | 2026-07-16 | 800,000 | 2.75 | 완료 | 연결 | |
| 임포트 | 박하늘 | 검색 성능 개선 #159 | 협의 중 — 금액 확정 전 | 2026-08 | 2026-04-13 | 400,000 | 9.00 | 진행중 | 미연결 |
| 임포트 | 박하늘 | 관리자 권한 정리 #118 | 2026-08 | 2026-06-21 | 3,150,000 | 4.25 | 진행중 | 미연결 | |
| 임포트 | 정다인 | 검색 성능 개선 #181 | 2026-07 | 2026-06-07 | 450,000 | 1.75 | 작성중 | 미연결 | |
| 임포트 | 정다인 | 검색 성능 개선 #173 | 2026-07 | 2026-05-31 | 2,400,000 | 5.00 | 진행중 | 미연결 | |
| 임포트 | 이승규 | 이미지 업로드 개선 #113 | 2026-07 | 2026-08-06 | 3,500,000 | 8.75 | 완료 | 미연결 | |
| 임포트 | 이범규 | 검색 성능 개선 #14 | 2026-07 | 2026-06-25 | 1,600,000 | 6.75 | 진행중 | 미연결 | |
| 임포트 | 박하늘 | 결제 모듈 연동 #2 | 2026-07 | 2026-06-28 | 1,350,000 | 9.75 | 작성중 | 미연결 | |
| 임포트 | 정다인 | 목록 화면 개편 #212 | 2026-06 | 2026-05-01 | 600,000 | 7.25 | 작성중 | 미연결 | |
| 임포트 | 이승규 | 관리자 권한 정리 #209 | 2026-06 | 2026-02-28 | 100,000 | 6.25 | 보류 | 미연결 |
이 표를 만든 코드
헤더 선언 한 줄이 그 열의 검색·필터·정렬·편집 방식을 전부 정합니다.
<table class="data-table" data-grid data-server data-batch-url="/demo/batch" data-total="46" 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>