{"record":{"id":"3b4205f0cf8d900a","repo":"refinedev/refine","slug":"if-you-use-usedatagrid-hook-you-need-to-use-da","errorCode":null,"errorMessage":"If you use `useDataGrid` hook, you need to use `DataGrid` element.","messagePattern":"If you use `useDataGrid` hook, you need to use `DataGrid` element\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/codemod/src/transformations/use-data-grid-columns.ts","lineNumber":55,"sourceCode":"\n    (p.node.arguments[0] as unknown as ObjectExpression).properties =\n      propertiesWithoutColumns;\n\n    return p.node;\n  });\n};\n\nconst addColumnsToUseDataGrid = (j: JSCodeshift, root: Collection<any>) => {\n  const dataGridElement = root.find(j.JSXElement, {\n    openingElement: {\n      name: {\n        name: \"DataGrid\",\n      },\n    },\n  });\n\n  if (dataGridElement.length === 0) {\n    console.warn(\n      \"If you use `useDataGrid` hook, you need to use `DataGrid` element.\",\n    );\n    return;\n  }\n\n  dataGridElement.forEach((path) => {\n    const hasColumnsAttribute = path.node.openingElement.attributes.find(\n      (attribute) => (attribute as JSXAttribute).name?.name === \"columns\",\n    );\n\n    if (hasColumnsAttribute) {\n      return;\n    }\n\n    path.node.openingElement.attributes.push(\n      j.jsxAttribute(\n        j.jsxIdentifier(\"columns\"),\n        j.jsxExpressionContainer(j.identifier(\"columns\")),","sourceCodeStart":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/refinedev/refine/blob/779d52a20e29b0307ac0df04d135beba434370dc/packages/codemod/src/transformations/use-data-grid-columns.ts#L37-L73","documentation":"Thrown (as a console.warn plus early return) by the refine codemod `use-data-grid-columns` transformation. The codemod found a `useDataGrid()` hook call and tried to locate a matching `<DataGrid ...>` JSX element in the same file to attach the generated `columns` prop; none was found, so the transformation is skipped. The hook and component are designed as a pair — `useDataGrid`'s returned `dataGridProps` are meant to be spread onto a `DataGrid`.","triggerScenarios":"Running the codemod CLI on a file that calls `useDataGrid` (or `useDataGrid` variant selected by the transformer) but contains no `<DataGrid>` JSX element — e.g., the hook is used in a parent and the grid lives in a child component, or the element is imported under a different name/aliased.","commonSituations":"Splitting a list page into container/presentational components; renaming or wrapping DataGrid in a custom component (`<MyGrid>`); running the pckm/codemod over partial files after manual refactors.","solutions":["Move the `<DataGrid>` JSX into the same file as the `useDataGrid` call (or re-run the codemod per-file where they coexist) and re-run the codemod","If the grid is wrapped/aliased, temporarily rename it back to `DataGrid` for the codemod run, then restore","Apply the columns migration manually: pass the generated column defs to your custom grid component's columns prop"],"exampleFix":"// before (file A: hook only)\nconst { dataGridProps } = useDataGrid();\n// after (same file)\nconst { dataGridProps } = useDataGrid();\nreturn <DataGrid {...dataGridProps} columns={columns} />;","handlingStrategy":"validation","validationCode":"// check co-location before running the codemod\nconst src = fs.readFileSync(file, 'utf8');\nif (/useDataGrid\\s*\\(/.test(src) && !/<DataGrid[\\s>]/.test(src)) {\n  console.warn(`Skip ${file}: useDataGrid present but no <DataGrid> element`);\n}","typeGuard":"const hasPair = (code: string) =>\n  /useDataGrid\\s*\\(/.test(code) && /<DataGrid[\\s>]/.test(code);","tryCatchPattern":null,"preventionTips":["Keep useDataGrid and <DataGrid> in the same file during codemod migrations","Run codemods on a clean git tree so you can inspect/revert partial transforms"],"tags":["codemod","migration","usedatagrid","datagrid","refine"],"backgroundTag":"codemod-element-not-found","analyzedSha":"779d52a20e29b0307ac0df04d135beba434370dc","analyzedAt":"2026-08-27T11:15:25.854Z","schemaVersion":2},"datasetVersion":"2026-08-27T13:17:12.746Z"}