@noraent/nora-datagrid 1.1.0-beta.30 → 1.1.0-beta.32

package/README.md

@@ -94,6 +94,63 @@ const gridTheme = createTheme({
 
 `Row.selected.background`을 생략하면 `palette.primary.main`에 10% 투명도를 적용합니다. `primary.main`에는 HEX뿐 아니라 `var(--grid-primary)` 같은 CSS 색상 표현식도 사용할 수 있습니다.
 
+### 컬럼 크기 설정
+
+고정 너비와 반응형 flex 컬럼을 함께 사용할 수 있습니다. `width`, `minWidth`, `maxWidth`의 단위는 px입니다.
+
+```tsx
+const columns = [
+  { fieldId: "id", fieldName: "ID", width: 100 },
+  { fieldId: "name", fieldName: "이름", flex: 1, minWidth: 120 },
+  { fieldId: "description", fieldName: "설명", flex: 2, minWidth: 160, maxWidth: 500 },
+];
+```
+
+Grid 최초 렌더링 시 전체 폭 또는 콘텐츠에 맞추려면 `autoSizeStrategy`를 사용합니다.
+
+```tsx
+<DataGrid
+  columns={columns}
+  dataSource={rows}
+  autoSizeStrategy={{ type: "fitGridWidth", defaultMinWidth: 80 }}
+/>
+
+<DataGrid
+  columns={columns}
+  dataSource={rows}
+  autoSizeStrategy={{
+    type: "fitCellContents",
+    includeHeader: true,
+    scaleUpToFitGridWidth: true,
+  }}
+/>
+```
+
+원하는 시점에 API로 다시 계산할 수도 있습니다.
+
+```ts
+const gridRef = useGridApiRef();
+
+gridRef.current.sizeColumnsToFit({ defaultMinWidth: 80 });
+gridRef.current.autoSizeColumns(["name", "description"], {
+  includeHeader: true,
+  scaleUpToFitGridWidth: true,
+});
+```
+
+`renderCell`이 문자열이 아닌 커스텀 UI를 반환한다면 측정에 사용할 값을 `getAutoSizeValue`로 지정할 수 있습니다.
+
+```ts
+{
+  fieldId: "status",
+  fieldName: "상태",
+  renderCell: ({ value }) => <StatusChip value={value} />,
+  getAutoSizeValue: ({ value }) => String(value),
+}
+```
+
+사용자가 flex 컬럼의 resize handle을 드래그하면 해당 컬럼은 고정 너비 컬럼으로 전환됩니다. `suppressSizeToFit: true`인 컬럼은 `fitGridWidth` 실행 시 현재 너비를 유지합니다.
+
 ## 🚀 Build Setup
 
 ### install
@@ -151,7 +208,35 @@ pnpm add @emotion/react @emotion/styled @emotion/css
 pnpm add rimraf
 ```
 
+## Tree Data와 행 이동
+
+평면 데이터의 parent id field를 사용해 계층을 구성할 수 있습니다. Tree Data에서는 행 상태와 이동을 안정적으로 유지하기 위해 `getRowId`를 지정해야 합니다.
+
+```tsx
+const rows = [
+  { id: "project", parentId: null, name: "프로젝트" },
+  { id: "design", parentId: "project", name: "디자인" },
+  { id: "develop", parentId: "project", name: "개발" },
+];
+
+<DataGrid
+  columns={[{ fieldId: "name", fieldName: "이름", width: 280 }]}
+  dataSource={rows}
+  getRowId={(row) => row.id}
+  treeData
+  treeDataParentIdField="parentId"
+  treeDataColumn="name"
+  groupDefaultExpanded={-1}
+  rowDragManaged
+  onRowMove={({ dataSource }) => setRows(dataSource)}
+/>
+```
+
+`groupDefaultExpanded`는 기본으로 펼칠 계층 수이며 `-1`은 전체 펼침입니다. Managed row drag는 정렬이 적용되지 않은 클라이언트 데이터에서 활성화됩니다. `isRowValidDropPosition`으로 업무 규칙에 맞지 않는 drop을 차단할 수 있습니다.
+펼쳐진 그룹의 상위 행은 세로 스크롤 중 컬럼 헤더 아래에 고정됩니다. 이 동작이 필요하지 않으면 `suppressGroupRowsSticky`를 `true`로 설정합니다.
+
 참고 레퍼런스
+
 nora-data-grid은 @leokim97제공하는 ConveGrid 코어를 기반으로 개발 되었습니다.
 일부 nameSpace 구조등 ConveGrid 기반이므로 중복될 수 있습니다.
 

package/dist/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "1.1.0-beta.30",
+  "version": "1.1.0-beta.32",
   "module": "./dist/nora_datagrid.es.js",
   "main": "./dist/nora_datagrid.cjs.js",
   "private": false,

package/dist/common/columns/sizing.d.ts

@@ -0,0 +1,11 @@
+import { DataGridColumns, DataGridPrivateColumnModel, DataGridPrivateDataSourceModel, FitCellContentsOptions, FitGridWidthOptions } from '../../types/dataGridCoreProps';
+export declare const CHECKBOX_COLUMN_WIDTH = 40;
+export declare const GRID_SCROLLBAR_SIZE = 14;
+export declare function normalizeColumnWidth(width: string | number | undefined): number;
+export declare function getColumnWidth(column: Pick<DataGridPrivateColumnModel, "width" | "__computedWidth">): number;
+export declare function clampColumnWidth(column: DataGridPrivateColumnModel, width: number, defaultMinWidth?: number): number;
+export declare function resizeColumn(columns: DataGridColumns, columnIndex: number, requestedWidth: number): DataGridColumns;
+export declare function resolveFlexColumnWidths(columns: DataGridColumns, availableWidth: number): DataGridColumns;
+export declare function fitColumnsToGridWidth(columns: DataGridColumns, availableWidth: number, options?: FitGridWidthOptions): DataGridColumns;
+export declare function fitColumnsToCellContents(columns: DataGridColumns, rows: DataGridPrivateDataSourceModel[], options?: FitCellContentsOptions, fieldIds?: string[], root?: HTMLElement | null, availableWidth?: number): DataGridColumns;
+export declare function haveSameComputedWidths(left: DataGridColumns, right: DataGridColumns): boolean;

package/dist/common/columns/sizing.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/common/constants/useEnhancedEffect/useEnhancedEffect.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const useEnhancedEffect: typeof React.useLayoutEffect;
+declare const useEnhancedEffect: typeof React.useEffect;
 export default useEnhancedEffect;

package/dist/common/constants/utils.d.ts

@@ -45,6 +45,11 @@ export declare const sorting: (dataSource: DataGridDataSource, newSort: GridSort
     __ariaRowindex: number;
     __dataRowindex: number;
     __uuid: string;
+    __rowId?: import('../../types').GridRowId;
     __originalRowindex: number;
+    __parentId?: import('../../types').GridRowId | null;
+    __treeDepth?: number;
+    __hasChildren?: boolean;
+    __expanded?: boolean;
     height?: number;
 }[];

package/dist/common/rows/treeData.d.ts

@@ -0,0 +1,20 @@
+import { DataGridPrivateDataSourceModel, GridRowId, GridSortModel } from '../../types/dataGridCoreProps';
+export type TreeDropPosition = "before" | "inside" | "after";
+export interface TreeRowModel {
+    sourceRows: DataGridPrivateDataSourceModel[];
+    visibleRows: DataGridPrivateDataSourceModel[];
+    nodeById: Map<GridRowId, DataGridPrivateDataSourceModel>;
+    childrenByParentId: Map<GridRowId | null, GridRowId[]>;
+    expandedIds: Set<GridRowId>;
+}
+interface BuildTreeRowModelOptions {
+    getRowId: (row: DataGridPrivateDataSourceModel) => GridRowId;
+    parentIdField: string;
+    expandedIds?: ReadonlySet<GridRowId>;
+    groupDefaultExpanded?: number;
+    sortModel?: GridSortModel;
+}
+export declare function rowIdToKey(id: GridRowId): string;
+export declare function buildTreeRowModel(sourceRows: DataGridPrivateDataSourceModel[], options: BuildTreeRowModelOptions): TreeRowModel;
+export declare function moveTreeRow(model: TreeRowModel, sourceId: GridRowId, targetId: GridRowId, position: TreeDropPosition, parentIdField: string, getRowId: (row: DataGridPrivateDataSourceModel) => GridRowId): DataGridPrivateDataSourceModel[] | null;
+export {};

package/dist/common/rows/treeData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ColumnResize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TreeData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TwoDimensionalVirtualizedList.d.ts

@@ -2,6 +2,12 @@ import { default as React, ReactNode } from 'react';
 import { DataGridPrivateColumnModel, DataGridPrivateDataSourceModel } from '../types/dataGridCoreProps';
 import { DataGridPrivateApiModel, GirdApiCommon } from '../types/dataGridProps';
 export declare const initialWindowHeight = 500;
+export interface StickyTreeRow {
+    row: DataGridPrivateDataSourceModel;
+    top: number;
+    translateY: number;
+}
+export declare function getStickyTreeRows(rows: DataGridPrivateDataSourceModel[], cumulativeHeights: number[], scrollTop: number, fallbackRowHeight: number): StickyTreeRow[];
 interface VirtualListProps {
     children: (props: {
         visibleItems: Array<DataGridPrivateDataSourceModel>;

package/dist/components/icon/ChevronDownIcon.d.ts

@@ -0,0 +1,7 @@
+export declare function ChevronDownIcon({ size, color, strokeWidth, className, ...props }: {
+    [x: string]: any;
+    size?: number | undefined;
+    color?: string | undefined;
+    strokeWidth?: number | undefined;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/ChevronRightIcon.d.ts

@@ -0,0 +1,7 @@
+export declare function ChevronRightIcon({ size, color, strokeWidth, className, ...props }: {
+    [x: string]: any;
+    size?: number | undefined;
+    color?: string | undefined;
+    strokeWidth?: number | undefined;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/GripIcon.d.ts

@@ -0,0 +1,7 @@
+export declare function GripIcon({ size, color, strokeWidth, className, ...props }: {
+    [x: string]: any;
+    size?: number | undefined;
+    color?: string | undefined;
+    strokeWidth?: number | undefined;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;