From 828319f4ef14544359034561781c355dfd436887 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 14 Nov 2024 12:59:45 -0600 Subject: [PATCH 01/19] Add some documentation --- README.md | 44 +++++++++++++++++++++++++++++++++++++++- src/DataGrid.tsx | 2 +- src/index.ts | 7 ++++++- website/routeTree.gen.ts | 29 +++++++++++++++++++++----- 4 files changed, 74 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 4a80556fa8..2677e09d1f 100644 --- a/README.md +++ b/README.md @@ -103,9 +103,11 @@ An array of rows, the rows data can be of any type. ###### `topSummaryRows?: Maybe` +An optional array of summary rows to show above the rows, usually used to display total values for example. + ###### `bottomSummaryRows?: Maybe` -An optional array of summary rows, usually used to display total values for example. +An optional array of summary rows to show below the rows, usually used to display total values for example. ###### `rowKeyGetter?: Maybe<(row: R) => K>` @@ -167,10 +169,50 @@ A number defining the height of summary rows. ###### `selectedRows?: Maybe>` +An set defining keys of selected rows. `rowKeyGetter` is required for row selection to work. + ###### `isRowSelectionDisabled?: Maybe<(row: NoInfer) => boolean>` +A function used to disable row selection on certain rows. + ###### `onSelectedRowsChange?: Maybe<(selectedRows: Set) => void>` +A function called when row selection is changed. + +```tsx +import { useState } from 'react'; +import DataGrid, { SelectColumn } from 'react-data-grid'; + +const rows = []; + +const columns: readonly Column[] = [ + SelectColumn, + { + key: 'name', + name: 'Name' + } +]; + +function MyGrid() { + const [selectedRows, setSelectedRows] = useState((): ReadonlySet => new Set()); + + function isRowSelectionDisabled(row) { + return !row.isActive; + } + + return ( + + ); +} +``` + ###### `sortColumns?: Maybe` ###### `onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>` diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 593ed97154..e7abc74913 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -85,7 +85,7 @@ interface EditCellState extends Position { readonly originalRow: R; } -type DefaultColumnOptions = Pick< +export type DefaultColumnOptions = Pick< Column, 'renderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable' | 'draggable' >; diff --git a/src/index.ts b/src/index.ts index d76283ea28..f016f98853 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,11 @@ import './style/layers.css'; -export { default, type DataGridProps, type DataGridHandle } from './DataGrid'; +export { + default, + type DataGridProps, + type DataGridHandle, + type DefaultColumnOptions +} from './DataGrid'; export { default as TreeDataGrid, type TreeDataGridProps } from './TreeDataGrid'; export { DataGridDefaultRenderersProvider } from './DataGridDefaultRenderersProvider'; export { default as Row } from './Row'; diff --git a/website/routeTree.gen.ts b/website/routeTree.gen.ts index 30f143436e..7ba7263c99 100644 --- a/website/routeTree.gen.ts +++ b/website/routeTree.gen.ts @@ -1,12 +1,12 @@ -/* prettier-ignore-start */ - /* eslint-disable */ // @ts-nocheck // noinspection JSUnusedGlobalSymbols -// This file is auto-generated by TanStack Router +// This file was automatically generated by TanStack Router. +// You should NOT make any changes in this file as it will be overwritten. +// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. import { createFileRoute } from '@tanstack/react-router' @@ -43,6 +43,7 @@ const AnimationLazyImport = createFileRoute('/Animation')() // Create/Update Routes const VariableRowHeightLazyRoute = VariableRowHeightLazyImport.update({ + id: '/VariableRowHeight', path: '/VariableRowHeight', getParentRoute: () => rootRoute, } as any).lazy(() => @@ -50,16 +51,19 @@ const VariableRowHeightLazyRoute = VariableRowHeightLazyImport.update({ ) const TreeViewLazyRoute = TreeViewLazyImport.update({ + id: '/TreeView', path: '/TreeView', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/TreeView.lazy').then((d) => d.Route)) const ScrollToCellLazyRoute = ScrollToCellLazyImport.update({ + id: '/ScrollToCell', path: '/ScrollToCell', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/ScrollToCell.lazy').then((d) => d.Route)) const RowsReorderingLazyRoute = RowsReorderingLazyImport.update({ + id: '/RowsReordering', path: '/RowsReordering', getParentRoute: () => rootRoute, } as any).lazy(() => @@ -67,31 +71,37 @@ const RowsReorderingLazyRoute = RowsReorderingLazyImport.update({ ) const RowGroupingLazyRoute = RowGroupingLazyImport.update({ + id: '/RowGrouping', path: '/RowGrouping', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/RowGrouping.lazy').then((d) => d.Route)) const ResizableGridLazyRoute = ResizableGridLazyImport.update({ + id: '/ResizableGrid', path: '/ResizableGrid', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/ResizableGrid.lazy').then((d) => d.Route)) const NoRowsLazyRoute = NoRowsLazyImport.update({ + id: '/NoRows', path: '/NoRows', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/NoRows.lazy').then((d) => d.Route)) const MillionCellsLazyRoute = MillionCellsLazyImport.update({ + id: '/MillionCells', path: '/MillionCells', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/MillionCells.lazy').then((d) => d.Route)) const MasterDetailLazyRoute = MasterDetailLazyImport.update({ + id: '/MasterDetail', path: '/MasterDetail', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/MasterDetail.lazy').then((d) => d.Route)) const InfiniteScrollingLazyRoute = InfiniteScrollingLazyImport.update({ + id: '/InfiniteScrolling', path: '/InfiniteScrolling', getParentRoute: () => rootRoute, } as any).lazy(() => @@ -99,11 +109,13 @@ const InfiniteScrollingLazyRoute = InfiniteScrollingLazyImport.update({ ) const HeaderFiltersLazyRoute = HeaderFiltersLazyImport.update({ + id: '/HeaderFilters', path: '/HeaderFilters', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/HeaderFilters.lazy').then((d) => d.Route)) const CustomizableRenderersLazyRoute = CustomizableRenderersLazyImport.update({ + id: '/CustomizableRenderers', path: '/CustomizableRenderers', getParentRoute: () => rootRoute, } as any).lazy(() => @@ -111,11 +123,13 @@ const CustomizableRenderersLazyRoute = CustomizableRenderersLazyImport.update({ ) const ContextMenuLazyRoute = ContextMenuLazyImport.update({ + id: '/ContextMenu', path: '/ContextMenu', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/ContextMenu.lazy').then((d) => d.Route)) const CommonFeaturesLazyRoute = CommonFeaturesLazyImport.update({ + id: '/CommonFeatures', path: '/CommonFeatures', getParentRoute: () => rootRoute, } as any).lazy(() => @@ -123,6 +137,7 @@ const CommonFeaturesLazyRoute = CommonFeaturesLazyImport.update({ ) const ColumnsReorderingLazyRoute = ColumnsReorderingLazyImport.update({ + id: '/ColumnsReordering', path: '/ColumnsReordering', getParentRoute: () => rootRoute, } as any).lazy(() => @@ -130,6 +145,7 @@ const ColumnsReorderingLazyRoute = ColumnsReorderingLazyImport.update({ ) const ColumnSpanningLazyRoute = ColumnSpanningLazyImport.update({ + id: '/ColumnSpanning', path: '/ColumnSpanning', getParentRoute: () => rootRoute, } as any).lazy(() => @@ -137,6 +153,7 @@ const ColumnSpanningLazyRoute = ColumnSpanningLazyImport.update({ ) const ColumnGroupingLazyRoute = ColumnGroupingLazyImport.update({ + id: '/ColumnGrouping', path: '/ColumnGrouping', getParentRoute: () => rootRoute, } as any).lazy(() => @@ -144,6 +161,7 @@ const ColumnGroupingLazyRoute = ColumnGroupingLazyImport.update({ ) const CellNavigationLazyRoute = CellNavigationLazyImport.update({ + id: '/CellNavigation', path: '/CellNavigation', getParentRoute: () => rootRoute, } as any).lazy(() => @@ -151,16 +169,19 @@ const CellNavigationLazyRoute = CellNavigationLazyImport.update({ ) const AnimationLazyRoute = AnimationLazyImport.update({ + id: '/Animation', path: '/Animation', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/Animation.lazy').then((d) => d.Route)) const AllFeaturesRoute = AllFeaturesImport.update({ + id: '/AllFeatures', path: '/AllFeatures', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/AllFeatures.lazy').then((d) => d.Route)) const IndexRoute = IndexImport.update({ + id: '/', path: '/', getParentRoute: () => rootRoute, } as any) @@ -519,8 +540,6 @@ export const routeTree = rootRoute ._addFileChildren(rootRouteChildren) ._addFileTypes() -/* prettier-ignore-end */ - /* ROUTE_MANIFEST_START { "routes": { From 777bd4e13dbd4276ee96d1f14fc4481ad5262530 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 14 Nov 2024 13:24:39 -0600 Subject: [PATCH 02/19] More docs --- README.md | 90 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 78 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 2677e09d1f..b7174799db 100644 --- a/README.md +++ b/README.md @@ -169,7 +169,7 @@ A number defining the height of summary rows. ###### `selectedRows?: Maybe>` -An set defining keys of selected rows. `rowKeyGetter` is required for row selection to work. +A set defining keys of selected rows. `rowKeyGetter` is required for row selection to work. ###### `isRowSelectionDisabled?: Maybe<(row: NoInfer) => boolean>` @@ -183,23 +183,16 @@ A function called when row selection is changed. import { useState } from 'react'; import DataGrid, { SelectColumn } from 'react-data-grid'; -const rows = []; +const rows: readonly Rows[] = [...]; const columns: readonly Column[] = [ - SelectColumn, - { - key: 'name', - name: 'Name' - } + SelectColumn + // other columns ]; function MyGrid() { const [selectedRows, setSelectedRows] = useState((): ReadonlySet => new Set()); - function isRowSelectionDisabled(row) { - return !row.isActive; - } - return ( ); } + +function rowKeyGetter(row: Row) { + return row.id; +} + +function isRowSelectionDisabled(row: Row) { + return !row.isActive; +} ``` ###### `sortColumns?: Maybe` +An array of sorted columns. + ###### `onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>` +A function called when sorting is changed + +```tsx +import { useState } from 'react'; +import DataGrid, { SelectColumn } from 'react-data-grid'; + +const rows: readonly Rows[] = [...]; + +const columns: readonly Column[] = [ + { + key: 'name', + name: 'Name', + sortable: true + }, + // other columns +]; + +function MyGrid() { + const [sortColumns, setSortColumns] = useState([]); + + return ( + + ); +} +``` + +Grid can be sorted on multiple columns using `ctrl (command) + click`. To disable multiple sorting, change the `onSortColumnsChange` function to + +```tsx +onSortColumnsChange(sortColumns: SortColumn[]) { + setSortColumns(sortColumns.slice(-1)); +} +``` + ###### `defaultColumnOptions?: Maybe>` ###### `groupBy?: Maybe` @@ -291,7 +333,21 @@ function MyGrid() { :warning: To prevent all rows from being unmounted on re-renders, make sure to pass a static or memoized component to `renderRow`. -###### `rowClass?: Maybe<(row: R) => Maybe>` +###### `rowClass?: Maybe<(row: R, rowIdx: number) => Maybe>` + +A function to add a class on the row + +```tsx +import DataGrid from 'react-data-grid'; + +function MyGrid() { + return ; +} + +function rowClass(row: Row, rowIdx: number) { + return rowIdx % 2 === 0 ? 'even' : 'odd'; +} +``` ##### `direction?: Maybe<'ltr' | 'rtl'>` @@ -304,14 +360,24 @@ This property sets the text direction of the grid, it defaults to `'ltr'` (left- ###### `className?: string | undefined` +custom classname + ###### `style?: CSSProperties | undefined` +custom styles + ###### `'aria-label'?: string | undefined` +The label of the Data Grid. We recommend providing a label using `aria-label` or `aria-labelledby` + ###### `'aria-labelledby'?: string | undefined` +The id of the element containing a label for the Data Grid. We recommend providing a label using `aria-label` or `aria-labelledby` + ###### `'aria-describedby'?: string | undefined` +If the grid has a caption or description, `aria-describedby` can be set on the grid element with a value referring to the element containing the description. + ###### `'data-testid'?: Maybe` #### `` From da64d7d0d5ba742608f798b7c96f8ae7e751f09a Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 14 Nov 2024 13:36:28 -0600 Subject: [PATCH 03/19] Add docs for events --- README.md | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/README.md b/README.md index b7174799db..a36ece927b 100644 --- a/README.md +++ b/README.md @@ -277,10 +277,57 @@ onSortColumnsChange(sortColumns: SortColumn[]) { ###### `onCellClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` +A function called when cell is clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent to override the default bahavior + +```tsx +function onCellClick(args, event) { + if (args.column.key === 'id') { + event.preventGridDefault(); + } +} + +; +``` + +This event can be used to open cell editor on single click + +```tsx +function onCellClick(args, event) { + if (args.column.key === 'id') { + event.preventGridDefault(); + args.selectCell(true); + } +} +``` + ###### `onCellDoubleClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` +A function called when cell is double clicked. The default behavior is to open the editor if the cell is editable. Call `preventGridDefault` to override the default bahavior + +```tsx +function onCellDoubleClick(args, event) { + if (args.column.key === 'id') { + event.preventGridDefault(); + } +} + +; +``` + ###### `onCellContextMenu?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` +A function called when cell is right clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent to override the default bahavior + +```tsx +function onCellContextMenu(args, event) { + if (args.column.key === 'id') { + event.preventGridDefault(); + } +} + +; +``` + ###### `onCellKeyDown?: Maybe<(args: CellKeyDownArgs, event: CellKeyboardEvent) => void>` ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs) => void>;` From ca13f5d3fff9aef5bbc939514d652d5610aaeb32 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 14 Nov 2024 16:54:57 -0600 Subject: [PATCH 04/19] more docs --- README.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a36ece927b..beca97a4a9 100644 --- a/README.md +++ b/README.md @@ -277,7 +277,7 @@ onSortColumnsChange(sortColumns: SortColumn[]) { ###### `onCellClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` -A function called when cell is clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent to override the default bahavior +A function called when cell is clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default bahavior ```tsx function onCellClick(args, event) { @@ -302,7 +302,7 @@ function onCellClick(args, event) { ###### `onCellDoubleClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` -A function called when cell is double clicked. The default behavior is to open the editor if the cell is editable. Call `preventGridDefault` to override the default bahavior +A function called when cell is double clicked. The default behavior is to open the editor if the cell is editable. Call `preventGridDefault` to prevent the default bahavior ```tsx function onCellDoubleClick(args, event) { @@ -316,7 +316,7 @@ function onCellDoubleClick(args, event) { ###### `onCellContextMenu?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` -A function called when cell is right clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent to override the default bahavior +A function called when cell is right clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default bahavior ```tsx function onCellContextMenu(args, event) { @@ -342,10 +342,16 @@ Arguments: ###### `onScroll?: Maybe<(event: React.UIEvent) => void>` +A function called when the grid is scrolled. + ###### `onColumnResize?: Maybe<(idx: number, width: number) => void>` ###### `enableVirtualization?: Maybe` +> Default: `true` + +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 From 14a3e9fe3248ddfa80478176549896340444ec8a Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 14 Nov 2024 19:08:42 -0600 Subject: [PATCH 05/19] Updates --- README.md | 48 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index beca97a4a9..ab6ff92275 100644 --- a/README.md +++ b/README.md @@ -103,11 +103,11 @@ An array of rows, the rows data can be of any type. ###### `topSummaryRows?: Maybe` -An optional array of summary rows to show above the rows, usually used to display total values for example. +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. ###### `bottomSummaryRows?: Maybe` -An optional array of summary rows to show below the rows, usually used to display total values for example. +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. ###### `rowKeyGetter?: Maybe<(row: R) => K>` @@ -169,7 +169,7 @@ A number defining the height of summary rows. ###### `selectedRows?: Maybe>` -A set defining keys of selected rows. `rowKeyGetter` is required for row selection to work. +A set of selected row keys. `rowKeyGetter` is required for row selection to work. ###### `isRowSelectionDisabled?: Maybe<(row: NoInfer) => boolean>` @@ -186,7 +186,7 @@ import DataGrid, { SelectColumn } from 'react-data-grid'; const rows: readonly Rows[] = [...]; const columns: readonly Column[] = [ - SelectColumn + SelectColumn, // other columns ]; @@ -277,7 +277,7 @@ onSortColumnsChange(sortColumns: SortColumn[]) { ###### `onCellClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` -A function called when cell is clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default bahavior +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, event) { @@ -302,7 +302,7 @@ function onCellClick(args, event) { ###### `onCellDoubleClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` -A function called when cell is double clicked. The default behavior is to open the editor if the cell is editable. Call `preventGridDefault` to prevent the default bahavior +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, event) { @@ -316,7 +316,7 @@ function onCellDoubleClick(args, event) { ###### `onCellContextMenu?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` -A function called when cell is right clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default bahavior +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, event) { @@ -330,6 +330,8 @@ function onCellContextMenu(args, event) { ###### `onCellKeyDown?: Maybe<(args: CellKeyDownArgs, event: CellKeyboardEvent) => void>` +A function called when keydown event is triggered on a cell. This event can be used to customize cell navigation and editing behavior. + ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs) => void>;` Triggered when the selected cell is changed. @@ -346,9 +348,11 @@ A function called when the grid is scrolled. ###### `onColumnResize?: Maybe<(idx: number, width: number) => void>` +A function called when column is resized. + ###### `enableVirtualization?: Maybe` -> Default: `true` +**Default:** `true` This prop can be used to disable virtualization. @@ -402,7 +406,7 @@ function rowClass(row: Row, rowIdx: number) { } ``` -##### `direction?: Maybe<'ltr' | 'rtl'>` +###### `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: @@ -421,11 +425,11 @@ custom styles ###### `'aria-label'?: string | undefined` -The label of the Data Grid. We recommend providing a label using `aria-label` or `aria-labelledby` +The label of the grid. We recommend providing a label using `aria-label` or `aria-labelledby` ###### `'aria-labelledby'?: string | undefined` -The id of the element containing a label for the Data Grid. We recommend providing a label using `aria-label` or `aria-labelledby` +The id of the element containing a label for the grid. We recommend providing a label using `aria-label` or `aria-labelledby` ###### `'aria-describedby'?: string | undefined` @@ -433,6 +437,18 @@ If the grid has a caption or description, `aria-describedby` can be set on the g ###### `'data-testid'?: Maybe` +This prop can be used to add a testid for testing. We recommend using `role` and `name` to find the grid element + +```tsx +function MyGrid() { + return ; +} + +function MyGridTest() { + const grid = screen.getByRole('grid', { name: 'my-grid' }); +} +``` + #### `` ##### Props @@ -501,12 +517,20 @@ See [`RenderGroupCellProps`](#rendergroupcellprops) #### `SelectColumn: Column` -#### `SELECT_COLUMN_KEY = 'select-row'` +#### `SELECT_COLUMN_KEY = 'rdg-select-column'` ### Types #### `Column` +##### `name` **required** + +The name of the column. By default it will be displayed in the header cell + +##### `key` **required** + +A unique key to distinguish each column + #### `DataGridHandle` #### `RenderEditCellProps` From 59aca44a96bdea425079350f76f992f3599a8468 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 15 Nov 2024 10:54:23 -0600 Subject: [PATCH 06/19] updates --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index ab6ff92275..83df1cf998 100644 --- a/README.md +++ b/README.md @@ -531,6 +531,23 @@ The name of the column. By default it will be displayed in the header cell A unique key to distinguish each column +##### `width` **Default** `auto` + +Width can be any valid css grid column value. If not specified, it will be determined automatically based on grid width and specified widths of other columns. + +```tsx +width: 80; // pixels +width: '25%'; +width: 'max-length'; +width: 'minmax(100px, max-content)'; +``` + +`max-content` can be used to expand the column to show all the content. Note that the grid is only able to calculate column width for visible rows. + +##### `minWidth` **Default** `50` pixels + +##### `maxWidth` + #### `DataGridHandle` #### `RenderEditCellProps` From 22d9ec1bfc492489177a9ea5bc84ca9debcaad92 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 15 Nov 2024 12:09:36 -0600 Subject: [PATCH 07/19] Updates --- README.md | 30 ++++++++++++++++++++++++++++-- src/types.ts | 14 ++++++++++---- 2 files changed, 38 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 83df1cf998..9eb3ccd210 100644 --- a/README.md +++ b/README.md @@ -531,7 +531,9 @@ The name of the column. By default it will be displayed in the header cell A unique key to distinguish each column -##### `width` **Default** `auto` +##### `width` + +**Default** `auto` Width can be any valid css grid column value. If not specified, it will be determined automatically based on grid width and specified widths of other columns. @@ -544,10 +546,34 @@ width: 'minmax(100px, max-content)'; `max-content` can be used to expand the column to show all the content. Note that the grid is only able to calculate column width for visible rows. -##### `minWidth` **Default** `50` pixels +##### `minWidth` + +**Default**: `50` pixels + +Sets the maximum width of a column. ##### `maxWidth` +Sets the maximum width of a column. + +##### `cellClass` + +##### `headerCellClass` + +##### `summaryCellClass` + +##### `renderCell` + +Render function used to render the content of cells + +##### `renderHeaderCell` + +Render function used to render the content of header cells + +##### `renderSummaryCell` + +Render function used to render the content of summary cells + #### `DataGridHandle` #### `RenderEditCellProps` diff --git a/src/types.ts b/src/types.ts index 8eff5abe2b..4cf55a0174 100644 --- a/src/types.ts +++ b/src/types.ts @@ -13,19 +13,25 @@ export interface Column { readonly name: string | ReactElement; /** A unique key to distinguish each column */ readonly key: string; - /** Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns */ + /** + * Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns + * @default 'auto' + */ readonly width?: Maybe; - /** Minimum column width in px. */ + /** + * Minimum column width in px + * @default '50px' + */ readonly minWidth?: Maybe; /** Maximum column width in px. */ readonly maxWidth?: Maybe; readonly cellClass?: Maybe Maybe)>; readonly headerCellClass?: Maybe; readonly summaryCellClass?: Maybe Maybe)>; - /** Render function used to render the content of the column's header cell */ - readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps) => ReactNode>; /** Render function used 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 */ + readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps) => ReactNode>; /** Render function used to render the content of summary cells */ readonly renderSummaryCell?: Maybe< (props: RenderSummaryCellProps) => ReactNode From 0d2b0a742cbe95f522559972797218989823559f Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 15 Nov 2024 14:34:04 -0600 Subject: [PATCH 08/19] updates --- README.md | 57 +++++++++++++++++++++++++++++++++++++--------------- src/types.ts | 2 +- 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 9eb3ccd210..5ba2861a8e 100644 --- a/README.md +++ b/README.md @@ -261,13 +261,24 @@ onSortColumnsChange(sortColumns: SortColumn[]) { ###### `defaultColumnOptions?: Maybe>` -###### `groupBy?: Maybe` - -###### `rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record>` - -###### `expandedGroupIds?: Maybe>` +Column options that are applied to all the columns -###### `onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set) => void>` +```tsx +function MyGrid() { + return ( + + ); +} +``` ###### `onFill?: Maybe<(event: FillEvent) => R>` @@ -362,10 +373,10 @@ This prop can be used to override the internal renderers. The prop accepts an ob ```tsx interface Renderers { + renderCell?: Maybe<(key: Key, props: CellRendererProps) => ReactNode>; renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>; renderRow?: Maybe<(key: Key, props: RenderRowProps) => ReactNode>; renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>; - renderCell?: Maybe<(key: Key, props: CellRendererProps) => ReactNode>; noRowsFallback?: Maybe; } ``` @@ -449,6 +460,18 @@ function MyGridTest() { } ``` +#### `` + +`TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). + +###### `groupBy?: Maybe` + +###### `rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record>` + +###### `expandedGroupIds?: Maybe>` + +###### `onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set) => void>` + #### `` ##### Props @@ -523,15 +546,15 @@ See [`RenderGroupCellProps`](#rendergroupcellprops) #### `Column` -##### `name` **required** +##### `name: string | ReactElement` The name of the column. By default it will be displayed in the header cell -##### `key` **required** +##### `key: string` A unique key to distinguish each column -##### `width` +##### `width?: Maybe` **Default** `auto` @@ -546,23 +569,25 @@ width: 'minmax(100px, max-content)'; `max-content` can be used to expand the column to show all the content. Note that the grid is only able to calculate column width for visible rows. -##### `minWidth` +##### `minWidth?: Maybe` **Default**: `50` pixels Sets the maximum width of a column. -##### `maxWidth` +##### `maxWidth?: Maybe` Sets the maximum width of a column. -##### `cellClass` +##### `cellClass?: Maybe Maybe)>` + +A function to add a class on the row -##### `headerCellClass` +##### `headerCellClass?: Maybe` -##### `summaryCellClass` +##### `summaryCellClass?: Maybe Maybe)>` -##### `renderCell` +##### `renderCell?: Maybe<(props: RenderCellProps) => ReactNode>` Render function used to render the content of cells diff --git a/src/types.ts b/src/types.ts index 4cf55a0174..a3e4fec797 100644 --- a/src/types.ts +++ b/src/types.ts @@ -315,10 +315,10 @@ export interface RenderCheckboxProps } export interface Renderers { + renderCell?: Maybe<(key: Key, props: CellRendererProps) => ReactNode>; renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>; renderRow?: Maybe<(key: Key, props: RenderRowProps) => ReactNode>; renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>; - renderCell?: Maybe<(key: Key, props: CellRendererProps) => ReactNode>; noRowsFallback?: Maybe; } From c1161e9aaddd36df55e10653d464353251caefea Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 15 Nov 2024 15:57:29 -0600 Subject: [PATCH 09/19] `onCellKeyDown` --- README.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5ba2861a8e..fa5c89f306 100644 --- a/README.md +++ b/README.md @@ -343,6 +343,30 @@ function onCellContextMenu(args, event) { A function called when keydown event is triggered on a cell. This event can be used to customize cell navigation and editing behavior. +**Examples** + +- Prevent editing on `Enter` + +```tsx +function onCellKeyDown(args, event) { + if (args.mode === 'SELECT' && event.key === 'Enter') { + event.preventGridDefault(); + } +} +``` + +- Prevent navigation on `Tab` + +```tsx +function onCellKeyDown(args, event) { + if (args.mode === 'SELECT' && event.key === 'Tab') { + event.preventGridDefault(); + } +} +``` + +Check [more examples](website/routes/CellNavigation.lazy.tsx) + ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs) => void>;` Triggered when the selected cell is changed. @@ -462,7 +486,7 @@ function MyGridTest() { #### `` -`TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). +`TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). At ###### `groupBy?: Maybe` @@ -472,6 +496,8 @@ function MyGridTest() { ###### `onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set) => void>` +At the moment `TreeDataGrid` does not support `onFill` and `isRowDisabled` props + #### `` ##### Props From 9ded186041945fab443259fe1b48b1528440038c Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 15 Nov 2024 16:13:24 -0600 Subject: [PATCH 10/19] Updates, pin eslint --- README.md | 19 ++++++++++++++++--- package.json | 2 +- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index fa5c89f306..b5e8146b97 100644 --- a/README.md +++ b/README.md @@ -251,7 +251,7 @@ function MyGrid() { } ``` -Grid can be sorted on multiple columns using `ctrl (command) + click`. To disable multiple sorting, change the `onSortColumnsChange` function to +Grid can be sorted on multiple columns using `ctrl (command) + click`. To disable multiple column sorting, change the `onSortColumnsChange` function to ```tsx onSortColumnsChange(sortColumns: SortColumn[]) { @@ -291,7 +291,7 @@ function MyGrid() { 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, event) { +function onCellClick(args: CellClickArgs, event: CellMouseEvent) { if (args.column.key === 'id') { event.preventGridDefault(); } @@ -303,7 +303,7 @@ function onCellClick(args, event) { This event can be used to open cell editor on single click ```tsx -function onCellClick(args, event) { +function onCellClick(args: CellClickArgs, event: CellMouseEvent) { if (args.column.key === 'id') { event.preventGridDefault(); args.selectCell(true); @@ -311,6 +311,19 @@ function onCellClick(args, event) { } ``` +Arguments: + +`args: CellClickArgs` + +- `args.row`: `R` - row object of the currently selected cell +- `args.column`: `CalculatedColumn` - column object of the currently selected cell +- `args.selectCell`: `(enableEditor?: boolean) => void` - function to manually select the cell and optionally pass `true` to start editing + +`event` extends `React.MouseEvent` + +- `event.preventGridDefault:`: `() => void` +- `event.isGridDefaultPrevented`: `boolean` + ###### `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 diff --git a/package.json b/package.json index 961778cae0..b4dad5f627 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "@wyw-in-js/vite": "^0.5.0", "babel-plugin-optimize-clsx": "^2.6.2", "browserslist": "^4.24.0", - "eslint": "^9.14.0", + "eslint": "9.14.0", "eslint-plugin-jest-dom": "^5.0.1", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-compiler": "^19.0.0-beta-a7bf2bd-20241110", From f23a3f0a3134e0c5bf446142b8fdccf6f373a7d7 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 15 Nov 2024 16:21:32 -0600 Subject: [PATCH 11/19] Updates --- README.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index b5e8146b97..c34220d233 100644 --- a/README.md +++ b/README.md @@ -329,7 +329,7 @@ Arguments: 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, event) { +function onCellDoubleClick(args: CellClickArgs, event: CellMouseEvent) { if (args.column.key === 'id') { event.preventGridDefault(); } @@ -343,7 +343,7 @@ function onCellDoubleClick(args, event) { 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, event) { +function onCellContextMenu(args: CellClickArgs, event: CellMouseEvent) { if (args.column.key === 'id') { event.preventGridDefault(); } @@ -361,7 +361,7 @@ A function called when keydown event is triggered on a cell. This event can be u - Prevent editing on `Enter` ```tsx -function onCellKeyDown(args, event) { +function onCellKeyDown(args: CellKeyDownArgs, event: CellKeyboardEvent) { if (args.mode === 'SELECT' && event.key === 'Enter') { event.preventGridDefault(); } @@ -371,7 +371,7 @@ function onCellKeyDown(args, event) { - Prevent navigation on `Tab` ```tsx -function onCellKeyDown(args, event) { +function onCellKeyDown(args: CellKeyDownArgs, event: CellKeyboardEvent) { if (args.mode === 'SELECT' && event.key === 'Tab') { event.preventGridDefault(); } @@ -499,7 +499,7 @@ function MyGridTest() { #### `` -`TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). At +`TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). At the moment `TreeDataGrid` does not support `onFill` and `isRowDisabled` props ###### `groupBy?: Maybe` @@ -509,8 +509,6 @@ function MyGridTest() { ###### `onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set) => void>` -At the moment `TreeDataGrid` does not support `onFill` and `isRowDisabled` props - #### `` ##### Props From b962d7aae35732a126fb9a19652e3bb202575f68 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 15 Nov 2024 16:22:59 -0600 Subject: [PATCH 12/19] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c34220d233..dcc48da358 100644 --- a/README.md +++ b/README.md @@ -499,7 +499,7 @@ function MyGridTest() { #### `` -`TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). At the moment `TreeDataGrid` does not support `onFill` and `isRowDisabled` props +`TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). At the moment `TreeDataGrid` does not support `onFill` and `isRowSelectionDisabled` props ###### `groupBy?: Maybe` From a49e43cea879f1a665b11a24eb267d365f7da15c Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 22 Nov 2024 15:51:17 -0600 Subject: [PATCH 13/19] Update readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index dcc48da358..c6a6e7613b 100644 --- a/README.md +++ b/README.md @@ -315,6 +315,7 @@ Arguments: `args: CellClickArgs` +- `args.rowIdx`: `number` - row index of the currently selected cell - `args.row`: `R` - row object of the currently selected cell - `args.column`: `CalculatedColumn` - column object of the currently selected cell - `args.selectCell`: `(enableEditor?: boolean) => void` - function to manually select the cell and optionally pass `true` to start editing @@ -394,7 +395,7 @@ Arguments: A function called when the grid is scrolled. -###### `onColumnResize?: Maybe<(idx: number, width: number) => void>` +###### `onColumnResize?: Maybe<(column: CalculatedColumn, width: number) => void>` A function called when column is resized. From f1677f00b3da4a4223fae30606cd52c0b621dd65 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 4 Dec 2024 10:06:43 -0600 Subject: [PATCH 14/19] Use markdown plugin --- eslint.config.js | 19 +++++++++++++++++++ package.json | 3 ++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/eslint.config.js b/eslint.config.js index be52560a1d..82d8178c16 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -9,6 +9,7 @@ import reactHooks from 'eslint-plugin-react-hooks'; import reactHooksExtra from 'eslint-plugin-react-hooks-extra'; import sonarjs from 'eslint-plugin-sonarjs'; import testingLibrary from 'eslint-plugin-testing-library'; +import markdown from '@eslint/markdown'; export default [ { @@ -728,5 +729,23 @@ export default [ 'no-undef': 1, 'no-use-before-define': [1, { functions: false, classes: false, variables: false }] } + }, + + { + name: 'markdown', + files: ['**/*.md'], + plugins: { + markdown + }, + language: 'markdown/commonmark', + rules: { + 'markdown/fenced-code-language': 1, + 'markdown/heading-increment': 1, + 'markdown/no-duplicate-headings': 0, + 'markdown/no-empty-links': 1, + 'markdown/no-html': 0, + 'markdown/no-invalid-label-refs': 1, + 'markdown/no-missing-label-refs': 1 + } } ]; diff --git a/package.json b/package.json index d5a0c481c4..34cf0348ac 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@babel/runtime": "^7.21.5", "@biomejs/biome": "1.9.4", "@eslint/compat": "^1.2.3", + "@eslint/markdown": "^6.2.1", "@faker-js/faker": "^9.0.0", "@ianvs/prettier-plugin-sort-imports": "^4.0.2", "@linaria/core": "^6.0.0", @@ -87,7 +88,7 @@ "@wyw-in-js/vite": "^0.5.0", "babel-plugin-optimize-clsx": "^2.6.2", "browserslist": "^4.24.0", - "eslint": "^9.15.0", + "eslint": "^9.16.0", "eslint-plugin-jest-dom": "^5.5.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-compiler": "^19.0.0-beta-0dec889-20241115", From d49b0f63c75983390b3011190a73c83d14afe337 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 4 Dec 2024 10:29:03 -0600 Subject: [PATCH 15/19] eslint --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c6a6e7613b..495b4c85f5 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,7 @@ function App() { #### `` -##### Props +##### DataGridProps ###### `columns: readonly Column[]` @@ -502,6 +502,8 @@ function MyGridTest() { `TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). At the moment `TreeDataGrid` does not support `onFill` and `isRowSelectionDisabled` props +##### TreeDataGridProps + ###### `groupBy?: Maybe` ###### `rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record>` From 8f8ce2945b870fef7a065d754a8f11425ffc9589 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 4 Dec 2024 12:26:26 -0600 Subject: [PATCH 16/19] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 495b4c85f5..32b5a1d451 100644 --- a/README.md +++ b/README.md @@ -603,7 +603,7 @@ Width can be any valid css grid column value. If not specified, it will be deter ```tsx width: 80; // pixels width: '25%'; -width: 'max-length'; +width: 'max-content'; width: 'minmax(100px, max-content)'; ``` From 447fbc925dafcf1d4123e8e85ea250f924389dba Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 4 Dec 2024 12:28:05 -0600 Subject: [PATCH 17/19] `aria-description` --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 32b5a1d451..09f463c841 100644 --- a/README.md +++ b/README.md @@ -480,6 +480,8 @@ The label of the grid. We recommend providing a label using `aria-label` or `ari The id of the element containing a label for the grid. We recommend providing a label using `aria-label` or `aria-labelledby` +###### `'aria-description'?: string | undefined` + ###### `'aria-describedby'?: string | undefined` If the grid has a caption or description, `aria-describedby` can be set on the grid element with a value referring to the element containing the description. From d23a2b00295d192444dd87f280274cf065d36dac Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 17 Dec 2024 16:03:01 -0600 Subject: [PATCH 18/19] :dir is now suppoted --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 09f463c841..6e7a23d41f 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ - [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://bugs.chromium.org/p/chromium/issues/detail?id=1140374) with frozen columns, and the [`:dir` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) is not supported +- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1140374) with frozen columns. ## Links From c7c2c429f2d4609536d08293e87ddc539f6b4c56 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 17 Dec 2024 16:14:10 -0600 Subject: [PATCH 19/19] Update hooks --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e7a23d41f..ef726156e7 100644 --- a/README.md +++ b/README.md @@ -576,7 +576,9 @@ See [`RenderGroupCellProps`](#rendergroupcellprops) ### Hooks -#### `useRowSelection(): [boolean, (selectRowEvent: SelectRowEvent) => void]` +#### `useHeaderRowSelection(): { isIndeterminate, isRowSelected, onRowSelectionChange }` + +#### `useRowSelection(): { isRowSelectionDisabled, isRowSelected, onRowSelectionChange }` ### Other