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

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

package/dist/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "1.1.0-beta.30",
+  "version": "1.1.0-beta.31",
   "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/components/ColumnResize.test.d.ts

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