Tabular
@sectile/tabular는 표 형식 데이터의 query, 선택, cursor, 편집과 계층 상태를 계산하는 렌더러 독립 core입니다. 화면에는 필요한 상호작용 밀도에 따라 DataTable, DataGrid, DataTreeGrid 중 하나를 사용합니다.
sh
pnpm add @sectile/tabular먼저 profile 선택하기
| 질문 | 선택 |
|---|---|
| 행을 읽고 비교하며 정렬·필터·선택하는가? | DataTable |
| 모든 셀을 방향키로 이동하고 편집하는가? | DataGrid |
| grid에 부모·자식 branch도 필요한가? | DataTreeGrid |
하나의 데이터 계약에서 시작합니다
공통 기능은 그대로 두고, 화면에서 필요한 탐색 단위에 맞춰 상호작용 프로필만 고릅니다.
모든 프로필의 공통 기반
- 정체성
- row · column · cell · group ID
- Schema
- columns · nested headers · capabilities
- 질의
- sort · filter · group · aggregate · pivot
- 소스
- request · source · view revision
- 접근 범위
- page · window · visible counts
- 선택
- explicit row · all-matching
- 열 상태
- order · hidden · pinned start/end
- 소유권과 안전
- controlled slices · limits · atomic errors
탐색 단위 선택
선택한 프로필
DataTable
행을 읽고 비교하는 표
이 프로필이 책임지는 기능
- native table과 form 의미
- 정렬·필터·행 선택
- 그룹 행 펼치기
- 편집 commit 의도
DataTable
Native table 의미, 검색·정렬, checkbox 선택과 form 연결이 중심입니다.
읽고 비교하는 표검색·정렬·선택을 직접 사용하고 같은 UI의 구현을 환경별로 확인합니다.
사용자 목록소속, 역할과 계정 상태를 한눈에 확인 · 8명 표시
요약
검색 · 정렬 · 선택이 하나의 projection을 공유합니다.<script setup lang="ts">
import {
createDataTableComponents,
useDataTable,
} from '@sectile/vue/data-table'
const table = useDataTable({
source: resolveUsers,
})
const DataTable = createDataTableComponents(table)
</script>
<template>
<DataTable.Provider>
<DataTable.Root>
<DataTable.Caption>사용자</DataTable.Caption>
<DataTable.Header><DataTable.HeaderRow>
<DataTable.ColumnHeader column="name">
<DataTable.SortTrigger column="name">이름</DataTable.SortTrigger>
</DataTable.ColumnHeader>
<DataTable.ColumnHeader column="team">팀</DataTable.ColumnHeader>
<DataTable.ColumnHeader column="status">상태</DataTable.ColumnHeader>
</DataTable.HeaderRow></DataTable.Header>
<DataTable.Body v-slot="{ row }">
<DataTable.Cell column="name">{{ row.cells.name }}</DataTable.Cell>
<DataTable.Cell column="team">{{ row.cells.team }}</DataTable.Cell>
<DataTable.Cell column="status">{{ row.cells.status }}</DataTable.Cell>
</DataTable.Body>
</DataTable.Root>
</DataTable.Provider>
</template>DataGrid
2차원 cursor, roving focus, edit/commit/cancel과 cursor 복구를 더합니다.
셀 단위 작업 공간2차원 cursor와 편집 가능한 셀을 실제 grid에서 사용합니다.
출시 준비 보드셀을 이동하며 릴리스 항목을 바로 편집 · 8개 항목
요약
{"cursor":null,"selected":{"kind":"explicit-rows","rowIDs":[]}}<script setup lang="ts">
import { createDataGridComponents, useDataGrid } from '@sectile/vue/data-grid'
const grid = useDataGrid({ source: resolveWork })
const DataGrid = createDataGridComponents(grid)
</script>
<template><DataGrid.Provider><DataGrid.Root aria-label="출시 준비">
<DataGrid.Header><DataGrid.HeaderRow><DataGrid.ColumnHeader column="task">작업</DataGrid.ColumnHeader><DataGrid.ColumnHeader column="owner">담당자</DataGrid.ColumnHeader><DataGrid.ColumnHeader column="status">상태</DataGrid.ColumnHeader></DataGrid.HeaderRow></DataGrid.Header>
<DataGrid.Body v-slot="{ row }"><DataGrid.Cell column="task">{{ row.cells.task }}</DataGrid.Cell><DataGrid.Cell column="owner">{{ row.cells.owner }}</DataGrid.Cell><DataGrid.Cell column="status">{{ row.cells.status }}</DataGrid.Cell></DataGrid.Body>
</DataGrid.Root></DataGrid.Provider></template>DataTreeGrid
DataGrid에 expansion, level·position metadata와 부모 context를 더합니다.
계층형 작업 공간부모 context와 leaf 셀을 같은 treegrid에서 탐색합니다.
서비스 소유권도메인과 서비스의 계층을 한 grid에서 관리 · 9개 서비스
요약
{"cursor":null,"edit":"navigation","visibleRows":0}<script setup lang="ts">
import { createDataTreeGridComponents, useDataTreeGrid } from '@sectile/vue/data-tree-grid'
const tree = useDataTreeGrid({ source: resolveServices })
const DataTreeGrid = createDataTreeGridComponents(tree)
</script>
<template><DataTreeGrid.Provider><DataTreeGrid.Root aria-label="서비스 소유권">
<DataTreeGrid.Header><DataTreeGrid.HeaderRow><DataTreeGrid.ColumnHeader column="service">서비스</DataTreeGrid.ColumnHeader><DataTreeGrid.ColumnHeader column="owner">담당자</DataTreeGrid.ColumnHeader><DataTreeGrid.ColumnHeader column="status">상태</DataTreeGrid.ColumnHeader></DataTreeGrid.HeaderRow></DataTreeGrid.Header>
<DataTreeGrid.Body v-slot="{ row }"><DataTreeGrid.Cell column="service"><DataTreeGrid.RowDisclosure v-if="row.kind === 'group'" />{{ row.cells.service }}</DataTreeGrid.Cell><DataTreeGrid.Cell column="owner">{{ row.cells.owner }}</DataTreeGrid.Cell><DataTreeGrid.Cell column="status">{{ row.cells.status }}</DataTreeGrid.Cell></DataTreeGrid.Body>
</DataTreeGrid.Root></DataTreeGrid.Provider></template>사용할 계층 선택하기
| 필요한 범위 | 설치 | import |
|---|---|---|
| 상태·query·projection 계산 | @sectile/tabular | @sectile/tabular/data-* |
| 기존 HTML에 연결 | @sectile/dom @sectile/tabular | @sectile/dom/tabular |
| Vue compound component | @sectile/vue @sectile/tabular vue | @sectile/vue/data-table, @sectile/vue/data-grid, @sectile/vue/data-tree-grid |
@sectile/tabular는 DOM, Vue, terminal을 알지 않습니다. @sectile/dom과 @sectile/vue에서는 optional peer dependency이므로 Tabular subpath를 사용할 때만 함께 설치합니다. Tabular에는 terminal host를 제공하지 않습니다.
각 예제의 코드 탭은 동일한 기능을 Vue·DOM·Core로 보여줍니다. 먼저 원하는 동작을 확인한 뒤 실제 환경의 코드를 선택하세요.
다음으로 읽을 문서
| 하려는 일 | 문서 |
|---|---|
| ID, query, selection, revision 이해 | 공통 계약 |
| 서버 정렬·필터·페이지, loading, retry | 비동기 source |
| 기존 element와 event 연결 | DOM 연결 |
| typed component, Provider, slot, SSR | Vue 연결 |
| 큰 view만 선택적으로 windowing | 가상화 |
책임 경계
Tabular는 같은 event와 state에 대해 결정적인 다음 state, projection과 command를 만듭니다. 응용 프로그램은 network, cache, 저장, loading·empty·error UI를 소유합니다. DOM/Vue host는 element, focus, form, 측정과 scroll을 소유합니다. 이 경계는 공통 계약과 비동기 source에서 실제 동작과 함께 설명합니다.
공개 subpath
| 경로 | 책임 |
|---|---|
/model | ID, immutable model, controlled ownership, limit |
/query | filter, sort, group, aggregate, pivot descriptor |
/source | request/response, page/window, client source |
/data-table | 읽기 중심 table controller |
/data-grid | 셀 중심 grid controller |
/data-tree-grid | 계층형 grid controller |
/virtual | 소비자가 설치한 @sectile/virtual과 조합하는 선택적 adapter |