From 7e7c1f077225dc058330d00ccadd0d4e9611f7a6 Mon Sep 17 00:00:00 2001 From: amahajan Date: Wed, 5 Nov 2025 15:55:06 -0600 Subject: [PATCH 1/7] Rename `textEditor` to `renderTextEditor` --- README.md | 6 ++-- .../{textEditor.tsx => renderTextEditor.tsx} | 2 +- src/index.ts | 3 +- test/browser/TextEditor.test.tsx | 6 ++-- test/browser/TreeDataGrid.test.tsx | 4 +-- website/routes/AllFeatures.tsx | 34 ++++++++++++------- website/routes/CommonFeatures.tsx | 18 +++++----- website/routes/CustomizableRenderers.tsx | 4 +-- website/routes/RowsReordering.tsx | 4 +-- 9 files changed, 45 insertions(+), 36 deletions(-) rename src/editors/{textEditor.tsx => renderTextEditor.tsx} (95%) diff --git a/README.md b/README.md index b84a22598f..f1d8cdb50e 100644 --- a/README.md +++ b/README.md @@ -743,20 +743,20 @@ const columns: readonly Column[] = [ ]; ``` -#### `textEditor(props: RenderEditCellProps)` +#### `renderTextEditor(props: RenderEditCellProps)` A basic text editor provided for convenience. **Example:** ```tsx -import { textEditor, type Column } from 'react-data-grid'; +import { renderTextEditor, type Column } from 'react-data-grid'; const columns: readonly Column[] = [ { key: 'title', name: 'Title', - renderEditCell: textEditor + renderEditCell: renderTextEditor } ]; ``` diff --git a/src/editors/textEditor.tsx b/src/editors/renderTextEditor.tsx similarity index 95% rename from src/editors/textEditor.tsx rename to src/editors/renderTextEditor.tsx index ca40a8f200..784ea851da 100644 --- a/src/editors/textEditor.tsx +++ b/src/editors/renderTextEditor.tsx @@ -38,7 +38,7 @@ function autoFocusAndSelect(input: HTMLInputElement | null) { input?.select(); } -export default function textEditor({ +export default function textTextEditor({ row, column, onRowChange, diff --git a/src/index.ts b/src/index.ts index 98cbf83f5b..e7cccaae47 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,7 +12,7 @@ export { default as Row } from './Row'; export { default as Cell } from './Cell'; export * from './Columns'; export * from './cellRenderers'; -export { default as textEditor } from './editors/textEditor'; +export { default as renderTextEditor } from './editors/renderTextEditor'; export { default as renderHeaderCell } from './renderHeaderCell'; export { renderSortIcon, renderSortPriority } from './sortStatus'; export { useRowSelection, useHeaderRowSelection } from './hooks'; @@ -34,6 +34,7 @@ export type { ColumnOrColumnGroup, ColumnWidth, ColumnWidths, + Direction, FillEvent, RenderCellProps, RenderCheckboxProps, diff --git a/test/browser/TextEditor.test.tsx b/test/browser/TextEditor.test.tsx index 81161b45b2..8638f1dc90 100644 --- a/test/browser/TextEditor.test.tsx +++ b/test/browser/TextEditor.test.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { page, userEvent } from 'vitest/browser'; -import { DataGrid, textEditor } from '../../src'; +import { DataGrid, renderTextEditor } from '../../src'; import type { Column } from '../../src'; interface Row { @@ -12,7 +12,7 @@ const columns: readonly Column[] = [ { key: 'name', name: 'Name', - renderEditCell: textEditor, + renderEditCell: renderTextEditor, editorOptions: { commitOnOutsideClick: false } @@ -26,7 +26,7 @@ function Test() { return ; } -test('TextEditor', async () => { +test('renderTextEditor', async () => { await page.render(); const cell = page.getByRole('gridcell'); await expect.element(cell).toHaveTextContent(/^Tacitus Kilgore$/); diff --git a/test/browser/TreeDataGrid.test.tsx b/test/browser/TreeDataGrid.test.tsx index 160d577e84..9150e7f56b 100644 --- a/test/browser/TreeDataGrid.test.tsx +++ b/test/browser/TreeDataGrid.test.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { page, userEvent } from 'vitest/browser'; import type { Column } from '../../src'; -import { SelectColumn, textEditor, TreeDataGrid } from '../../src'; +import { renderTextEditor, SelectColumn, TreeDataGrid } from '../../src'; import { focusSinkClassname } from '../../src/style/core'; import { rowSelected } from '../../src/style/row'; import { @@ -40,7 +40,7 @@ const columns: readonly Column[] = [ { key: 'country', name: 'Country', - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'year', diff --git a/website/routes/AllFeatures.tsx b/website/routes/AllFeatures.tsx index 9ed3b137ce..d5566e4310 100644 --- a/website/routes/AllFeatures.tsx +++ b/website/routes/AllFeatures.tsx @@ -3,9 +3,17 @@ import { faker } from '@faker-js/faker'; import { css } from '@linaria/core'; import clsx from 'clsx'; -import { DataGrid, SelectColumn, textEditor } from '../../src'; -import type { CalculatedColumn, CellCopyArgs, CellPasteArgs, Column, FillEvent } from '../../src'; -import { textEditorClassname } from '../../src/editors/textEditor'; +import { + DataGrid, + renderTextEditor, + SelectColumn, + type CalculatedColumn, + type CellCopyArgs, + type CellPasteArgs, + type Column, + type FillEvent +} from '../../src'; +import { textEditorClassname } from '../../src/editors/renderTextEditor'; import { useDirection } from '../directionContext'; export const Route = createFileRoute({ @@ -132,7 +140,7 @@ const columns: readonly Column[] = [ width: 200, resizable: true, frozen: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'lastName', @@ -140,63 +148,63 @@ const columns: readonly Column[] = [ width: 200, resizable: true, frozen: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'email', name: 'Email', width: 'max-content', resizable: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'street', name: 'Street', width: 200, resizable: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'zipCode', name: 'ZipCode', width: 200, resizable: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'date', name: 'Date', width: 200, resizable: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'bs', name: 'bs', width: 200, resizable: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'catchPhrase', name: 'Catch Phrase', width: 'max-content', resizable: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'companyName', name: 'Company Name', width: 200, resizable: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'sentence', name: 'Sentence', width: 'max-content', resizable: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor } ]; diff --git a/website/routes/CommonFeatures.tsx b/website/routes/CommonFeatures.tsx index 4e10282614..3bf63e54ca 100644 --- a/website/routes/CommonFeatures.tsx +++ b/website/routes/CommonFeatures.tsx @@ -5,15 +5,15 @@ import { css } from '@linaria/core'; import { DataGrid, + renderTextEditor, SelectCellFormatter, SelectColumn, - textEditor, type Column, type DataGridHandle, + type Direction, type SortColumn } from '../../src'; -import { textEditorClassname } from '../../src/editors/textEditor'; -import type { Direction } from '../../src/types'; +import { textEditorClassname } from '../../src/editors/renderTextEditor'; import { exportToCsv, exportToPdf } from '../utils'; import { useDirection } from '../directionContext'; @@ -96,7 +96,7 @@ function getColumns( key: 'title', name: 'Task', frozen: true, - renderEditCell: textEditor, + renderEditCell: renderTextEditor, renderSummaryCell({ row }) { return `${row.totalCount} records`; } @@ -106,12 +106,12 @@ function getColumns( name: 'Client', width: 'max-content', draggable: true, - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'area', name: 'Area', - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'country', @@ -132,12 +132,12 @@ function getColumns( { key: 'contact', name: 'Contact', - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'assignee', name: 'Assignee', - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'progress', @@ -219,7 +219,7 @@ function getColumns( { key: 'version', name: 'Version', - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'available', diff --git a/website/routes/CustomizableRenderers.tsx b/website/routes/CustomizableRenderers.tsx index c7072c69e6..648c106971 100644 --- a/website/routes/CustomizableRenderers.tsx +++ b/website/routes/CustomizableRenderers.tsx @@ -1,7 +1,7 @@ import { useMemo, useState } from 'react'; import { css } from '@linaria/core'; -import { Row as BaseRow, Cell, DataGrid, SelectColumn, textEditor } from '../../src'; +import { Row as BaseRow, Cell, DataGrid, renderTextEditor, SelectColumn } from '../../src'; import type { CellRendererProps, Column, @@ -69,7 +69,7 @@ const columns: readonly Column[] = [ { key: 'task', name: 'Title', - renderEditCell: textEditor, + renderEditCell: renderTextEditor, sortable: true }, { diff --git a/website/routes/RowsReordering.tsx b/website/routes/RowsReordering.tsx index ef1594ca5c..ec5b706841 100644 --- a/website/routes/RowsReordering.tsx +++ b/website/routes/RowsReordering.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react'; -import { DataGrid, textEditor } from '../../src'; +import { DataGrid, renderTextEditor } from '../../src'; import type { CellRendererProps, Column } from '../../src'; import { DraggableCellRenderer } from '../components'; import { startViewTransition } from '../utils'; @@ -43,7 +43,7 @@ const columns: readonly Column[] = [ { key: 'task', name: 'Title', - renderEditCell: textEditor + renderEditCell: renderTextEditor }, { key: 'priority', From 7e23fb5520164689ef42e7deda7b393d4ebdf61c Mon Sep 17 00:00:00 2001 From: amahajan Date: Wed, 5 Nov 2025 16:00:46 -0600 Subject: [PATCH 2/7] Cleanup types --- website/routes/Animation.tsx | 3 +-- website/routes/ColumnGrouping.tsx | 3 +-- website/routes/ColumnSpanning.tsx | 3 +-- website/routes/ContextMenu.tsx | 3 +-- website/routes/InfiniteScrolling.tsx | 3 +-- website/routes/MasterDetail.tsx | 3 +-- website/routes/MillionCells.tsx | 3 +-- website/routes/NoRows.tsx | 3 +-- website/routes/ResizableGrid.tsx | 3 +-- website/routes/RowGrouping.tsx | 3 +-- website/routes/ScrollToCell.tsx | 3 +-- website/routes/TreeView.tsx | 3 +-- 12 files changed, 12 insertions(+), 24 deletions(-) diff --git a/website/routes/Animation.tsx b/website/routes/Animation.tsx index 40e3747877..b40da14bfa 100644 --- a/website/routes/Animation.tsx +++ b/website/routes/Animation.tsx @@ -1,8 +1,7 @@ import { useState } from 'react'; import { css } from '@linaria/core'; -import { DataGrid } from '../../src'; -import type { Column } from '../../src'; +import { DataGrid, type Column } from '../../src'; import { useDirection } from '../directionContext'; export const Route = createFileRoute({ diff --git a/website/routes/ColumnGrouping.tsx b/website/routes/ColumnGrouping.tsx index 351a130d6a..6c2bcde5ca 100644 --- a/website/routes/ColumnGrouping.tsx +++ b/website/routes/ColumnGrouping.tsx @@ -1,5 +1,4 @@ -import { DataGrid } from '../../src'; -import type { ColumnOrColumnGroup } from '../../src'; +import { DataGrid, type ColumnOrColumnGroup } from '../../src'; import { renderCoordinates } from '../renderers'; import { useDirection } from '../directionContext'; diff --git a/website/routes/ColumnSpanning.tsx b/website/routes/ColumnSpanning.tsx index 26d4a67372..afd3493a8e 100644 --- a/website/routes/ColumnSpanning.tsx +++ b/website/routes/ColumnSpanning.tsx @@ -1,7 +1,6 @@ import { css } from '@linaria/core'; -import { DataGrid } from '../../src'; -import type { Column } from '../../src'; +import { DataGrid, type Column } from '../../src'; import { renderCoordinates } from '../renderers'; import { useDirection } from '../directionContext'; diff --git a/website/routes/ContextMenu.tsx b/website/routes/ContextMenu.tsx index cf25964ca1..e1ac2b460a 100644 --- a/website/routes/ContextMenu.tsx +++ b/website/routes/ContextMenu.tsx @@ -3,8 +3,7 @@ import { createPortal } from 'react-dom'; import { faker } from '@faker-js/faker'; import { css } from '@linaria/core'; -import { DataGrid } from '../../src'; -import type { Column } from '../../src'; +import { DataGrid, type Column } from '../../src'; import { useDirection } from '../directionContext'; export const Route = createFileRoute({ diff --git a/website/routes/InfiniteScrolling.tsx b/website/routes/InfiniteScrolling.tsx index c822ca81fd..d3d92f9b66 100644 --- a/website/routes/InfiniteScrolling.tsx +++ b/website/routes/InfiniteScrolling.tsx @@ -2,8 +2,7 @@ import { useState } from 'react'; import { faker } from '@faker-js/faker'; import { css } from '@linaria/core'; -import { DataGrid } from '../../src'; -import type { Column } from '../../src'; +import { DataGrid, type Column } from '../../src'; import { useDirection } from '../directionContext'; export const Route = createFileRoute({ diff --git a/website/routes/MasterDetail.tsx b/website/routes/MasterDetail.tsx index ec4260075e..f5397e11e3 100644 --- a/website/routes/MasterDetail.tsx +++ b/website/routes/MasterDetail.tsx @@ -3,8 +3,7 @@ import { faker } from '@faker-js/faker'; import { css } from '@linaria/core'; import { DataGrid } from '../../src'; -import type { Column, RowsChangeData } from '../../src'; -import type { Direction } from '../../src/types'; +import type { Column, Direction, RowsChangeData } from '../../src'; import { CellExpanderFormatter } from '../components'; import { useDirection } from '../directionContext'; diff --git a/website/routes/MillionCells.tsx b/website/routes/MillionCells.tsx index 06bdec2df0..8b798e19f8 100644 --- a/website/routes/MillionCells.tsx +++ b/website/routes/MillionCells.tsx @@ -1,5 +1,4 @@ -import { DataGrid } from '../../src'; -import type { Column } from '../../src'; +import { DataGrid, type Column } from '../../src'; import { renderCoordinates } from '../renderers'; import { useDirection } from '../directionContext'; diff --git a/website/routes/NoRows.tsx b/website/routes/NoRows.tsx index df8f5b8264..3a99463d88 100644 --- a/website/routes/NoRows.tsx +++ b/website/routes/NoRows.tsx @@ -1,8 +1,7 @@ import { useState } from 'react'; import { css } from '@linaria/core'; -import { DataGrid, SelectColumn } from '../../src'; -import type { Column } from '../../src'; +import { DataGrid, SelectColumn, type Column } from '../../src'; import { useDirection } from '../directionContext'; export const Route = createFileRoute({ diff --git a/website/routes/ResizableGrid.tsx b/website/routes/ResizableGrid.tsx index a013bbd80d..3859fc100f 100644 --- a/website/routes/ResizableGrid.tsx +++ b/website/routes/ResizableGrid.tsx @@ -1,5 +1,4 @@ -import { DataGrid } from '../../src'; -import type { Column } from '../../src'; +import { DataGrid, type Column } from '../../src'; import { renderCoordinates } from '../renderers'; import { useDirection } from '../directionContext'; diff --git a/website/routes/RowGrouping.tsx b/website/routes/RowGrouping.tsx index aab01db239..0b52a8c11b 100644 --- a/website/routes/RowGrouping.tsx +++ b/website/routes/RowGrouping.tsx @@ -2,8 +2,7 @@ import { useState } from 'react'; import { faker } from '@faker-js/faker'; import { css } from '@linaria/core'; -import { SelectColumn, TreeDataGrid } from '../../src'; -import type { Column } from '../../src'; +import { SelectColumn, TreeDataGrid, type Column } from '../../src'; import { useDirection } from '../directionContext'; export const Route = createFileRoute({ diff --git a/website/routes/ScrollToCell.tsx b/website/routes/ScrollToCell.tsx index 231c91ad00..506975b6e6 100644 --- a/website/routes/ScrollToCell.tsx +++ b/website/routes/ScrollToCell.tsx @@ -2,8 +2,7 @@ import { useRef, useState } from 'react'; import { css } from '@linaria/core'; import clsx from 'clsx'; -import { DataGrid } from '../../src'; -import type { Column, DataGridHandle } from '../../src'; +import { DataGrid, type Column, type DataGridHandle } from '../../src'; import { renderCoordinates } from '../renderers'; import { useDirection } from '../directionContext'; diff --git a/website/routes/TreeView.tsx b/website/routes/TreeView.tsx index 91de9b5827..c22726437d 100644 --- a/website/routes/TreeView.tsx +++ b/website/routes/TreeView.tsx @@ -1,8 +1,7 @@ import { useMemo, useReducer, useState } from 'react'; import { css } from '@linaria/core'; -import { DataGrid } from '../../src'; -import type { Column } from '../../src'; +import { DataGrid, type Column } from '../../src'; import { CellExpanderFormatter, ChildRowDeleteButton } from '../components'; import { useDirection } from '../directionContext'; From a0b0f5b75a85e6219e153f7f21ff42099c505044 Mon Sep 17 00:00:00 2001 From: amahajan Date: Wed, 5 Nov 2025 16:02:03 -0600 Subject: [PATCH 3/7] Revret 1 change --- website/routes/AllFeatures.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/website/routes/AllFeatures.tsx b/website/routes/AllFeatures.tsx index d5566e4310..c5b9872ccc 100644 --- a/website/routes/AllFeatures.tsx +++ b/website/routes/AllFeatures.tsx @@ -3,16 +3,8 @@ import { faker } from '@faker-js/faker'; import { css } from '@linaria/core'; import clsx from 'clsx'; -import { - DataGrid, - renderTextEditor, - SelectColumn, - type CalculatedColumn, - type CellCopyArgs, - type CellPasteArgs, - type Column, - type FillEvent -} from '../../src'; +import { DataGrid, renderTextEditor, SelectColumn } from '../../src'; +import type { CalculatedColumn, CellCopyArgs, CellPasteArgs, Column, FillEvent } from '../../src'; import { textEditorClassname } from '../../src/editors/renderTextEditor'; import { useDirection } from '../directionContext'; From b82f389fe48f3d1172b81b09c4aa9284cbaf6d2d Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 6 Nov 2025 10:13:29 -0600 Subject: [PATCH 4/7] Tweak import --- website/routes/RowsReordering.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/website/routes/RowsReordering.tsx b/website/routes/RowsReordering.tsx index ec5b706841..1ebb52d481 100644 --- a/website/routes/RowsReordering.tsx +++ b/website/routes/RowsReordering.tsx @@ -1,7 +1,6 @@ import { useCallback, useState } from 'react'; -import { DataGrid, renderTextEditor } from '../../src'; -import type { CellRendererProps, Column } from '../../src'; +import { DataGrid, renderTextEditor, type CellRendererProps, type Column } from '../../src'; import { DraggableCellRenderer } from '../components'; import { startViewTransition } from '../utils'; import { useDirection } from '../directionContext'; From 3f447dab83d75f98fd6e8a99c2b74e8ffd3c74f2 Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 6 Nov 2025 10:13:58 -0600 Subject: [PATCH 5/7] rename test file --- test/browser/{TextEditor.test.tsx => renderTextEditor.test.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/browser/{TextEditor.test.tsx => renderTextEditor.test.tsx} (100%) diff --git a/test/browser/TextEditor.test.tsx b/test/browser/renderTextEditor.test.tsx similarity index 100% rename from test/browser/TextEditor.test.tsx rename to test/browser/renderTextEditor.test.tsx From 5b0a13ade9d51eac901418cab3c26433313ac881 Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 6 Nov 2025 10:33:06 -0600 Subject: [PATCH 6/7] Combine import --- website/routes/MasterDetail.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/website/routes/MasterDetail.tsx b/website/routes/MasterDetail.tsx index f5397e11e3..7075af4a42 100644 --- a/website/routes/MasterDetail.tsx +++ b/website/routes/MasterDetail.tsx @@ -2,8 +2,7 @@ import { useMemo, useState } from 'react'; import { faker } from '@faker-js/faker'; import { css } from '@linaria/core'; -import { DataGrid } from '../../src'; -import type { Column, Direction, RowsChangeData } from '../../src'; +import { DataGrid, type Column, type Direction, type RowsChangeData } from '../../src'; import { CellExpanderFormatter } from '../components'; import { useDirection } from '../directionContext'; From 2b25881624719f783f807b7134c96b5b4f608a12 Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 6 Nov 2025 10:35:12 -0600 Subject: [PATCH 7/7] Combine import statements --- website/routes/ColumnsReordering.tsx | 3 +-- website/routes/HeaderFilters.tsx | 3 +-- website/routes/VariableRowHeight.tsx | 3 +-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/website/routes/ColumnsReordering.tsx b/website/routes/ColumnsReordering.tsx index f7a68a36cf..17004ec25f 100644 --- a/website/routes/ColumnsReordering.tsx +++ b/website/routes/ColumnsReordering.tsx @@ -1,7 +1,6 @@ import { useCallback, useMemo, useState } from 'react'; -import { DataGrid } from '../../src'; -import type { Column, ColumnWidths, SortColumn } from '../../src'; +import { DataGrid, type Column, type ColumnWidths, type SortColumn } from '../../src'; import { startViewTransition } from '../utils'; import { useDirection } from '../directionContext'; diff --git a/website/routes/HeaderFilters.tsx b/website/routes/HeaderFilters.tsx index c458f3fb76..91483680b6 100644 --- a/website/routes/HeaderFilters.tsx +++ b/website/routes/HeaderFilters.tsx @@ -2,8 +2,7 @@ import { createContext, useContext, useMemo, useState } from 'react'; import { faker } from '@faker-js/faker'; import { css } from '@linaria/core'; -import { DataGrid } from '../../src'; -import type { Column, RenderHeaderCellProps } from '../../src'; +import { DataGrid, type Column, type RenderHeaderCellProps } from '../../src'; import type { Omit } from '../../src/types'; import { useDirection } from '../directionContext'; diff --git a/website/routes/VariableRowHeight.tsx b/website/routes/VariableRowHeight.tsx index 81556f98b5..6277e7e3aa 100644 --- a/website/routes/VariableRowHeight.tsx +++ b/website/routes/VariableRowHeight.tsx @@ -1,5 +1,4 @@ -import { DataGrid } from '../../src'; -import type { Column } from '../../src'; +import { DataGrid, type Column } from '../../src'; import { renderCoordinates } from '../renderers'; import { useDirection } from '../directionContext';