From 65ab50c46c293debb7a15e9e89273c5a86fc82be Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Wed, 4 Sep 2024 13:01:55 +0300 Subject: [PATCH 1/2] This should fix #625 --- package/DataTableRow.tsx | 143 +++++++++++++++++++-------------------- 1 file changed, 69 insertions(+), 74 deletions(-) diff --git a/package/DataTableRow.tsx b/package/DataTableRow.tsx index 5d8c85e7..9f91d811 100644 --- a/package/DataTableRow.tsx +++ b/package/DataTableRow.tsx @@ -82,78 +82,76 @@ export function DataTableRow({ selectionColumnStyle, rowFactory, }: Readonly>) { - function TableCols() { - return ( - <> - {selectionVisible && ( - - className={selectionColumnClassName} - style={selectionColumnStyle} - record={record} - index={index} - trigger={selectionTrigger} - withRightShadow={selectorCellShadowVisible} - checked={selectionChecked} - disabled={!onSelectionChange || (isRecordSelectable ? !isRecordSelectable(record, index) : false)} - onChange={onSelectionChange} - checkboxProps={selectionCheckboxProps} - getCheckboxProps={getSelectionCheckboxProps} - /> - )} + const cols = ( + <> + {selectionVisible && ( + + className={selectionColumnClassName} + style={selectionColumnStyle} + record={record} + index={index} + trigger={selectionTrigger} + withRightShadow={selectorCellShadowVisible} + checked={selectionChecked} + disabled={!onSelectionChange || (isRecordSelectable ? !isRecordSelectable(record, index) : false)} + onChange={onSelectionChange} + checkboxProps={selectionCheckboxProps} + getCheckboxProps={getSelectionCheckboxProps} + /> + )} - {columns.map(({ hidden, hiddenContent, ...columnProps }, columnIndex) => { - if (hidden || hiddenContent) return null; + {columns.map(({ hidden, hiddenContent, ...columnProps }, columnIndex) => { + if (hidden || hiddenContent) return null; - const { - accessor, - visibleMediaQuery, - textAlign, - noWrap, - ellipsis, - width, - render, - cellsClassName, - cellsStyle, - customCellAttributes, - } = { ...defaultColumnProps, ...columnProps }; + const { + accessor, + visibleMediaQuery, + textAlign, + noWrap, + ellipsis, + width, + render, + cellsClassName, + cellsStyle, + customCellAttributes, + } = { ...defaultColumnProps, ...columnProps }; - return ( - - key={accessor as React.Key} - className={typeof cellsClassName === 'function' ? cellsClassName(record, index) : cellsClassName} - style={cellsStyle?.(record, index)} - visibleMediaQuery={visibleMediaQuery} - record={record} - index={index} - onClick={ - onCellClick - ? (event) => onCellClick({ event, record, index, column: columnProps, columnIndex }) - : undefined - } - onDoubleClick={ - onCellDoubleClick - ? (event) => onCellDoubleClick({ event, record, index, column: columnProps, columnIndex }) - : undefined - } - onContextMenu={ - onCellContextMenu - ? (event) => onCellContextMenu({ event, record, index, column: columnProps, columnIndex }) - : undefined - } - accessor={accessor} - textAlign={textAlign} - noWrap={noWrap} - ellipsis={ellipsis} - width={width} - render={render} - defaultRender={defaultColumnRender} - customCellAttributes={customCellAttributes} - /> - ); - })} - - ); - } + return ( + + key={accessor as React.Key} + className={typeof cellsClassName === 'function' ? cellsClassName(record, index) : cellsClassName} + style={cellsStyle?.(record, index)} + visibleMediaQuery={visibleMediaQuery} + record={record} + index={index} + onClick={ + onCellClick + ? (event) => onCellClick({ event, record, index, column: columnProps, columnIndex }) + : undefined + } + onDoubleClick={ + onCellDoubleClick + ? (event) => onCellDoubleClick({ event, record, index, column: columnProps, columnIndex }) + : undefined + } + onContextMenu={ + onCellContextMenu + ? (event) => onCellContextMenu({ event, record, index, column: columnProps, columnIndex }) + : undefined + } + accessor={accessor} + textAlign={textAlign} + noWrap={noWrap} + ellipsis={ellipsis} + width={width} + render={render} + defaultRender={defaultColumnRender} + customCellAttributes={customCellAttributes} + /> + ); + })} + + ); const expandedElement = expansion && ( ({ record, index, rowProps, - children: , + children: cols, expandedElement, }); } return ( <> - - - - + {cols} {expandedElement} ); From 835108e6b6041339bc97a8d81466ad4ce69226e2 Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Wed, 4 Sep 2024 13:05:19 +0300 Subject: [PATCH 2/2] Update changelog & bump version --- CHANGELOG.md | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65fac4b1..dc66f1fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ The following is a list of notable changes to the Mantine DataTable component. Minor versions that are not listed in the changelog are bug fixes and small improvements. +## 7.12.3 (2024-09-04) + +- Fix [#625](https://github.com/icflorescu/mantine-datatable/issues/625) - after implementing row dragging support, inputs inside columns were losing focus + ## 7.12.2 (2024-09-04) - Update dev dependencies to ensure compatibility with Mantine 7.12.2 diff --git a/package.json b/package.json index 5f04a02e..6441c7cf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mantine-datatable", - "version": "7.12.2", + "version": "7.12.3", "description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more", "keywords": [ "mantine",