diff --git a/web/package.json b/web/package.json index bc94d42ae..934a93944 100644 --- a/web/package.json +++ b/web/package.json @@ -126,7 +126,7 @@ "react-arborist": "^3.2.0", "react-aspen": "^1.1.0", "react-checkbox-tree": "^1.7.2", - "react-data-grid": "https://github.com/pgadmin-org/react-data-grid.git#200d2f5e02de694e3e9ffbe177c279bc40240fb8", + "react-data-grid": "https://github.com/pgadmin-org/react-data-grid.git#4e10a5a327ff58198ac83c7b0c62549b20b78ae5", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", diff --git a/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx b/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx index 5bcdfe1d2..410ec6110 100644 --- a/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx +++ b/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx @@ -70,8 +70,9 @@ export function FileNameEditor({row, column, onRowChange, onClose}) { }, []); const onKeyDown = (e)=>{ - if(e.code === 'Tab' || e.code === 'Enter') { + if(e.code === 'Tab' || e.code == 'Escape' || e.code == 'Enter') { e.preventDefault(); + e.stopPropagation(); onClose(); } }; @@ -116,20 +117,16 @@ const columns = [ { key: 'Filename', name: gettext('Name'), - formatter: FileNameFormatter, - editor: FileNameEditor, - editorOptions: { - editOnClick: false, - onCellKeyDown: (e)=>e.preventDefault(), - } + renderCell: FileNameFormatter, + renderEditCell: FileNameEditor, },{ key: 'Properties.DateModified', name: gettext('Date Modified'), - formatter: ({row})=><>{row.Properties?.['Date Modified']} + renderCell: ({row})=><>{row.Properties?.['Date Modified']} },{ key: 'Properties.Size', name: gettext('Size'), - formatter: ({row})=><>{row.file_type != 'dir' && row.Properties?.['Size']} + renderCell: ({row})=><>{row.file_type != 'dir' && row.Properties?.['Size']} } ]; @@ -161,7 +158,7 @@ export default function ListView({items, operation, ...props}) { sortable: true, resizable: true }} - headerRowHeight={28} + headerRowHeight={35} rowHeight={28} mincolumnWidthBy={25} enableCellSelect={false} diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css index a4d049145..66d9e46ca 100644 --- a/web/pgadmin/static/css/style.css +++ b/web/pgadmin/static/css/style.css @@ -13,4 +13,6 @@ @import 'node_modules/rc-dock/dist/rc-dock.css'; @import 'node_modules/@szhsin/react-menu/dist/index.css'; +@import 'node_modules/react-data-grid/lib/styles.css'; + @import './pgadmin.css'; diff --git a/web/pgadmin/static/js/components/PgReactDataGrid.jsx b/web/pgadmin/static/js/components/PgReactDataGrid.jsx index c464e5a19..c8d94e6c0 100644 --- a/web/pgadmin/static/js/components/PgReactDataGrid.jsx +++ b/web/pgadmin/static/js/components/PgReactDataGrid.jsx @@ -6,7 +6,7 @@ // This software is released under the PostgreSQL Licence // ////////////////////////////////////////////////////////////// -import React, { useContext, useEffect, useMemo } from 'react'; +import React, { useCallback, useContext, useEffect, useMemo } from 'react'; import ReactDataGrid, { Row } from 'react-data-grid'; import { Box } from '@mui/material'; import PropTypes from 'prop-types'; @@ -23,6 +23,7 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({ backgroundColor: theme.otherVars.qtDatagridBg, fontSize: '12px', border: 'none', + userSelect: 'none', '--rdg-selection-color': theme.palette.primary.main, '& .rdg-cell': { ...theme.mixins.panelBorder.right, @@ -35,10 +36,17 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({ '&[aria-selected=true]:not([role="columnheader"])': { outlineWidth: '0px', outlineOffset: '0px', + }, + '& .rdg-cell-value': { + height: '100%', } }, '& .rdg-header-row .rdg-cell': { padding: 0, + + '& .rdg-header-sort-name': { + margin: 'auto 0', + } }, '& .rdg-header-row': { backgroundColor: theme.palette.background.default, @@ -61,20 +69,6 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({ } }, }, - '&.ReactGrid-hasSelectColumn': { - '& .rdg-cell': { - '&[aria-selected=true][aria-colindex="1"]': { - outlineWidth: '2px', - outlineOffset: '-2px', - backgroundColor: theme.otherVars.qtDatagridBg, - color: theme.palette.text.primary, - } - }, - '& .rdg-row[aria-selected=true] .rdg-cell:nth-of-type(1)': { - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - } - } })); export const GridContextUtils = React.createContext(); @@ -110,12 +104,18 @@ export function CustomRow({inTest=false, ...props}) { if(inTest) { return
; } - const onRowClick = (...args)=>{ - gridUtils.onItemClick?.(props.rowIdx); - props.onRowClick?.(...args); + + const onCellClick = (args) => { + gridUtils.onItemClick?.(args.row.rowIdx); + props.onRowClick?.(args.row); }; + + const onCellDoubleClick = (args) => { + gridUtils.onItemEnter?.(args.row); + }; + return ( - gridUtils.onItemEnter?.(row)} + props.selectCell(row, column)} aria-selected={isRowSelected}/> ); } @@ -136,14 +136,23 @@ export default function PgReactDataGrid({gridRef, className, hasSelectColumn=tru props.enableCellSelect && finalClassName.push('ReactGrid-cellSelection'); finalClassName.push(className); const valObj = useMemo(() => ({onItemEnter, onItemSelect, onItemClick}), [onItemEnter, onItemSelect, onItemClick]); + + const renderRow = useCallback((key, props) => { + return ; + }, []); + + const renderSortStatus = useCallback((props) => { + return ; + }, []); + return ( {noRowsIcon}{noRowsText || gettext('No rows found.')}, }} {...props} diff --git a/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx index 43e1d8f47..b28a206d7 100644 --- a/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx +++ b/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx @@ -35,12 +35,9 @@ const StyledBox = styled(Box)(({theme}) => ({ fontSize: '13px', '--rdg-background-color': theme.palette.default.main, '--rdg-selection-color': theme.palette.primary.main, - '& .ResultGridComponent-gridPanel': { - '--rdg-background-color': theme.palette.default.main + ' !important', - '&.ResultGridComponent-grid': { - fontSize: '13px', - '--rdg-selection-color': 'none' - }, + '& .ResultGridComponent-grid.ReactGrid-root': { + fontSize: '13px', + '--rdg-selection-color': 'none', '& .rdg-header-row': { backgroundColor: theme.palette.background.default, '& .rdg-cell': { @@ -57,13 +54,29 @@ const StyledBox = styled(Box)(({theme}) => ({ }, '& .rdg-row': { backgroundColor: theme.palette.background.default, - '&[aria-selected=true]': { - backgroundColor: theme.palette.primary.light, - color: theme.otherVars.qtDatagridSelectFg, - '& .rdg-cell:nth-of-type(1)': { - backgroundColor: 'transparent', - outlineColor: 'transparent', - color: theme.palette.primary.contrastText, + '&[aria-selected=false]': { + '&.ResultGridComponent-selectedRow': { + paddingLeft: '0.5rem', + backgroundColor: theme.palette.primary.light, + }, + '&.ResultGridComponent-source': { + backgroundColor: theme.otherVars.schemaDiff.sourceRowColor, + color: theme.otherVars.schemaDiff.diffSelectFG, + paddingLeft: '0.5rem', + }, + '&.ResultGridComponent-target': { + backgroundColor: theme.otherVars.schemaDiff.targetRowColor, + color: theme.otherVars.schemaDiff.diffSelectFG, + paddingLeft: '0.5rem', + }, + '&.ResultGridComponent-different': { + backgroundColor: theme.otherVars.schemaDiff.diffRowColor, + color: theme.otherVars.schemaDiff.diffSelectFG, + paddingLeft: '0.5rem', + }, + '&.ResultGridComponent-identical': { + paddingLeft: '0.5rem', + color: theme.otherVars.schemaDiff.diffColorFg, }, }, '& .rdg-cell': { @@ -74,19 +87,15 @@ const StyledBox = styled(Box)(({theme}) => ({ ...theme.mixins.panelBorder.bottom, '&[aria-colindex="1"]': { padding: 0, + textAlign: 'center', }, - '&[aria-selected=true]:not([role="columnheader"]):not([aria-colindex="1"])': { - outlineWidth: '0', - outlineOffset: '-1px', - color: theme.otherVars.qtDatagridSelectFg, - }, - '&[aria-selected=true][aria-colindex="1"]': { - outlineWidth: 0, - backgroundColor: theme.palette.default.main + ' !important' + '& .ResultGridComponent-rowIcon': { + display: 'inline-block !important', + height: '1.3rem', + width: '1.3rem' }, '& .ResultGridComponent-cellExpand': { - display: 'table', - blockSize: '100%', + width: '100%', '& > span': { verticalAlign: 'middle', cursor: 'pointer', @@ -97,11 +106,7 @@ const StyledBox = styled(Box)(({theme}) => ({ }, '& .ResultGridComponent-subRow': { paddingLeft: '1rem', - '& .ResultGridComponent-rowIcon': { - display: 'inline-block !important', - height: '1.3rem', - width: '1.3rem' - }, + '& .ResultGridComponent-count': { display: 'inline-block !important', '& .ResultGridComponent-countLabel': { @@ -115,29 +120,6 @@ const StyledBox = styled(Box)(({theme}) => ({ } } }, - '& .ResultGridComponent-selectedRow': { - paddingLeft: '0.5rem', - backgroundColor: theme.palette.primary.light, - }, - '& .ResultGridComponent-source': { - backgroundColor: theme.otherVars.schemaDiff.sourceRowColor, - color: theme.otherVars.schemaDiff.diffSelectFG, - paddingLeft: '0.5rem', - }, - '& .ResultGridComponent-target': { - backgroundColor: theme.otherVars.schemaDiff.targetRowColor, - color: theme.otherVars.schemaDiff.diffSelectFG, - paddingLeft: '0.5rem', - }, - '& .ResultGridComponent-different': { - backgroundColor: theme.otherVars.schemaDiff.diffRowColor, - color: theme.otherVars.schemaDiff.diffSelectFG, - paddingLeft: '0.5rem', - }, - '& .ResultGridComponent-identical': { - paddingLeft: '0.5rem', - color: theme.otherVars.schemaDiff.diffColorFg, - }, '& .ResultGridComponent-recordRow': { marginLeft: '2.7rem', height: '1.3rem', @@ -146,15 +128,9 @@ const StyledBox = styled(Box)(({theme}) => ({ marginRight: '0.3rem', paddingLeft: '0.5rem', }, - '& .ResultGridComponent-selectCell': { + '&.ResultGridComponent-selectCell': { padding: '0 0.3rem' }, - '& .ResultGridComponent-selectedRowCheckBox': { - backgroundColor: theme.otherVars.schemaDiff.diffSelCheckbox, - }, - '& .ResultGridComponent-selChBox': { - paddingLeft: 0, - } } }, '& .ResultGridComponent-noRowsIcon': { @@ -456,33 +432,31 @@ function selectHeaderRenderer({selectedRows, setSelectedRows, rootSelection, set Cell.displayName = 'Cell'; return Cell; } -function selectFormatter({selectedRows, setSelectedRows, setRootSelection, activeRow, setActiveRow, allRowIds, selectedRowIds, selectedResultRows, deselectResultRows, getStyleClassName}) { +function selectFormatter({selectedRows, setSelectedRows, setRootSelection, setActiveRow, allRowIds, selectedRowIds, selectedResultRows, deselectResultRows}) { const Cell = ({ row, isCellSelected }) => { isCellSelected && setActiveRow(row.id); return ( - - { - setSelectedRows((prev) => { - let tempSelectedRows = [...prev]; - if (!prev.includes(e.target.id)) { - selectedResultRows(row, tempSelectedRows); - tempSelectedRows.length === allRowIds.length && setRootSelection(true); - } else { - deselectResultRows(row, tempSelectedRows); - } - tempSelectedRows = new Set(tempSelectedRows); - selectedRowIds([...tempSelectedRows]); - return [...tempSelectedRows]; - }); - } - } - > - + { + setSelectedRows((prev) => { + let tempSelectedRows = [...prev]; + if (!prev.includes(e.target.id)) { + selectedResultRows(row, tempSelectedRows); + tempSelectedRows.length === allRowIds.length && setRootSelection(true); + } else { + deselectResultRows(row, tempSelectedRows); + } + tempSelectedRows = new Set(tempSelectedRows); + selectedRowIds([...tempSelectedRows]); + return [...tempSelectedRows]; + }); + } + } + > ); }; @@ -494,7 +468,7 @@ function selectFormatter({selectedRows, setSelectedRows, setRootSelection, activ return Cell; } -function expandFormatter({activeRow, setActiveRow, filterParams, gridData, selectedRows, dispatch, getStyleClassName}) { +function expandFormatter({setActiveRow, filterParams, gridData, selectedRows, dispatch}) { const Cell = ({ row, isCellSelected })=>{ const hasChildren = row.children !== undefined; isCellSelected && setActiveRow(row.id); @@ -510,15 +484,12 @@ function expandFormatter({activeRow, setActiveRow, filterParams, gridData, selec onCellExpand={() => dispatch({ id: row.id, type: 'toggleSubRow', filterParams: filterParams, gridData: gridData, selectedRows: selectedRows })} /> )} -
- - {!hasChildren && ( - - - {row.label} - - )} -
+ {!hasChildren && ( + + + {row.label} + + )} ); }; @@ -531,12 +502,12 @@ function expandFormatter({activeRow, setActiveRow, filterParams, gridData, selec return Cell; } -function resultFormatter({selectedRows, activeRow, setActiveRow, getStyleClassName}) { +function resultFormatter({setActiveRow}) { const Cell = ({ row, isCellSelected })=>{ isCellSelected && setActiveRow(row.id); return ( - + {row.status} ); @@ -648,10 +619,10 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte } } - function getStyleClassName(row, selectedRowIds, isCellSelected, activeRowId, isCheckbox = false) { + function getStyleClassName(row, selectedRowIds, activeRowId) { let clsName = null; - if (selectedRowIds.includes(`${row.id}`) || isCellSelected || row.id == activeRowId) { - clsName = isCheckbox ? 'ResultGridComponent-selectedRowCheckBox' : 'ResultGridComponent-selectedRow'; + if (selectedRowIds.includes(`${row.id}`) || row.id == activeRowId) { + clsName = 'ResultGridComponent-selectedRow'; } else if (row.status == FILTER_NAME.DIFFERENT) { clsName = 'ResultGridComponent-different'; } else if (row.status == FILTER_NAME.SOURCE_ONLY) { @@ -671,14 +642,14 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte ...SelectColumn, minWidth: 30, width: 30, - headerRenderer: selectHeaderRenderer({ + renderHeaderCell: selectHeaderRenderer({ selectedRows, setSelectedRows, rootSelection, setRootSelection, allRowIds, selectedRowIds }), - formatter: selectFormatter({ + renderCell: selectFormatter({ selectedRows, setSelectedRows, setRootSelection, - activeRow, setActiveRow, allRowIds, selectedRowIds, - selectedResultRows, deselectResultRows, getStyleClassName + setActiveRow, allRowIds, selectedRowIds, + selectedResultRows, deselectResultRows }), }, { @@ -692,15 +663,15 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte return 1; }, - formatter: expandFormatter({ - activeRow, setActiveRow, filterParams, gridData, - selectedRows, dispatch, getStyleClassName + renderCell: expandFormatter({ + setActiveRow, filterParams, gridData, + selectedRows, dispatch }), }, { key: 'status', name: 'Comparison Result', - formatter: resultFormatter({selectedRows, activeRow, setActiveRow, getStyleClassName}), + renderCell: resultFormatter({setActiveRow}), }, ]; @@ -768,7 +739,7 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte } + rowClass={(row) => + getStyleClassName(row, selectedRows, activeRow) + } /> : <> diff --git a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx index 581c15529..f93459fc9 100644 --- a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx +++ b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx @@ -134,17 +134,17 @@ const columns = [ key: 'name', name: gettext('Object name'), width: 250, - formatter: ObjectNameFormatter, + renderCell: ObjectNameFormatter, },{ key: 'type', name: gettext('Type'), - width: 30, - formatter: TypePathFormatter, + width: 70, + renderCell: TypePathFormatter, },{ key: 'path', name: gettext('Object path'), enableSorting: false, - formatter: TypePathFormatter, + renderCell: TypePathFormatter, } ]; @@ -416,10 +416,10 @@ export default function SearchObjects({nodeData}) { columns={columns} rows={sortedItems} defaultColumnOptions={{ - enableSorting: true, - enableResizing: true + sortable: true, + resizable: true }} - headerRowHeight={28} + headerRowHeight={35} rowHeight={28} mincolumnWidthBy={25} enableCellSelect={false} diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx index 07a79ea4a..e87f9a9a8 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx +++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx @@ -9,7 +9,7 @@ import { Box } from '@mui/material'; import { styled } from '@mui/material/styles'; import _ from 'lodash'; -import React, {useState, useEffect, useContext, useRef, useLayoutEffect, useMemo} from 'react'; +import React, {useState, useEffect, useContext, useRef, useLayoutEffect, useMemo, useCallback} from 'react'; import {Row, useRowSelection} from 'react-data-grid'; import LockIcon from '@mui/icons-material/Lock'; import EditIcon from '@mui/icons-material/Edit'; @@ -74,7 +74,6 @@ function CustomRow(props) { const dataGridExtras = useContext(DataGridExtrasContext); const rowInfoValue = useMemo(()=>({ - rowIdx: props.rowIdx, getCellElement: (colIdx)=>{ return rowRef.current?.querySelector(`.rdg-cell[aria-colindex="${colIdx+1}"]`); } @@ -114,15 +113,14 @@ function getCopyShortcutHandler(handleCopy) { }; } -function SelectAllHeaderRenderer({onAllRowsSelectionChange, isCellSelected}) { - const [checked, setChecked] = useState(false); +function SelectAllHeaderRenderer({isCellSelected}) { + const [isRowSelected, onRowSelectionChange] = useRowSelection(); const cellRef = useRef(); const eventBus = useContext(QueryToolEventsContext); const dataGridExtras = useContext(DataGridExtrasContext); const onClick = ()=>{ eventBus.fireEvent(QUERY_TOOL_EVENTS.FETCH_MORE_ROWS, true, ()=>{ - setChecked(!checked); - onAllRowsSelectionChange(!checked); + onRowSelectionChange({ type: 'HEADER', checked: !isRowSelected }); }); }; @@ -198,24 +196,24 @@ SelectableHeaderRenderer.propTypes = { function setEditorFormatter(col) { // If grid is editable then add editor else make it readonly if (col.cell == 'oid' && col.name == 'oid') { - col.editor = null; - col.formatter = Formatters.TextFormatter; + col.renderEditCell = null; + col.renderCell = Formatters.TextFormatter; } else if (col.cell == 'Json') { - col.editor = Editors.JsonTextEditor; - col.formatter = Formatters.TextFormatter; + col.renderEditCell = Editors.JsonTextEditor; + col.renderCell = Formatters.TextFormatter; } else if (['number', 'oid'].indexOf(col.cell) != -1 || ['xid', 'real'].indexOf(col.type) != -1) { - col.formatter = Formatters.NumberFormatter; - col.editor = Editors.NumberEditor; + col.renderCell = Formatters.NumberFormatter; + col.renderEditCell = Editors.NumberEditor; } else if (col.cell == 'boolean') { - col.editor = Editors.CheckboxEditor; - col.formatter = Formatters.TextFormatter; + col.renderEditCell = Editors.CheckboxEditor; + col.renderCell = Formatters.TextFormatter; } else if (col.cell == 'binary') { // We do not support editing binary data in SQL editor and data grid. - col.editor = null; - col.formatter = Formatters.BinaryFormatter; + col.renderEditCell = null; + col.renderCell = Formatters.BinaryFormatter; } else { - col.editor = Editors.TextEditor; - col.formatter = Formatters.TextFormatter; + col.renderEditCell = Editors.TextEditor; + col.renderCell = Formatters.TextFormatter; } } @@ -251,7 +249,7 @@ function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) { for(const col of retColumns) { col.width = getTextWidth(col, rows, canvasContext, columnWidthBy); col.resizable = true; - col.editorOptions = { + col.renderEditCellOptions = { commitOnOutsideClick: false, onCellKeyDown: (e)=>{ // global keyboard shortcuts will work now and will open the the editor for the cell once pgAdmin reopens @@ -276,12 +274,9 @@ function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) { canvas.remove(); return retColumns; } - -function RowNumColFormatter({row, rowKeyGetter, dataChangeStore, onSelectedColumnsChange}) { - const {rowIdx} = useContext(RowInfoContext); +function RowNumColFormatter({row, rowKeyGetter, rowIdx, dataChangeStore, onSelectedColumnsChange}) { const [isRowSelected, onRowSelectionChange] = useRowSelection(); - let rowKey = rowKeyGetter(row); let rownum = rowIdx+1; if(rowKey in (dataChangeStore?.added || {})) { @@ -291,7 +286,7 @@ function RowNumColFormatter({row, rowKeyGetter, dataChangeStore, onSelectedColum } return (
{ onSelectedColumnsChange(new Set()); - onRowSelectionChange({ row: row, checked: !isRowSelected, isShiftClick: false}); + onRowSelectionChange({ type: 'ROW', row: row, checked: !isRowSelected, isShiftClick: false}); }} onKeyDown={()=>{/* already taken care by parent */}}> {rownum}
); @@ -313,13 +308,13 @@ function formatColumns(columns, dataChangeStore, selectedColumns, onSelectedColu }; for(const [idx, col] of retColumns.entries()) { - col.headerRenderer = HeaderRenderer; + col.renderHeaderCell = HeaderRenderer; col.cellClass = cellClassGetter(col, selectedColumns.has(idx), dataChangeStore, rowKeyGetter); } let rowNumCol = retColumns[0]; - rowNumCol.headerRenderer = SelectAllHeaderRenderer; - rowNumCol.formatter = (props)=>{ + rowNumCol.renderHeaderCell = SelectAllHeaderRenderer; + rowNumCol.renderCell = (props)=>{ return ; }; @@ -372,6 +367,10 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha eventBus.fireEvent(QUERY_TOOL_EVENTS.TRIGGER_COPY_DATA); } + const renderCustomRow = useCallback((key, props) => { + return ; + }, []); + const dataGridExtras = useMemo(()=>({ onSelectedCellChange, handleCopy }), [onSelectedCellChange]); @@ -399,8 +398,8 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha enableCellSelect={true} onCopy={handleCopy} onMultiCopy={handleCopy} - components={{ - rowRenderer: CustomRow, + renderers={{ + renderRow: renderCustomRow, }} enableRangeSelection={true} rangeLeftBoundaryColIdx={0} diff --git a/web/yarn.lock b/web/yarn.lock index 7829785ae..ae7f564d3 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -5389,7 +5389,7 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^2.1.0, clsx@npm:^2.1.1": +"clsx@npm:^2.0.0, clsx@npm:^2.1.0, clsx@npm:^2.1.1": version: 2.1.1 resolution: "clsx@npm:2.1.1" checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57 @@ -13251,15 +13251,15 @@ __metadata: languageName: node linkType: hard -"react-data-grid@https://github.com/pgadmin-org/react-data-grid.git#200d2f5e02de694e3e9ffbe177c279bc40240fb8": - version: 7.0.0-beta.14 - resolution: "react-data-grid@https://github.com/pgadmin-org/react-data-grid.git#commit=200d2f5e02de694e3e9ffbe177c279bc40240fb8" +"react-data-grid@https://github.com/pgadmin-org/react-data-grid.git#4e10a5a327ff58198ac83c7b0c62549b20b78ae5": + version: 7.0.0-beta.44 + resolution: "react-data-grid@https://github.com/pgadmin-org/react-data-grid.git#commit=4e10a5a327ff58198ac83c7b0c62549b20b78ae5" dependencies: - clsx: ^1.1.1 + clsx: ^2.0.0 peerDependencies: - react: ^16.14 || ^17.0 || ^18.0 - react-dom: ^16.14 || ^17.0 || ^18.0 - checksum: ee77fcd8b689e664824f24ed91c82263158e5fb77214f8b5e6bc88d13deb30bd8bd381e6901bc508f1152745dbb8b858f57d605f13bb936275137d01e81a0ae7 + react: ^18.0 || ^19.0 + react-dom: ^18.0 || ^19.0 + checksum: 75e8910f9b69c60c28223e82647cb8323e08d13d1b56eec94e918e7feadc50f5f4257205a3cd628b9fba019577c3ffab62bdecda7d950e7647ba75988de28261 languageName: node linkType: hard @@ -14038,7 +14038,7 @@ __metadata: react-arborist: ^3.2.0 react-aspen: ^1.1.0 react-checkbox-tree: ^1.7.2 - react-data-grid: "https://github.com/pgadmin-org/react-data-grid.git#200d2f5e02de694e3e9ffbe177c279bc40240fb8" + react-data-grid: "https://github.com/pgadmin-org/react-data-grid.git#4e10a5a327ff58198ac83c7b0c62549b20b78ae5" react-dnd: ^16.0.1 react-dnd-html5-backend: ^16.0.1 react-dom: ^18.2.0