react-glide-table 1.1.6 → 1.1.8

package/dist/compound.cjs

@@ -914,6 +914,7 @@ function DataTableRow({
         const meta = cell.column.columnDef.meta;
         const align = meta?.align ?? "center";
         const cellClassName = meta?.className;
+        const editInputProps = meta?.editInputProps;
         const isRowSpanColumn = Boolean(enableRowSpan && meta?.rowSpan);
         const isExpandCell = cellIndex === expandCellIndex;
         const editable = isColumnEditable(cell.column.columnDef);
@@ -1027,18 +1028,31 @@ function DataTableRow({
               isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "input",
                 {
+                  ...editInputProps,
                   ref: editInputRef,
                   type: editType === "number" ? "number" : "text",
                   defaultValue: draftValue,
                   className: cn(
                     "cell-edit-input",
                     CELL_ALIGN_CLASS[align],
+                    editInputProps?.className,
                     classNames?.cellEditInput
                   ),
-                  onChange: (event) => onDraftValueChange(event.target.value),
-                  onMouseDown: (event) => event.stopPropagation(),
-                  onClick: (event) => event.stopPropagation(),
+                  onChange: (event) => {
+                    editInputProps?.onChange?.(event);
+                    onDraftValueChange(event.target.value);
+                  },
+                  onMouseDown: (event) => {
+                    editInputProps?.onMouseDown?.(event);
+                    event.stopPropagation();
+                  },
+                  onClick: (event) => {
+                    editInputProps?.onClick?.(event);
+                    event.stopPropagation();
+                  },
                   onKeyDown: (event) => {
+                    editInputProps?.onKeyDown?.(event);
+                    if (event.defaultPrevented) return;
                     if (event.key === "Enter") {
                       event.preventDefault();
                       onCommitEdit(event.currentTarget.value);
@@ -1049,6 +1063,8 @@ function DataTableRow({
                     }
                   },
                   onBlur: (event) => {
+                    editInputProps?.onBlur?.(event);
+                    if (event.defaultPrevented) return;
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
@@ -2185,7 +2201,12 @@ function DataTable({
                     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "th",
                       {
-                        style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
+                        style: {
+                          width: header.getSize() !== 150 ? header.getSize() : void 0,
+                          // Column sizing follows TanStack's `size`, but
+                          // ensure the column keeps its min width when the container shrinks.
+                          minWidth: header.getSize() !== 150 ? header.getSize() : void 0
+                        },
                         className: cn(
                           "data-table-head-cell",
                           CELL_ALIGN_CLASS[align],
@@ -2325,6 +2346,7 @@ function buildColumnDef(props, sort, onSort) {
     rowSpanKey,
     editable,
     editType,
+    editInputProps,
     className,
     headerClassName,
     render
@@ -2351,6 +2373,7 @@ function buildColumnDef(props, sort, onSort) {
       rowSpanKey,
       editable,
       editType,
+      editInputProps,
       className,
       headerClassName
     }

package/dist/compound.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { d as DataTableProps, T as TableColumnProps, g as TableProps } from './types-DOLnknDe.cjs';
-export { a as DataTableClassNames, c as DataTableLabels, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload } from './types-DOLnknDe.cjs';
+import { d as DataTableProps, T as TableColumnProps, g as TableProps } from './types-Ce4qepIU.cjs';
+export { a as DataTableClassNames, c as DataTableLabels, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload } from './types-Ce4qepIU.cjs';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
 
 /**

package/dist/compound.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { d as DataTableProps, T as TableColumnProps, g as TableProps } from './types-DOLnknDe.js';
-export { a as DataTableClassNames, c as DataTableLabels, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload } from './types-DOLnknDe.js';
+import { d as DataTableProps, T as TableColumnProps, g as TableProps } from './types-Ce4qepIU.js';
+export { a as DataTableClassNames, c as DataTableLabels, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload } from './types-Ce4qepIU.js';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
 
 /**

package/dist/compound.js

@@ -886,6 +886,7 @@ function DataTableRow({
         const meta = cell.column.columnDef.meta;
         const align = meta?.align ?? "center";
         const cellClassName = meta?.className;
+        const editInputProps = meta?.editInputProps;
         const isRowSpanColumn = Boolean(enableRowSpan && meta?.rowSpan);
         const isExpandCell = cellIndex === expandCellIndex;
         const editable = isColumnEditable(cell.column.columnDef);
@@ -999,18 +1000,31 @@ function DataTableRow({
               isEditing ? /* @__PURE__ */ jsx3(
                 "input",
                 {
+                  ...editInputProps,
                   ref: editInputRef,
                   type: editType === "number" ? "number" : "text",
                   defaultValue: draftValue,
                   className: cn(
                     "cell-edit-input",
                     CELL_ALIGN_CLASS[align],
+                    editInputProps?.className,
                     classNames?.cellEditInput
                   ),
-                  onChange: (event) => onDraftValueChange(event.target.value),
-                  onMouseDown: (event) => event.stopPropagation(),
-                  onClick: (event) => event.stopPropagation(),
+                  onChange: (event) => {
+                    editInputProps?.onChange?.(event);
+                    onDraftValueChange(event.target.value);
+                  },
+                  onMouseDown: (event) => {
+                    editInputProps?.onMouseDown?.(event);
+                    event.stopPropagation();
+                  },
+                  onClick: (event) => {
+                    editInputProps?.onClick?.(event);
+                    event.stopPropagation();
+                  },
                   onKeyDown: (event) => {
+                    editInputProps?.onKeyDown?.(event);
+                    if (event.defaultPrevented) return;
                     if (event.key === "Enter") {
                       event.preventDefault();
                       onCommitEdit(event.currentTarget.value);
@@ -1021,6 +1035,8 @@ function DataTableRow({
                     }
                   },
                   onBlur: (event) => {
+                    editInputProps?.onBlur?.(event);
+                    if (event.defaultPrevented) return;
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
@@ -2168,7 +2184,12 @@ function DataTable({
                     return /* @__PURE__ */ jsx5(
                       "th",
                       {
-                        style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
+                        style: {
+                          width: header.getSize() !== 150 ? header.getSize() : void 0,
+                          // Column sizing follows TanStack's `size`, but
+                          // ensure the column keeps its min width when the container shrinks.
+                          minWidth: header.getSize() !== 150 ? header.getSize() : void 0
+                        },
                         className: cn(
                           "data-table-head-cell",
                           CELL_ALIGN_CLASS[align],
@@ -2308,6 +2329,7 @@ function buildColumnDef(props, sort, onSort) {
     rowSpanKey,
     editable,
     editType,
+    editInputProps,
     className,
     headerClassName,
     render
@@ -2334,6 +2356,7 @@ function buildColumnDef(props, sort, onSort) {
       rowSpanKey,
       editable,
       editType,
+      editInputProps,
       className,
       headerClassName
     }

package/dist/core.d.cts

@@ -1,5 +1,5 @@
-import { C as CellEditType, a as DataTableClassNames, R as RowSelectionMode, d as DataTableProps, c as DataTableLabels, b as DataTableCopyActions, P as PasteMode, f as RowsPastePayload } from './types-DOLnknDe.cjs';
-export { D as DEFAULT_DATA_TABLE_LABELS, r as resolveDataTableLabels } from './types-DOLnknDe.cjs';
+import { C as CellEditType, a as DataTableClassNames, R as RowSelectionMode, d as DataTableProps, c as DataTableLabels, b as DataTableCopyActions, P as PasteMode, f as RowsPastePayload } from './types-Ce4qepIU.cjs';
+export { D as DEFAULT_DATA_TABLE_LABELS, r as resolveDataTableLabels } from './types-Ce4qepIU.cjs';
 import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';

package/dist/core.d.ts

@@ -1,5 +1,5 @@
-import { C as CellEditType, a as DataTableClassNames, R as RowSelectionMode, d as DataTableProps, c as DataTableLabels, b as DataTableCopyActions, P as PasteMode, f as RowsPastePayload } from './types-DOLnknDe.js';
-export { D as DEFAULT_DATA_TABLE_LABELS, r as resolveDataTableLabels } from './types-DOLnknDe.js';
+import { C as CellEditType, a as DataTableClassNames, R as RowSelectionMode, d as DataTableProps, c as DataTableLabels, b as DataTableCopyActions, P as PasteMode, f as RowsPastePayload } from './types-Ce4qepIU.js';
+export { D as DEFAULT_DATA_TABLE_LABELS, r as resolveDataTableLabels } from './types-Ce4qepIU.js';
 import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';

package/dist/index.cjs

@@ -1865,6 +1865,7 @@ function DataTableRow({
         const meta = cell.column.columnDef.meta;
         const align = meta?.align ?? "center";
         const cellClassName = meta?.className;
+        const editInputProps = meta?.editInputProps;
         const isRowSpanColumn = Boolean(enableRowSpan && meta?.rowSpan);
         const isExpandCell = cellIndex === expandCellIndex;
         const editable = isColumnEditable(cell.column.columnDef);
@@ -1978,18 +1979,31 @@ function DataTableRow({
               isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "input",
                 {
+                  ...editInputProps,
                   ref: editInputRef,
                   type: editType === "number" ? "number" : "text",
                   defaultValue: draftValue,
                   className: cn(
                     "cell-edit-input",
                     CELL_ALIGN_CLASS[align],
+                    editInputProps?.className,
                     classNames?.cellEditInput
                   ),
-                  onChange: (event) => onDraftValueChange(event.target.value),
-                  onMouseDown: (event) => event.stopPropagation(),
-                  onClick: (event) => event.stopPropagation(),
+                  onChange: (event) => {
+                    editInputProps?.onChange?.(event);
+                    onDraftValueChange(event.target.value);
+                  },
+                  onMouseDown: (event) => {
+                    editInputProps?.onMouseDown?.(event);
+                    event.stopPropagation();
+                  },
+                  onClick: (event) => {
+                    editInputProps?.onClick?.(event);
+                    event.stopPropagation();
+                  },
                   onKeyDown: (event) => {
+                    editInputProps?.onKeyDown?.(event);
+                    if (event.defaultPrevented) return;
                     if (event.key === "Enter") {
                       event.preventDefault();
                       onCommitEdit(event.currentTarget.value);
@@ -2000,6 +2014,8 @@ function DataTableRow({
                     }
                   },
                   onBlur: (event) => {
+                    editInputProps?.onBlur?.(event);
+                    if (event.defaultPrevented) return;
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
@@ -2249,7 +2265,12 @@ function DataTable({
                     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "th",
                       {
-                        style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
+                        style: {
+                          width: header.getSize() !== 150 ? header.getSize() : void 0,
+                          // Column sizing follows TanStack's `size`, but
+                          // ensure the column keeps its min width when the container shrinks.
+                          minWidth: header.getSize() !== 150 ? header.getSize() : void 0
+                        },
                         className: cn(
                           "data-table-head-cell",
                           CELL_ALIGN_CLASS[align],
@@ -2389,6 +2410,7 @@ function buildColumnDef(props, sort, onSort) {
     rowSpanKey,
     editable,
     editType,
+    editInputProps,
     className,
     headerClassName,
     render
@@ -2415,6 +2437,7 @@ function buildColumnDef(props, sort, onSort) {
       rowSpanKey,
       editable,
       editType,
+      editInputProps,
       className,
       headerClassName
     }

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { D as DEFAULT_DATA_TABLE_LABELS, a as DataTableClassNames, b as DataTableCopyActions, c as DataTableLabels, d as DataTableProps, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload, T as TableColumnProps, g as TableProps, r as resolveDataTableLabels } from './types-DOLnknDe.cjs';
+export { D as DEFAULT_DATA_TABLE_LABELS, a as DataTableClassNames, b as DataTableCopyActions, c as DataTableLabels, d as DataTableProps, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload, T as TableColumnProps, g as TableProps, r as resolveDataTableLabels } from './types-Ce4qepIU.cjs';
 export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard } from './core.cjs';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.cjs';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { D as DEFAULT_DATA_TABLE_LABELS, a as DataTableClassNames, b as DataTableCopyActions, c as DataTableLabels, d as DataTableProps, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload, T as TableColumnProps, g as TableProps, r as resolveDataTableLabels } from './types-DOLnknDe.js';
+export { D as DEFAULT_DATA_TABLE_LABELS, a as DataTableClassNames, b as DataTableCopyActions, c as DataTableLabels, d as DataTableProps, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload, T as TableColumnProps, g as TableProps, r as resolveDataTableLabels } from './types-Ce4qepIU.js';
 export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard } from './core.js';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.js';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';

package/dist/index.js

@@ -1806,6 +1806,7 @@ function DataTableRow({
         const meta = cell.column.columnDef.meta;
         const align = meta?.align ?? "center";
         const cellClassName = meta?.className;
+        const editInputProps = meta?.editInputProps;
         const isRowSpanColumn = Boolean(enableRowSpan && meta?.rowSpan);
         const isExpandCell = cellIndex === expandCellIndex;
         const editable = isColumnEditable(cell.column.columnDef);
@@ -1919,18 +1920,31 @@ function DataTableRow({
               isEditing ? /* @__PURE__ */ jsx3(
                 "input",
                 {
+                  ...editInputProps,
                   ref: editInputRef,
                   type: editType === "number" ? "number" : "text",
                   defaultValue: draftValue,
                   className: cn(
                     "cell-edit-input",
                     CELL_ALIGN_CLASS[align],
+                    editInputProps?.className,
                     classNames?.cellEditInput
                   ),
-                  onChange: (event) => onDraftValueChange(event.target.value),
-                  onMouseDown: (event) => event.stopPropagation(),
-                  onClick: (event) => event.stopPropagation(),
+                  onChange: (event) => {
+                    editInputProps?.onChange?.(event);
+                    onDraftValueChange(event.target.value);
+                  },
+                  onMouseDown: (event) => {
+                    editInputProps?.onMouseDown?.(event);
+                    event.stopPropagation();
+                  },
+                  onClick: (event) => {
+                    editInputProps?.onClick?.(event);
+                    event.stopPropagation();
+                  },
                   onKeyDown: (event) => {
+                    editInputProps?.onKeyDown?.(event);
+                    if (event.defaultPrevented) return;
                     if (event.key === "Enter") {
                       event.preventDefault();
                       onCommitEdit(event.currentTarget.value);
@@ -1941,6 +1955,8 @@ function DataTableRow({
                     }
                   },
                   onBlur: (event) => {
+                    editInputProps?.onBlur?.(event);
+                    if (event.defaultPrevented) return;
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
@@ -2190,7 +2206,12 @@ function DataTable({
                     return /* @__PURE__ */ jsx5(
                       "th",
                       {
-                        style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
+                        style: {
+                          width: header.getSize() !== 150 ? header.getSize() : void 0,
+                          // Column sizing follows TanStack's `size`, but
+                          // ensure the column keeps its min width when the container shrinks.
+                          minWidth: header.getSize() !== 150 ? header.getSize() : void 0
+                        },
                         className: cn(
                           "data-table-head-cell",
                           CELL_ALIGN_CLASS[align],
@@ -2330,6 +2351,7 @@ function buildColumnDef(props, sort, onSort) {
     rowSpanKey,
     editable,
     editType,
+    editInputProps,
     className,
     headerClassName,
     render
@@ -2356,6 +2378,7 @@ function buildColumnDef(props, sort, onSort) {
       rowSpanKey,
       editable,
       editType,
+      editInputProps,
       className,
       headerClassName
     }

package/dist/{types-DOLnknDe.d.cts → types-Ce4qepIU.d.cts}

@@ -1,5 +1,5 @@
 import { ColumnDef, RowSelectionState, Updater, Row } from '@tanstack/react-table';
-import { ReactNode, ComponentType } from 'react';
+import { ReactNode, InputHTMLAttributes, ComponentType } from 'react';
 
 type DataTableLabels = {
     empty: string;
@@ -14,6 +14,7 @@ declare function resolveDataTableLabels(partial?: Partial<DataTableLabels>): Dat
 
 type RowSelectionMode = "none" | "single" | "multi";
 type CellEditType = "text" | "number";
+type DataTableEditInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue">;
 
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData, TValue> {
@@ -28,6 +29,8 @@ declare module "@tanstack/react-table" {
         editable?: boolean;
         /** Inline editor input type. Defaults to text */
         editType?: CellEditType;
+        /** Inline editor input attribute overrides */
+        editInputProps?: DataTableEditInputProps;
     }
 }
 type DataTableCopyActions = {
@@ -260,6 +263,8 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
     rowSpanKey?: string;
     editable?: boolean;
     editType?: CellEditType;
+    /** Inline editor input attribute overrides */
+    editInputProps?: DataTableEditInputProps;
     className?: string;
     headerClassName?: string;
     render?: (value: K extends keyof T ? T[K] : unknown, row: Row<T>, index: number) => ReactNode;

package/dist/{types-DOLnknDe.d.ts → types-Ce4qepIU.d.ts}

@@ -1,5 +1,5 @@
 import { ColumnDef, RowSelectionState, Updater, Row } from '@tanstack/react-table';
-import { ReactNode, ComponentType } from 'react';
+import { ReactNode, InputHTMLAttributes, ComponentType } from 'react';
 
 type DataTableLabels = {
     empty: string;
@@ -14,6 +14,7 @@ declare function resolveDataTableLabels(partial?: Partial<DataTableLabels>): Dat
 
 type RowSelectionMode = "none" | "single" | "multi";
 type CellEditType = "text" | "number";
+type DataTableEditInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue">;
 
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData, TValue> {
@@ -28,6 +29,8 @@ declare module "@tanstack/react-table" {
         editable?: boolean;
         /** Inline editor input type. Defaults to text */
         editType?: CellEditType;
+        /** Inline editor input attribute overrides */
+        editInputProps?: DataTableEditInputProps;
     }
 }
 type DataTableCopyActions = {
@@ -260,6 +263,8 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
     rowSpanKey?: string;
     editable?: boolean;
     editType?: CellEditType;
+    /** Inline editor input attribute overrides */
+    editInputProps?: DataTableEditInputProps;
     className?: string;
     headerClassName?: string;
     render?: (value: K extends keyof T ? T[K] : unknown, row: Row<T>, index: number) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-glide-table",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zpxlffjrm/react-glide-table.git"