데이터 그리드 API

가져오기

import-grid.ts

import { NuiGrid, NuiGridCell, type NuiGridColumn } from '@needless-ui/angular/grid';

NuiGrid

네이티브 표로 만든 데이터 그리드입니다.

셀렉터: nui-grid

NuiGrid: 속성
이름	타입	기본값	설명
`rows`양방향	`readonly T[]`		데이터. 편집하면 행이 교체되므로 `[(rows)]`로 바인딩합니다.
`columns`입력	`NuiGridColumn<T>[]`		열 목록. `NuiGridColumn` 객체로 지정합니다.
`rowId`입력	`(row: T) => unknown`	`row.id ?? row`	선택과 추적에 사용하는 행의 키.
`label`입력	`string`		그리드의 접근 가능한 이름.
`selection`입력	`'none' \| 'single' \| 'multiple'`	`'none'`	행을 선택할 수 있는지, 몇 개까지 선택할 수 있는지.
`selected`양방향	`unknown[]`	`[]`	선택된 행의 키 목록.
`sort`양방향	`NuiGridSort[]`	`[]`	정렬. `{ column, direction }` 객체로 지정하며, 앞에 있는 것이 먼저 적용됩니다.
`filters`양방향	`Record<string, NuiGridFilter>`	`{}`	열 id별 필터. 연산자와 값으로 지정합니다.
`search`양방향	`string`	`''`	한 행에 모두 나타나야 하는 단어.
`pageSize`양방향	`number`	`0`	페이지당 행 수. 0이면 스크롤되는 하나의 목록이 됩니다.
`page`양방향	`number`	`0`	표시할 페이지. 0부터 셉니다.
`pageSizes`입력	`number[]`	`[10, 25, 50, 100]`	페이저에 표시되는 선택지.
`virtual`입력	`boolean \| 'auto'`	`'auto'`	보이는 행만 렌더링합니다: 항상, 안 함, 또는 페이지를 나누지 않을 때 100행을 넘으면 켜지는 `auto`.
`height`입력	`string`		그리드의 높이를 제한하는 CSS 길이. 그리드 안에서 스크롤됩니다.
`columnState`양방향	`NuiGridColumnState[]`	`[]`	저장하고 복원할 수 있는 각 열의 너비, 순서, 고정, 표시 여부.
`mode`입력	`'client' \| 'server'`	`'client'`	`server`는 받은 행을 그대로 표시하고, 정렬, 필터링, 페이지 나누기는 직접 처리하도록 맡깁니다.
`total`입력	`number`		서버에 있는 행의 수.
`loading`입력	`boolean`	`false`	진행 표시줄을 보여 주고, 행이 없는 동안에는 자리 표시자 행을 보여 줍니다.
`locale`입력	`string`	`LOCALE_ID`	숫자와 날짜의 서식을 지정하고 입력된 숫자를 읽는 데 사용하는 로케일.
`labels`입력	`Partial<NuiGridLabels>`		그리드가 표시하거나 읽어 주는 모든 텍스트. 번역할 때 사용합니다.
`corners`입력	`NuiCorners`		모서리 모양: `round`, `squircle`, `bevel`, `scoop`, `notch`, `square` 중 하나.
`radius`입력	`NuiRadius`		모서리 크기: `none`, `small`, `medium`, `large`, `full` 중 하나.
`density`입력	`NuiDensity`		차지하는 공간: `compact`, `regular`, `roomy` 중 하나.
`rowActivate`출력	`T`		Enter 키나 더블클릭으로 연 행을 내보냅니다.
`cellEdit`출력	`NuiGridEdit<T>`		확정된 편집을 하나씩 내보냅니다.
`queryChange`출력	`NuiGridQuery`		정렬, 필터, 검색, 페이지가 바뀔 때마다 이를 내보냅니다.
`exportCsv`메서드	`(options?) => string`		필터링하고 정렬한 행을 보이는 열만 CSV로 반환합니다.
`focusCell`메서드	`(row: number, col: number) => void`		셀에 포커스를 줍니다. 행 `-1`은 헤더입니다.
`clearFilters`메서드	`() => void`		모든 필터와 검색을 지웁니다.

설정하지 않은 커스터마이징 입력은 가장 가까운 data-nui-* 속성을 따릅니다. 자세한 내용은 커스터마이징 가이드를 참고하시기 바랍니다.

NuiGridColumn

열 하나입니다. id와 header만 필수입니다.

NuiGridColumn: 속성
이름	타입	기본값	설명
`id`속성	`string`		고유한 값. 정렬, 필터, 열 상태에서 키로 쓰입니다.
`header`속성	`string`		헤더 텍스트.
`value`속성	`keyof T \| ((row: T) => V)`		행의 키 또는 행을 받는 함수. 기본값은 `row[id]`입니다.
`type`속성	`'text' \| 'number' \| 'date' \| 'boolean' \| 'enum'`	`'text'`	맞춤, 정렬, 필터, 편집기를 결정합니다.
`format`속성	`Intl options \| ((value, row) => string)`		숫자와 날짜에 쓰는 `Intl` 옵션, 또는 텍스트를 만드는 함수.
`options`속성	`NuiOption<V>[]`		`enum` 열의 선택지. `NuiOption` 객체로 지정합니다.
`width, minWidth, maxWidth`속성	`number`		픽셀 단위.
`flex`속성	`number`		남는 공간을 다른 `flex` 열과 나눠 가집니다.
`align`속성	`'start' \| 'center' \| 'end'`		기본값은 타입에 따라 다르며, 숫자와 날짜는 끝에 맞춥니다.
`pinned, hidden`속성	`'start' \| 'end', boolean`		열의 초기 고정 상태와 표시 여부.
`sortable, filterable, resizable, reorderable, hideable`속성	`boolean`	`true`	각각 `false`로 끌 수 있습니다.
`compare`속성	`(a: V, b: V) => number`		사용자 지정 정렬.
`editable, validate`속성	`boolean \| ((row) => boolean), (value, row) => string \| null`		셀을 편집할 수 있는지 여부와, 값이 올바르지 않을 때의 메시지.
`set`속성	`(row: T, value: V) => T`		편집된 행을 만듭니다. 기본값은 새 값을 넣은 복사본입니다.

NuiGridCell

열의 셀을 그립니다. 컨텍스트에는 행, 그 값, 텍스트가 들어 있습니다.

셀렉터: ng-template[nuiGridCell]

NuiGridCell: 속성
이름	타입	기본값	설명
`nuiGridCell`입력	`string`		열의 id.

NuiGridHeader

열의 헤더를 그립니다.

셀렉터: ng-template[nuiGridHeader]

NuiGridHeader: 속성
이름	타입	기본값	설명
`nuiGridHeader`입력	`string`		열의 id.

NuiGridEmpty

행이 없을 때 표시되는 내용입니다. 컨텍스트로 필터 때문에 행이 숨겨졌는지 알 수 있습니다.

셀렉터: ng-template[nuiGridEmpty]