From 4ef5328f3ff6d777f502026b2cf18d63bcc102ca Mon Sep 17 00:00:00 2001 From: Mahesh Date: Mon, 6 May 2024 15:45:44 +0530 Subject: [PATCH 1/4] fix: remove datagrid default editable true --- .../toolpad-studio-components/src/DataGrid.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index 20784d766fc..72a39f35cb4 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -473,7 +473,7 @@ function getNarrowedColType(type?: string): GridColType | undefined { return (type && type in DEFAULT_COLUMN_TYPES ? type : undefined) as GridColType | undefined; } -export function parseColumns(columns: SerializableGridColumns): GridColDef[] { +export function parseColumns(columns: SerializableGridColumns, isEditable?: boolean): GridColDef[] { return columns.map(({ type: colType, ...column }) => { const isIdColumn = column.field === 'id'; @@ -487,7 +487,7 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] { }; } - let baseColumn: Omit = { editable: true }; + let baseColumn: Omit = { editable: isEditable }; if (colType) { baseColumn = { ...baseColumn, ...CUSTOM_COLUMN_TYPES[colType], ...column }; @@ -1126,6 +1126,9 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( setActionResult, ); + const useDataProvider = useNonNullableContext(UseDataProviderContext); + const { dataProvider } = useDataProvider(dataProviderId || null); + const nodeRuntime = useNode(); const handleResize = React.useMemo( @@ -1227,9 +1230,14 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( [selection?.id], ); + const isRowUpdateModelAvailable = React.useMemo( + () => !!dataProvider?.updateRecord, + [dataProviderProps], + ); + const columns: GridColDef[] = React.useMemo( - () => (columnsProp ? parseColumns(columnsProp) : []), - [columnsProp], + () => (columnsProp ? parseColumns(columnsProp, isRowUpdateModelAvailable) : []), + [columnsProp, isRowUpdateModelAvailable], ); React.useEffect(() => { From 684f0f23fc042092aa173006835d76180889c922 Mon Sep 17 00:00:00 2001 From: Mahesh Date: Mon, 6 May 2024 15:49:29 +0530 Subject: [PATCH 2/4] update changes --- packages/toolpad-studio-components/src/DataGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index 53d479a20d4..845b9d086c4 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -483,7 +483,7 @@ export function parseColumns(columns: SerializableGridColumns, isEditable?: bool return columns.map(({ type: colType, ...column }) => { const isIdColumn = column.field === 'id'; - let baseColumn: Omit = { editable: true }; + let baseColumn: Omit = { editable: isEditable }; if (isIdColumn) { baseColumn = { From 825b970d852958c5cdc12507f88cace55e3f1c7c Mon Sep 17 00:00:00 2001 From: Mahesh Date: Mon, 6 May 2024 17:31:24 +0530 Subject: [PATCH 3/4] refactor: update editable logic to new function --- .../src/DataGrid.tsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index 845b9d086c4..861c61eb69b 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -479,11 +479,11 @@ function getNarrowedColType(type?: string): GridColType | undefined { return (type && type in DEFAULT_COLUMN_TYPES ? type : undefined) as GridColType | undefined; } -export function parseColumns(columns: SerializableGridColumns, isEditable?: boolean): GridColDef[] { +export function parseColumns(columns: SerializableGridColumns): GridColDef[] { return columns.map(({ type: colType, ...column }) => { const isIdColumn = column.field === 'id'; - let baseColumn: Omit = { editable: isEditable }; + let baseColumn: Omit = {}; if (isIdColumn) { baseColumn = { @@ -1244,8 +1244,8 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( ); const columns: GridColDef[] = React.useMemo( - () => (columnsProp ? parseColumns(columnsProp, isRowUpdateModelAvailable) : []), - [columnsProp, isRowUpdateModelAvailable], + () => (columnsProp ? parseColumns(columnsProp) : []), + [columnsProp], ); React.useEffect(() => { @@ -1270,7 +1270,17 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( }, [nodeRuntime, rows]); const renderedColumns = React.useMemo(() => { - const result = [...columns]; + const mapEditableToColumns = columns.map((column) => { + if (column.editable || column.editable === false) { + return column; + } + + column.editable = isRowUpdateModelAvailable; + + return column; + }); + + const result = [...mapEditableToColumns]; if (getProviderActions) { result.push({ @@ -1284,7 +1294,7 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( } return result; - }, [columns, getProviderActions]); + }, [columns, getProviderActions, isRowUpdateModelAvailable]); const appHost = useAppHost(); const isProPlan = appHost.plan === 'pro'; From 3ea93bd83457429b3ed6d35d87685ab07763c3fc Mon Sep 17 00:00:00 2001 From: Mahesh Date: Mon, 6 May 2024 17:33:32 +0530 Subject: [PATCH 4/4] add reason for skipping columns with editable prop --- packages/toolpad-studio-components/src/DataGrid.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index 861c61eb69b..f14cecc55cd 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -1271,6 +1271,7 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( const renderedColumns = React.useMemo(() => { const mapEditableToColumns = columns.map((column) => { + // Don't touch the existing columns with `editable` value, example: `id` column if (column.editable || column.editable === false) { return column; }