diff --git a/public/app/plugins/panel/datagrid/state.ts b/public/app/plugins/panel/datagrid/state.ts
index 65840df7afe..fe414b124ca 100644
--- a/public/app/plugins/panel/datagrid/state.ts
+++ b/public/app/plugins/panel/datagrid/state.ts
@@ -220,9 +220,14 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
       columns = [
         ...updateColumnsPayload.frame.fields.map((field: Field, index: number) => {
           const displayName = getFieldDisplayName(field, updateColumnsPayload.frame);
+
+          // find column by field name and update width in new set. We cannot use index because
+          // if a column gets deleted we don't know the correct index anymore
+          const width = state.columns.find((column) => column.title === displayName)?.width;
+
           return {
             title: displayName,
-            width: state.columns[index]?.width ?? getCellWidth(field),
+            width: width ?? getCellWidth(field),
             icon: typeToIconMap.get(field.type),
             hasMenu: isDatagridEnabled(),
             trailingRowOptions: { targetColumn: --index },