@operato/data-grist 9.0.1 → 9.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/src/editors/ox-grist-editor-color.js +14 -1
- package/dist/src/editors/ox-grist-editor-color.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/docs/USER_GUIDE.md +144 -0
- package/docs/configuration/README.md +68 -0
- package/docs/configuration/columns.md +391 -0
- package/docs/configuration/editors.md +53 -0
- package/docs/configuration/events.md +44 -0
- package/docs/configuration/i18n.md +40 -0
- package/docs/configuration/options.md +100 -0
- package/docs/configuration/theme.md +39 -0
- package/package.json +3 -3
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# 다국어(i18n) 적용
|
|
2
|
+
|
|
3
|
+
data-grist는 다국어 UI를 지원하며, 번역 파일을 통해 다양한 언어로 손쉽게 전환할 수 있습니다.
|
|
4
|
+
|
|
5
|
+
## 1. 번역 파일 구조
|
|
6
|
+
|
|
7
|
+
- `translations/ko.json`, `translations/en.json` 등 JSON 파일로 관리
|
|
8
|
+
|
|
9
|
+
```json
|
|
10
|
+
{
|
|
11
|
+
"header.name": "이름",
|
|
12
|
+
"header.age": "나이",
|
|
13
|
+
"button.save": "저장"
|
|
14
|
+
}
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## 2. 언어 적용 방법
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
import ko from './translations/ko.json'
|
|
21
|
+
dataGrist.setLocale('ko', ko)
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## 3. 컬럼/버튼 등에서 번역키 사용
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
{
|
|
28
|
+
header: 'header.name' // 번역키 지정
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 4. 실전 팁
|
|
33
|
+
|
|
34
|
+
- 언어 변경 시 setLocale을 호출하면 즉시 UI가 갱신됨
|
|
35
|
+
- 번역키 네이밍은 일관성 있게 관리
|
|
36
|
+
|
|
37
|
+
## 5. 참고
|
|
38
|
+
|
|
39
|
+
- grist-editor의 i18n-label 컬럼 타입을 활용하면 다국어 라벨 입력도 가능
|
|
40
|
+
- 공식 문서 및 demo 폴더에서 다양한 다국어 예시를 참고하세요.
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# 그리드 옵션 (options)
|
|
2
|
+
|
|
3
|
+
data-grist는 다양한 옵션을 통해 그리드의 동작, UI, 데이터 처리 방식을 세밀하게 제어할 수 있습니다.
|
|
4
|
+
|
|
5
|
+
## 1. 그리드 전체 옵션
|
|
6
|
+
|
|
7
|
+
| 옵션명 | 타입 | 기본값 | 설명 |
|
|
8
|
+
| ------------ | -------------- | --------- | ---------------------------------------- |
|
|
9
|
+
| data | Array | [] | 표시할 데이터 배열 |
|
|
10
|
+
| columns | Array | [] | 컬럼 정의 배열 |
|
|
11
|
+
| options | Object | {} | 그리드 동작/스타일/기능 옵션 |
|
|
12
|
+
| editable | Boolean | false | 전체 편집 가능 여부 |
|
|
13
|
+
| selectable | Boolean/String | false | 행 선택 기능 (`true`, "multi", "single") |
|
|
14
|
+
| pageable | Boolean | false | 페이징 기능 |
|
|
15
|
+
| pageSize | Number | 20 | 페이지당 행 수 |
|
|
16
|
+
| rowHeight | Number | 32 | 행 높이(px) |
|
|
17
|
+
| headerHeight | Number | 32 | 헤더 높이(px) |
|
|
18
|
+
| theme | String | "default" | 테마명 |
|
|
19
|
+
| loading | Boolean | false | 로딩 상태 표시 |
|
|
20
|
+
| emptyMessage | String | "No data" | 데이터 없을 때 표시할 메시지 |
|
|
21
|
+
|
|
22
|
+
## 2. 동작/기능 옵션
|
|
23
|
+
|
|
24
|
+
| 옵션명 | 타입 | 설명 |
|
|
25
|
+
| ----------- | -------- | ----------------------- |
|
|
26
|
+
| sortable | Boolean | 전체 정렬 활성화 |
|
|
27
|
+
| filterable | Boolean | 전체 필터 활성화 |
|
|
28
|
+
| multiSort | Boolean | 다중 컬럼 정렬 |
|
|
29
|
+
| draggable | Boolean | 행 드래그/순서 변경 |
|
|
30
|
+
| copyable | Boolean | 셀 복사/붙여넣기 |
|
|
31
|
+
| rowNumber | Boolean | 행 번호 표시 |
|
|
32
|
+
| rowClass | Function | 행별 커스텀 클래스 지정 |
|
|
33
|
+
| cellClass | Function | 셀별 커스텀 클래스 지정 |
|
|
34
|
+
| rowStyle | Function | 행별 스타일 지정 |
|
|
35
|
+
| cellStyle | Function | 셀별 스타일 지정 |
|
|
36
|
+
| onRowClick | Function | 행 클릭 이벤트 핸들러 |
|
|
37
|
+
| onCellClick | Function | 셀 클릭 이벤트 핸들러 |
|
|
38
|
+
| onEditStart | Function | 셀 편집 시작 이벤트 |
|
|
39
|
+
| onEditEnd | Function | 셀 편집 종료 이벤트 |
|
|
40
|
+
|
|
41
|
+
## 3. 고급/확장 옵션
|
|
42
|
+
|
|
43
|
+
| 옵션명 | 타입 | 설명 |
|
|
44
|
+
| ------------- | ------------- | --------------------------------- |
|
|
45
|
+
| virtualScroll | Boolean | 가상 스크롤(대용량 데이터 최적화) |
|
|
46
|
+
| groupable | Boolean | 그룹핑 기능 |
|
|
47
|
+
| summary | Object | 합계/평균 등 요약행 설정 |
|
|
48
|
+
| exportable | Boolean | 엑셀 등 내보내기 기능 |
|
|
49
|
+
| importable | Boolean | 엑셀 등 가져오기 기능 |
|
|
50
|
+
| contextMenu | Boolean/Array | 우클릭 컨텍스트 메뉴 |
|
|
51
|
+
| keyboard | Boolean | 키보드 네비게이션 지원 |
|
|
52
|
+
| autoFit | Boolean | 컬럼 자동 너비 맞춤 |
|
|
53
|
+
| rowSpan | Boolean | 행 병합 |
|
|
54
|
+
| colSpan | Boolean | 컬럼 병합 |
|
|
55
|
+
|
|
56
|
+
## 4. 예시: 전체 옵션 적용
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
const options = {
|
|
60
|
+
sortable: true,
|
|
61
|
+
filterable: true,
|
|
62
|
+
selectable: 'multi',
|
|
63
|
+
pageable: true,
|
|
64
|
+
pageSize: 50,
|
|
65
|
+
rowHeight: 36,
|
|
66
|
+
headerHeight: 40,
|
|
67
|
+
theme: 'dark',
|
|
68
|
+
loading: false,
|
|
69
|
+
emptyMessage: '데이터가 없습니다',
|
|
70
|
+
virtualScroll: true,
|
|
71
|
+
groupable: true,
|
|
72
|
+
summary: { sum: true },
|
|
73
|
+
exportable: true,
|
|
74
|
+
importable: true,
|
|
75
|
+
contextMenu: true,
|
|
76
|
+
keyboard: true,
|
|
77
|
+
autoFit: true
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<data-grist .data="${data}" .columns="${columns}" .options="${options}"></data-grist>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## 5. 실무 팁
|
|
88
|
+
|
|
89
|
+
- 컬럼별 옵션은 `columns` 배열 내 각 컬럼 객체에 직접 지정
|
|
90
|
+
- 그리드 전체 옵션은 `options` 객체로 전달
|
|
91
|
+
- 이벤트 핸들러는 속성 또는 addEventListener로 등록 가능
|
|
92
|
+
- 스타일/테마는 CSS 변수 또는 theme 옵션으로 커스터마이즈
|
|
93
|
+
- 대용량 데이터는 `virtualScroll` 옵션을 적극 활용
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## 6. 참고
|
|
98
|
+
|
|
99
|
+
- 더 많은 고급 옵션, 커스텀 렌더러/에디터, 이벤트, 스타일 확장 등은 공식 문서 및 소스코드를 참고하세요.
|
|
100
|
+
- 실사용 예제와 Storybook, demo 폴더의 샘플을 참고하면 빠르게 익힐 수 있습니다.
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# 테마/스타일 커스터마이징
|
|
2
|
+
|
|
3
|
+
data-grist는 CSS 변수와 테마 시스템을 통해 손쉽게 스타일을 변경할 수 있습니다.
|
|
4
|
+
|
|
5
|
+
## 1. 주요 CSS 변수
|
|
6
|
+
|
|
7
|
+
| 변수명 | 설명 | 기본값 |
|
|
8
|
+
| -------------------- | ------------- | ------- |
|
|
9
|
+
| --grist-row-height | 행 높이 | 32px |
|
|
10
|
+
| --grist-header-bg | 헤더 배경색 | #f5f5f5 |
|
|
11
|
+
| --grist-border-color | 테이블 테두리 | #e0e0e0 |
|
|
12
|
+
| --grist-font-size | 폰트 크기 | 14px |
|
|
13
|
+
| --grist-selected-bg | 선택 배경색 | #e3f2fd |
|
|
14
|
+
|
|
15
|
+
## 2. 테마 적용법
|
|
16
|
+
|
|
17
|
+
- `theme` 옵션으로 내장 테마(`default`, `dark` 등) 지정 가능
|
|
18
|
+
- CSS 변수로 세부 스타일 오버라이드 가능
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<data-grist theme="dark"></data-grist>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```css
|
|
25
|
+
data-grist {
|
|
26
|
+
--grist-row-height: 40px;
|
|
27
|
+
--grist-header-bg: #e0e0e0;
|
|
28
|
+
--grist-font-size: 16px;
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 3. 실전 팁
|
|
33
|
+
|
|
34
|
+
- 프로젝트 전역 스타일에 CSS 변수를 선언하면 모든 그리드에 일괄 적용
|
|
35
|
+
- 컬럼별로 `cellClass`, `cellStyle` 옵션을 활용해 개별 셀 스타일 지정 가능
|
|
36
|
+
|
|
37
|
+
## 4. 참고
|
|
38
|
+
|
|
39
|
+
- 더 많은 CSS 변수와 테마 확장법은 공식 문서 및 소스코드를 참고하세요.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@operato/data-grist",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.7",
|
|
4
4
|
"description": "User interface for grid (desktop) and list (mobile)",
|
|
5
5
|
"author": "heartyoh",
|
|
6
6
|
"type": "module",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"dependencies": {
|
|
69
69
|
"@material/web": "^2.0.0",
|
|
70
70
|
"@operato/headroom": "^9.0.1",
|
|
71
|
-
"@operato/input": "^9.0.
|
|
71
|
+
"@operato/input": "^9.0.5",
|
|
72
72
|
"@operato/p13n": "^9.0.1",
|
|
73
73
|
"@operato/popup": "^9.0.1",
|
|
74
74
|
"@operato/pull-to-refresh": "^9.0.1",
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"prettier --write"
|
|
114
114
|
]
|
|
115
115
|
},
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "b573b720e0a7ddf3b59a4c4db014e3609f078eae"
|
|
117
117
|
}
|