From 6f7fa99e8ce41285609277bc5c4f6b9049d0b596 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 16 Apr 2025 09:42:41 -0500 Subject: [PATCH 1/6] Add docs --- README.md | 84 ++++++++++++++++++++++++++++++++++++++++++++++------ src/types.ts | 39 +++++++++++++++--------- 2 files changed, 100 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index d5a0f27f4e..9375c93682 100644 --- a/README.md +++ b/README.md @@ -600,7 +600,7 @@ See [`RenderGroupCellProps`](#rendergroupcellprops) ##### `name: string | ReactElement` -The name of the column. By default it will be displayed in the header cell +The name of the column. Displayed in the header cell by default. ##### `key: string` @@ -625,31 +625,97 @@ width: 'minmax(100px, max-content)'; **Default**: `50` pixels -Sets the maximum width of a column. +Minimum column width in pixels. ##### `maxWidth?: Maybe` -Sets the maximum width of a column. +Maximum column width in pixels. ##### `cellClass?: Maybe Maybe)>` -A function to add a class on the row +Class name(s) for the cell ##### `headerCellClass?: Maybe` +Class name(s) for the header cell. + ##### `summaryCellClass?: Maybe Maybe)>` +Class name(s) for the summary cell. + ##### `renderCell?: Maybe<(props: RenderCellProps) => ReactNode>` -Render function used to render the content of cells +Render function to render the content of cells. + +##### `renderHeaderCell?: Maybe<(props: RenderHeaderCellProps) => ReactNode>` + +Render function to render the content of the header cell. + +##### `renderSummaryCell?: Maybe<(props: RenderSummaryCellProps) => ReactNode>` + +Render function to render the content of summary cells + +##### `renderEditCell?: Maybe<(props: RenderEditCellProps) => ReactNode>` + +Render function to render the content of edit cells. When set, the column is automatically set to be editable + +##### `editable?: Maybe boolean)>` + +Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor. + +##### `colSpan?: Maybe<(args: ColSpanArgs) => Maybe>` + +##### `frozen?: Maybe` + +**Default**: `false` + +Determines whether column is frozen. Frozem columns are pinned on th left. At the moment + +##### `resizable?: Maybe` + +**Default**: `false` + +Enable resizing of the column + +##### `sortable?: Maybe` + +**Default**: `false` + +Enable sorting of the column + +##### `draggable?: Maybe` + +**Default**: `false` + +Enable dragging of the column + +##### `sortDescendingFirst?: Maybe` + +**Default**: `false` + +Sets the column sort order to be descending instead of ascending the first time the column is sorted + +##### `editorOptions` + +Options for cell editing. + +###### `displayCellContent?: Maybe` + +**Default**: `false` + +Render the cell content in addition to the edit cell. Enable this option when the editor is rendered outside the grid, like a modal for example. + +###### `commitOnOutsideClick?: Maybe` + +**Default**: `true` -##### `renderHeaderCell` +Commit changes when clicking outside the cell. -Render function used to render the content of header cells +###### `closeOnExternalRowChange?: Maybe` -##### `renderSummaryCell` +**Default**: `true` -Render function used to render the content of summary cells +Close the editor when the row changes externally. #### `DataGridHandle` diff --git a/src/types.ts b/src/types.ts index d88825cabe..1c62c3e5e9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -9,7 +9,7 @@ export type Maybe = T | undefined | null; export type StateSetter = React.Dispatch>; export interface Column { - /** The name of the column. By default it will be displayed in the header cell */ + /** The name of the column. Displayed in the header cell by default */ readonly name: string | ReactElement; /** A unique key to distinguish each column */ readonly key: string; @@ -19,40 +19,44 @@ export interface Column { */ readonly width?: Maybe; /** - * Minimum column width in px + * Minimum column width in pixels * @default '50px' */ readonly minWidth?: Maybe; - /** Maximum column width in px. */ + /** Maximum column width in pixels */ readonly maxWidth?: Maybe; + /** Class name(s) for the cell */ readonly cellClass?: Maybe Maybe)>; + /** Class name(s) for the header cell */ readonly headerCellClass?: Maybe; + /** Class name(s) for the summary cell */ readonly summaryCellClass?: Maybe Maybe)>; - /** Render function used to render the content of cells */ + /** Render function to render the content of cells */ readonly renderCell?: Maybe<(props: RenderCellProps) => ReactNode>; - /** Render function used to render the content of the column's header cell */ + /** Render function to render the content of the header cell */ readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps) => ReactNode>; - /** Render function used to render the content of summary cells */ + /** Render function to render the content of summary cells */ readonly renderSummaryCell?: Maybe< (props: RenderSummaryCellProps) => ReactNode >; - /** Render function used to render the content of group cells */ + /** Render function to render the content of group cells */ readonly renderGroupCell?: Maybe<(props: RenderGroupCellProps) => ReactNode>; - /** Render function used to render the content of edit cells. When set, the column is automatically set to be editable */ + /** Render function to render the content of edit cells. When set, the column is automatically set to be editable */ readonly renderEditCell?: Maybe<(props: RenderEditCellProps) => ReactNode>; /** Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor */ readonly editable?: Maybe boolean)>; readonly colSpan?: Maybe<(args: ColSpanArgs) => Maybe>; - /** Determines whether column is frozen or not */ + /** Determines whether column is frozen */ readonly frozen?: Maybe; - /** Enable resizing of a column */ + /** Enable resizing of the column */ readonly resizable?: Maybe; - /** Enable sorting of a column */ + /** Enable sorting of the column */ readonly sortable?: Maybe; - /** Enable dragging of a column */ + /** Enable dragging of the column */ readonly draggable?: Maybe; /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */ readonly sortDescendingFirst?: Maybe; + /** Options for cell editing */ readonly editorOptions?: Maybe<{ /** * Render the cell content in addition to the edit cell. @@ -61,9 +65,16 @@ export interface Column { * @default false */ readonly displayCellContent?: Maybe; - /** @default true */ + + /** + * Commit changes when clicking outside the cell + * @default true + */ readonly commitOnOutsideClick?: Maybe; - /** @default true */ + /** + * Close the editor when the row changes externally + * @default true + */ readonly closeOnExternalRowChange?: Maybe; }>; } From 0d5eae2266ef521911f9732756ddbc6b4136103f Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 16 Apr 2025 10:06:26 -0500 Subject: [PATCH 2/6] Add more docs --- README.md | 40 ++++++++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 9375c93682..72f6cfabfe 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,8 @@ [ci-badge]: https://github.com/adazzle/react-data-grid/workflows/CI/badge.svg [ci-url]: https://github.com/adazzle/react-data-grid/actions +The DataGrid component is designed to handle large datasets efficiently while offering a rich set of features for customization and interactivity. + ## Features - [React 19.0+](package.json) support @@ -103,11 +105,11 @@ An array of rows, the rows data can be of any type. ###### `topSummaryRows?: Maybe` -An optional array of summary rows, usually used to display total values for example. `topSummaryRows` are pinned at the top of the rows view and the vertical scroll bar will not scroll these rows. +Rows pinned at the top of the grid for summary purposes. ###### `bottomSummaryRows?: Maybe` -An optional array of summary rows, usually used to display total values for example. `bottomSummaryRows` are pinned at the bottom of the rows view and the vertical scroll bar will not scroll these rows. +Rows pinned at the bottom of the grid for summary purposes. ###### `rowKeyGetter?: Maybe<(row: R) => K>` @@ -159,13 +161,13 @@ Either a number defining the height of row in pixels, or a function returning dy **Default:** `35` pixels -A number defining the height of the header row. +Height of the header row in pixels. ###### `summaryRowHeight?: Maybe` **Default:** `35` pixels -A number defining the height of summary rows. +Height of each summary row in pixels. ###### `selectedRows?: Maybe>` @@ -220,7 +222,7 @@ An array of sorted columns. ###### `onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>` -A function called when sorting is changed +A function called when sorting is changed. ```tsx import { useState } from 'react'; @@ -261,7 +263,7 @@ onSortColumnsChange(sortColumns: SortColumn[]) { ###### `defaultColumnOptions?: Maybe>` -Column options that are applied to all the columns +Default options applied to all columns. ```tsx function MyGrid() { @@ -323,7 +325,7 @@ Arguments: ###### `onCellDoubleClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` -Triggered when a cell is double clicked. The default behavior is to open the editor if the cell is editable. Call `preventGridDefault` to prevent the default behavior +Callback triggered when a cell is double-clicked. The default behavior is to open the editor if the cell is editable. Call `preventGridDefault` to prevent the default behavior ```tsx function onCellDoubleClick(args: CellClickArgs, event: CellMouseEvent) { @@ -337,7 +339,7 @@ function onCellDoubleClick(args: CellClickArgs, event: CellMouseEvent) { ###### `onCellContextMenu?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` -Triggered when a cell is right clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default behavior +Callback triggered when a cell is right-clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default behavior ```tsx function onCellContextMenu(args: CellClickArgs, event: CellMouseEvent) { @@ -379,11 +381,11 @@ Check [more examples](website/routes/CellNavigation.tsx) ###### `onCellCopy?: Maybe<(args: CellCopyEvent, NoInfer>, event: CellClipboardEvent) => void>` -A function called when copy event is triggered on a cell +Callback triggered when a cell's content is copied. ###### `onCellPaste?: Maybe<(args: CellPasteEvent, NoInfer>, event: CellClipboardEvent) => void>` -A function called when paste event is triggered on a cell +Callback triggered when content is pasted into a cell. ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs) => void>;` @@ -397,11 +399,15 @@ Arguments: ###### `onScroll?: Maybe<(event: React.UIEvent) => void>` -A function called when the grid is scrolled. +Callback triggered when the grid is scrolled. ###### `onColumnResize?: Maybe<(column: CalculatedColumn, width: number) => void>` -A function called when column is resized. +Callback triggered when column is resized. + +###### `onColumnsReorder?: Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>` + +Callback triggered when columns are reordered. ###### `enableVirtualization?: Maybe` @@ -411,7 +417,7 @@ This prop can be used to disable virtualization. ###### `renderers?: Maybe>` -This prop can be used to override the internal renderers. The prop accepts an object of type +Custom renderers for cells, rows, and other components. ```tsx interface Renderers { @@ -445,7 +451,7 @@ function MyGrid() { ###### `rowClass?: Maybe<(row: R, rowIdx: number) => Maybe>` -A function to add a class on the row +Function to apply custom class names to rows. ```tsx import { DataGrid } from 'react-data-grid'; @@ -461,6 +467,8 @@ function rowClass(row: Row, rowIdx: number) { ###### `headerRowClass?: Maybe>` +Custom class name for the header row. + ###### `direction?: Maybe<'ltr' | 'rtl'>` This property sets the text direction of the grid, it defaults to `'ltr'` (left-to-right). Setting `direction` to `'rtl'` has the following effects: @@ -472,11 +480,11 @@ This property sets the text direction of the grid, it defaults to `'ltr'` (left- ###### `className?: string | undefined` -custom classname +Custom class name for the grid. ###### `style?: CSSProperties | undefined` -custom styles +Custom styles for the grid. ###### `'aria-label'?: string | undefined` From 3a6622cbc43827bc57cf1c06568d8f0a009136dc Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 16 Apr 2025 10:07:58 -0500 Subject: [PATCH 3/6] - space --- src/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/types.ts b/src/types.ts index 1c62c3e5e9..41956be6c5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -65,7 +65,6 @@ export interface Column { * @default false */ readonly displayCellContent?: Maybe; - /** * Commit changes when clicking outside the cell * @default true From 45d30f1a0d871aa16a5ae64e248c4ac24dd6c469 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 16 Apr 2025 10:26:30 -0500 Subject: [PATCH 4/6] More updates --- README.md | 19 ++++++++++--------- src/DataGrid.tsx | 48 ++++++++++++++++++++++++++++-------------------- 2 files changed, 38 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 72f6cfabfe..55216d132c 100644 --- a/README.md +++ b/README.md @@ -113,7 +113,7 @@ Rows pinned at the bottom of the grid for summary purposes. ###### `rowKeyGetter?: Maybe<(row: R) => K>` -A function returning a unique key/identifier per row. `rowKeyGetter` is required for row selection to work. +Function to return a unique key/identifier for each row. `rowKeyGetter` is required for row selection to work. ```tsx import { DataGrid } from 'react-data-grid'; @@ -136,7 +136,8 @@ function MyGrid() { ###### `onRowsChange?: Maybe<(rows: R[], data: RowsChangeData) => void>` -A function receiving row updates. +Callback triggered when rows are updated. + The first parameter is a new rows array with both the updated rows and the other untouched rows. The second parameter is an object with an `indexes` array highlighting which rows have changed by their index, and the `column` where the change happened. @@ -155,7 +156,7 @@ function MyGrid() { **Default:** `35` pixels -Either a number defining the height of row in pixels, or a function returning dynamic row heights. +Height of each row in pixels. A function can be used to set different row heights. ###### `headerRowHeight?: Maybe` @@ -175,11 +176,11 @@ A set of selected row keys. `rowKeyGetter` is required for row selection to work ###### `isRowSelectionDisabled?: Maybe<(row: NoInfer) => boolean>` -A function used to disable row selection on certain rows. +Function to determine if row selection is disabled for a specific row. ###### `onSelectedRowsChange?: Maybe<(selectedRows: Set) => void>` -A function called when row selection is changed. +Function called whenever row selection is changed. ```tsx import { useState } from 'react'; @@ -218,11 +219,11 @@ function isRowSelectionDisabled(row: Row) { ###### `sortColumns?: Maybe` -An array of sorted columns. +An array of sorted columns. Sorting can be done on multiple columns. ###### `onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>` -A function called when sorting is changed. +Callback triggered when sorting changes. ```tsx import { useState } from 'react'; @@ -286,7 +287,7 @@ function MyGrid() { ###### `onCellClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` -Triggered when a cell is clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default behavior +Callback triggered when a cell is clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default behavior ```tsx function onCellClick(args: CellClickArgs, event: CellMouseEvent) { @@ -677,7 +678,7 @@ Enables cell editing. If set and no editor property specified, then a textinput **Default**: `false` -Determines whether column is frozen. Frozem columns are pinned on th left. At the moment +Determines whether column is frozen. Frozen columns are pinned on the left. At the moment we do not support pinning columns on the right. ##### `resizable?: Maybe` diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index d2343cf1e3..7ead6b62dc 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -132,33 +132,30 @@ export interface DataGridProps extends Sha columns: readonly ColumnOrColumnGroup, NoInfer>[]; /** A function called for each rendered row that should return a plain key/value pair object */ rows: readonly R[]; - /** - * Rows to be pinned at the top of the rows view for summary, the vertical scroll bar will not scroll these rows. - */ + /** Rows pinned at the top of the grid for summary purposes */ topSummaryRows?: Maybe; - /** - * Rows to be pinned at the bottom of the rows view for summary, the vertical scroll bar will not scroll these rows. - */ + /** Rows pinned at the bottom of the grid for summary purposes */ bottomSummaryRows?: Maybe; - /** The getter should return a unique key for each row */ + /** Function to return a unique key/identifier for each row */ rowKeyGetter?: Maybe<(row: NoInfer) => K>; + /** Callback triggered when rows are updated */ onRowsChange?: Maybe<(rows: NoInfer[], data: RowsChangeData, NoInfer>) => void>; /** * Dimensions props */ /** - * The height of each row in pixels + * Height of each row in pixels * @default 35 */ rowHeight?: Maybe) => number)>; /** - * The height of the header row in pixels + * Height of the header row in pixels * @default 35 */ headerRowHeight?: Maybe; /** - * The height of each summary row in pixels + * Height of each summary row in pixels * @default 35 */ summaryRowHeight?: Maybe; @@ -166,49 +163,54 @@ export interface DataGridProps extends Sha /** * Feature props */ - /** Set of selected row keys */ + /** A set of selected row keys */ selectedRows?: Maybe>; - /** Determines if row selection is disabled, per row */ + /** Function to determine if row selection is disabled for a specific row */ isRowSelectionDisabled?: Maybe<(row: NoInfer) => boolean>; /** Function called whenever row selection is changed */ onSelectedRowsChange?: Maybe<(selectedRows: Set>) => void>; - /** Used for multi column sorting */ + /** An array of sorted columns */ sortColumns?: Maybe; + /** Callback triggered when sorting changes */ onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>; + /** Default options applied to all columns */ defaultColumnOptions?: Maybe, NoInfer>>; onFill?: Maybe<(event: FillEvent>) => NoInfer>; /** * Event props */ - /** Function called whenever a cell is clicked */ + /** Callback triggered when a cell is clicked */ onCellClick?: Maybe< (args: CellClickArgs, NoInfer>, event: CellMouseEvent) => void >; - /** Function called whenever a cell is double clicked */ + /** Callback triggered when a cell is double-clicked */ onCellDoubleClick?: Maybe< (args: CellClickArgs, NoInfer>, event: CellMouseEvent) => void >; - /** Function called whenever a cell is right clicked */ + /** Callback triggered when a cell is right-clicked */ onCellContextMenu?: Maybe< (args: CellClickArgs, NoInfer>, event: CellMouseEvent) => void >; + /** Callback triggered when a key is pressed in a cell */ onCellKeyDown?: Maybe< (args: CellKeyDownArgs, NoInfer>, event: CellKeyboardEvent) => void >; + /** Callback triggered when a cell's content is copied */ onCellCopy?: Maybe< (args: CellCopyEvent, NoInfer>, event: CellClipboardEvent) => void >; + /** Callback triggered when content is pasted into a cell */ onCellPaste?: Maybe< (args: CellPasteEvent, NoInfer>, event: CellClipboardEvent) => NoInfer >; /** Function called whenever cell selection is changed */ onSelectedCellChange?: Maybe<(args: CellSelectArgs, NoInfer>) => void>; - /** Called when the grid is scrolled */ + /** Callback triggered when the grid is scrolled */ onScroll?: Maybe<(event: React.UIEvent) => void>; - /** Called when a column is resized */ + /** Callback triggered when column is resized */ onColumnResize?: Maybe<(column: CalculatedColumn, width: number) => void>; - /** Called when a column is reordered */ + /** Callback triggered when columns are reordered */ onColumnsReorder?: Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>; /** @@ -220,10 +222,16 @@ export interface DataGridProps extends Sha /** * Miscellaneous */ + /** Custom renderers for cells, rows, and other components */ renderers?: Maybe, NoInfer>>; + /** Function to apply custom class names to rows */ rowClass?: Maybe<(row: NoInfer, rowIdx: number) => Maybe>; + /** Custom class name for the header row */ headerRowClass?: Maybe; - /** @default 'ltr' */ + /** + * Text direction of the grid ('ltr' or 'rtl') + * @default 'ltr' + * */ direction?: Maybe; 'data-testid'?: Maybe; 'data-cy'?: Maybe; From 4b6a33b71587b749439d753894d9790fe77bd6c2 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 16 Apr 2025 10:44:00 -0500 Subject: [PATCH 5/6] Tweaks --- README.md | 28 ++++++++++++++++++++-------- src/DataGrid.tsx | 6 +++--- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 55216d132c..b879c1c2b3 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ The DataGrid component is designed to handle large datasets efficiently while of - Strictly typed with TypeScript - [Keyboard accessibility](<(https://adazzle.github.io/react-data-grid/#/CommonFeatures)>) - Light and dark mode support out of the box. The light or dark themes can be enforced using the `rdg-light` or `rdg-dark` classes. -- [Frozen columns](https://adazzle.github.io/react-data-grid/#/CommonFeatures) +- [Frozen columns](https://adazzle.github.io/react-data-grid/#/CommonFeatures): Freeze columns to keep them visible during horizontal scrolling. - [Column resizing](https://adazzle.github.io/react-data-grid/#/CommonFeatures) - [Multi-column sorting](https://adazzle.github.io/react-data-grid/#/CommonFeatures) - Click on a sortable column header to toggle between its ascending/descending sort order @@ -53,15 +53,27 @@ The DataGrid component is designed to handle large datasets efficiently while of - [Changelog](CHANGELOG.md) - [Contributing](CONTRIBUTING.md) -## Install +## Installation + +to install `react-data-grid`, use npm or yarn: ```sh npm install react-data-grid +# or +yarn add react-data-grid +``` + +Additionally, import the default styles in your application: + +```jsx +import 'react-data-grid/lib/styles.css'; ``` `react-data-grid` is published as ECMAScript modules for evergreen browsers, bundlers, and server-side rendering. -## Quick start +## Getting started + +Here is a basic example of how to use `react-data-grid` in your React application: ```jsx import 'react-data-grid/lib/styles.css'; @@ -83,7 +95,7 @@ function App() { } ``` -## API +## API Reference ### Components @@ -95,7 +107,7 @@ function App() { See [`Column`](#column). -An array describing the grid's columns. +An array of column definitions. Each column should have a key and name. :warning: Passing a new `columns` array will trigger a re-render for the whole grid, avoid changing it as much as possible for optimal performance. @@ -136,7 +148,7 @@ function MyGrid() { ###### `onRowsChange?: Maybe<(rows: R[], data: RowsChangeData) => void>` -Callback triggered when rows are updated. +Callback triggered when rows are changed. The first parameter is a new rows array with both the updated rows and the other untouched rows. The second parameter is an object with an `indexes` array highlighting which rows have changed by their index, and the `column` where the change happened. @@ -180,7 +192,7 @@ Function to determine if row selection is disabled for a specific row. ###### `onSelectedRowsChange?: Maybe<(selectedRows: Set) => void>` -Function called whenever row selection is changed. +Callback triggered when the selection changes. ```tsx import { useState } from 'react'; @@ -219,7 +231,7 @@ function isRowSelectionDisabled(row: Row) { ###### `sortColumns?: Maybe` -An array of sorted columns. Sorting can be done on multiple columns. +An array of sorted columns. ###### `onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>` diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 7ead6b62dc..d93dea5829 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -128,7 +128,7 @@ export interface DataGridProps extends Sha /** * Grid and data Props */ - /** An array of objects representing each column on the grid */ + /** An array of column definitions */ columns: readonly ColumnOrColumnGroup, NoInfer>[]; /** A function called for each rendered row that should return a plain key/value pair object */ rows: readonly R[]; @@ -138,7 +138,7 @@ export interface DataGridProps extends Sha bottomSummaryRows?: Maybe; /** Function to return a unique key/identifier for each row */ rowKeyGetter?: Maybe<(row: NoInfer) => K>; - /** Callback triggered when rows are updated */ + /** Callback triggered when rows are changed */ onRowsChange?: Maybe<(rows: NoInfer[], data: RowsChangeData, NoInfer>) => void>; /** @@ -167,7 +167,7 @@ export interface DataGridProps extends Sha selectedRows?: Maybe>; /** Function to determine if row selection is disabled for a specific row */ isRowSelectionDisabled?: Maybe<(row: NoInfer) => boolean>; - /** Function called whenever row selection is changed */ + /** Callback triggered when the selection changes */ onSelectedRowsChange?: Maybe<(selectedRows: Set>) => void>; /** An array of sorted columns */ sortColumns?: Maybe; From 8ae67032f7cdfff5f2a4739bf3aea4e9150a32f0 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 16 Apr 2025 10:45:17 -0500 Subject: [PATCH 6/6] Chrome bug is fixed --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b879c1c2b3..075e3fdd0e 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ The DataGrid component is designed to handle large datasets efficiently while of - [Cell copy / pasting](https://adazzle.github.io/react-data-grid/#/AllFeatures) - [Cell value dragging / filling](https://adazzle.github.io/react-data-grid/#/AllFeatures) - [Customizable Renderers](https://adazzle.github.io/react-data-grid/#/CustomizableRenderers) -- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a [bug](https://issues.chromium.org/issues/40653832) with frozen columns. +- Right-to-left (RTL) support. ## Links