데이터 그리드 React API

가져오기

import-grid.tsx

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

NuiGrid

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

NuiGrid: 속성
이름	타입	기본값	설명
`rows`prop	`readonly T[]`		데이터. 편집하면 해당 행이 교체되고 `onRowsChange`가 호출됩니다. 다음에 전달하는 `rows`가 편집 내용을 대체합니다.
`onRowsChange`콜백	`(rows: readonly T[]) => void`		편집이 확정될 때마다 편집 후의 행과 함께 호출됩니다.
`columns`prop	`NuiGridColumn<T>[]`		열 목록. `NuiGridColumn` 객체로 지정합니다.
`rowId`prop	`(row: T) => unknown`	`row.id ?? row`	선택과 추적에 사용하는 행의 키.
`label`prop	`string`		그리드의 접근 가능한 이름.
`selection`prop	`'none' \| 'single' \| 'multiple'`	`'none'`	행을 선택할 수 있는지, 몇 개까지 선택할 수 있는지.
`selected` `defaultSelected` `onSelectedChange`상태	`unknown[]`	`[]`	선택된 행의 키 목록.
`sort` `defaultSort` `onSortChange`상태	`NuiGridSort[]`	`[]`	정렬. `{ column, direction }` 객체로 지정하며, 앞에 있는 것이 먼저 적용됩니다.
`filters` `defaultFilters` `onFiltersChange`상태	`Record<string, NuiGridFilter>`	`{}`	열 id별 필터. 연산자와 값으로 지정합니다.
`search` `defaultSearch` `onSearchChange`상태	`string`	`''`	한 행에 모두 나타나야 하는 단어.
`pageSize` `defaultPageSize` `onPageSizeChange`상태	`number`	`0`	페이지당 행 수. 0이면 스크롤되는 하나의 목록이 됩니다.
`page` `defaultPage` `onPageChange`상태	`number`	`0`	표시할 페이지. 0부터 셉니다.
`pageSizes`prop	`number[]`	`[10, 25, 50, 100]`	페이저에 표시되는 선택지.
`virtual`prop	`boolean \| 'auto'`	`'auto'`	보이는 행만 렌더링합니다: 항상, 안 함, 또는 페이지를 나누지 않을 때 100행을 넘으면 켜지는 `auto`.
`height`prop	`string`		그리드의 높이를 제한하는 CSS 길이. 그리드 안에서 스크롤됩니다.
`columnState` `defaultColumnState` `onColumnStateChange`상태	`NuiGridColumnState[]`	`[]`	저장하고 복원할 수 있는 각 열의 너비, 순서, 고정, 표시 여부.
`mode`prop	`'client' \| 'server'`	`'client'`	`server`는 받은 행을 그대로 표시하고, 정렬, 필터링, 페이지 나누기는 직접 처리하도록 맡깁니다.
`total`prop	`number`		서버에 있는 행의 수.
`loading`prop	`boolean`	`false`	진행 표시줄을 보여 주고, 행이 없는 동안에는 자리 표시자 행을 보여 줍니다.
`locale`prop	`string`	`'en-US'`	숫자와 날짜의 서식을 지정하고 입력된 숫자를 읽는 데 사용하는 로케일.
`labels`prop	`Partial<NuiGridLabels>`		그리드가 표시하거나 읽어 주는 모든 텍스트. 번역할 때 사용합니다.
`corners`prop	`NuiCorners`		모서리 모양: `round`, `squircle`, `bevel`, `scoop`, `notch`, `square` 중 하나.
`radius`prop	`NuiRadius`		모서리 크기: `none`, `small`, `medium`, `large`, `full` 중 하나.
`density`prop	`NuiDensity`		차지하는 공간: `compact`, `regular`, `roomy` 중 하나.
`groupBy`prop	`string[]`	`[]`	행을 그룹화할 열. 바깥쪽부터 지정합니다.
`collapsed` `defaultCollapsed` `onCollapsedChange`상태	`string[]`	`[]`	닫힌 그룹의 키. 그룹은 처음에 열려 있습니다.
`getChildren`prop	`(row: T) => T[] \| undefined`		행의 자식 행. 지정하면 그리드가 트리 데이터를 보여 줍니다.
`expanded` `defaultExpanded` `onExpandedChange`상태	`unknown[]`	`[]`	트리 데이터에서 열린 행의 키. 행은 처음에 닫혀 있습니다.
`details` `defaultDetails` `onDetailsChange`상태	`unknown[]`	`[]`	세부 정보가 열린 행의 키.
`totals, flash`prop	`boolean`	`false`	필터링된 모든 행을 집계한 행, 그리고 텍스트가 바뀔 때 반짝이는 셀. 셀 반짝임은 계속 유지되는 `rowId`가 있는 행에서 동작합니다.
`layout`prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list`는 행을 카드로 보여 주고, `auto`는 좁은 화면에서만 그렇게 합니다.
`toolbar`prop	`boolean \| 'auto'`	`'auto'`	행을 정렬, 필터링하고 모두 선택하는 툴바: 항상, 안 함, 또는 카드일 때 나타나는 `auto`.
`renderEmpty`렌더 prop	`(filtered: boolean) => ReactNode`		행이 없을 때 표시되는 내용입니다. 필터 때문에 행이 숨겨졌는지 전달받습니다.
`renderDetail`렌더 prop	`(row: T) => ReactNode`		행의 세부 정보로, 열면 그 행 아래에 표시됩니다. 그리드에 토글 열이 추가됩니다.
`onRowActivate`콜백	`(row: T) => void`		Enter 키나 더블클릭으로 연 행과 함께 호출됩니다.
`onCellEdit`콜백	`(edit: NuiGridEdit<T>) => void`		확정된 편집마다 그 편집과 함께 호출됩니다.
`onQueryChange`콜백	`(query: NuiGridQuery) => void`		정렬, 필터, 검색, 페이지가 바뀔 때마다, 그리고 처음에 한 번 이들과 함께 호출됩니다.
`ref`prop	`Ref<NuiGridHandle>`		그리드의 `ref`로 쓸 수 있는 기능입니다. 내보내기, 인쇄, 포커스를 다룹니다.
`exportXlsx, print`메서드	`(options?) => Blob, () => void`		각각 필터링하고 정렬한 행을 스프레드시트로 내보내고, 모든 행을 인쇄합니다.
`exportCsv`메서드	`(options?) => string`		필터링하고 정렬한 행을 보이는 열만 CSV로 반환합니다.
`expandAll`메서드	`(open?: boolean) => void`		모든 그룹과 자식이 있는 모든 행을 열거나, 모두 닫습니다.
`focusCell`메서드	`(row: number, col: number) => void`		셀에 포커스를 줍니다. 행 `-1`은 헤더입니다.
`clearFilters`메서드	`() => void`		모든 필터와 검색을 지웁니다.
`fit`메서드	`(id: string) => void`		열 너비를 렌더링된 셀 중 가장 넓은 셀에 맞춥니다.

상태는 React의 폼 입력 요소와 같은 방식으로 동작합니다. 값을 전달하고 on…Change 콜백에서 갱신하거나, default… 값을 전달해 컴포넌트가 보관하게 합니다.

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

NuiGridColumn

열 하나입니다. Angular 열의 모든 속성을 받으며(id와 header만 필수입니다), 열을 그리는 아래 두 속성도 받습니다.

NuiGridColumn: 속성
이름	타입	기본값	설명
`renderCell`렌더 prop	`({ row, value, text, column }) => ReactNode`		열의 셀을 직접 그립니다. 행, 그 값, 텍스트를 받습니다.
`renderHeader`렌더 prop	`(column) => ReactNode`		열의 헤더를 직접 그립니다. 열의 이름은 여전히 `header`가 정합니다.