@postxl/ui-components 1.3.8 → 1.3.10

package/dist/index.d.ts

@@ -1010,6 +1010,7 @@ declare function useDataGrid<TData>({
 //#region src/data-grid/data-grid.d.ts
 type DataGridProps<TData> = {
   height?: number;
+  forceHeight?: boolean;
 } & ReturnType<typeof useDataGrid<TData>> & React$28.ComponentProps<'div'>;
 declare function DataGrid<TData>({
   dataGridRef,
@@ -1019,6 +1020,7 @@ declare function DataGrid<TData>({
   table,
   rowVirtualizer,
   height,
+  forceHeight,
   searchState,
   columnSizeVars,
   onRowAdd,

package/dist/index.js

@@ -4132,7 +4132,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 
 //#endregion
 //#region src/data-grid/data-grid.tsx
-function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirtualizer, height, searchState, columnSizeVars, onRowAdd, className,...props }) {
+function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirtualizer, height, forceHeight = false, searchState, columnSizeVars, onRowAdd, className,...props }) {
 	const rows = table.getRowModel().rows;
 	const columns = table.getAllColumns();
 	const meta = table.options.meta;
@@ -4181,10 +4181,10 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 				"data-slot": "grid",
 				tabIndex: 0,
 				ref: dataGridRef,
-				className: "relative grid select-none overflow-auto rounded-md border border-border focus:outline-none",
+				className: cn("relative grid select-none overflow-auto rounded-md border border-border focus:outline-none", forceHeight && "content-start"),
 				style: {
 					...columnSizeVars,
-					height: `${Math.min(rowVirtualizer.getTotalSize() + headerHeight + footerHeight + scrollbarHeight + 3, height ?? Infinity)}px`
+					height: `${forceHeight && height ? height : Math.min(rowVirtualizer.getTotalSize() + headerHeight + footerHeight + scrollbarHeight + 3, height ?? Infinity)}px`
 				},
 				onContextMenu: onGridContextMenu,
 				children: [
@@ -4301,8 +4301,9 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 //#endregion
 //#region src/data-grid/cell-variants/checkbox-cell.tsx
 function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
-	const initialValue = cell.getValue();
-	const [value, setValue] = React$24.useState(Boolean(initialValue));
+	const cellValue = cell.getValue();
+	const cellValueAsBoolean = Boolean(cellValue);
+	const [value, setValue] = React$24.useState(cellValueAsBoolean);
 	const containerRef = React$24.useRef(null);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
@@ -4338,8 +4339,8 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		isEditable
 	]);
 	React$24.useEffect(() => {
-		setValue(Boolean(initialValue));
-	}, [initialValue]);
+		setValue(cellValueAsBoolean);
+	}, [cellValueAsBoolean]);
 	React$24.useEffect(() => {
 		if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -6680,6 +6681,13 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		debouncedRowClick
 	]);
 	const onCellEditingStart = React$13.useCallback((rowIndex, columnId) => {
+		const col = tableRef.current?.getColumn(columnId);
+		const editable = col?.columnDef?.meta?.editable;
+		if (editable === false) return;
+		if (typeof editable === "function") {
+			const row = tableRef.current?.getRowModel().rows[rowIndex]?.original;
+			if (row && !editable(row)) return;
+		}
 		store.batch(() => {
 			store.setState("focusedCell", {
 				rowIndex,