React Data Grid component not appearing after npm install

John Ahmad asked on Aug 4, 2026 4:19 AM

Hi everyone,

I’m trying to integrate the React Data Grid component into my project, but I’m running into an issue after installing the npm package. The installation completes successfully, but the component is not appearing in my application.

I have checked the package import, dependencies, and basic configuration, but I’m still unable to get the grid to render properly. Has anyone experienced this issue before?

Could someone please share the correct setup steps or common fixes for React Data Grid not displaying after npm installation?

Thanks in advance for any guidance.

Replies

0

Riva Ivanova answered on Aug 4, 2026 9:07 AM
Hello,

Thank you for posting in our community!

I have been looking into your question, and what I can suggest is following the Getting Started topic in our documentation. On my side, I followed the “Using Vite CLI” approach, and after running the project, the grid was displayed successfully.

In order for the grid to be properly visualized, please make sure to import one of the themes as suggested in the topic. For example:
```
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
```
Additionally, to take advantage of the ready-to-use IgniteUI typography with already adjusted font family, weight, size, text transform, letter spacing, and line height, please make sure to add the ig-typography class to a root element, like the <body> tag.
```
<body class="ig-typography">
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
```
Below is the sample setup for your reference. Please test it on your side and let me know if you need any further information on the matter.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <title>sample-demo</title> </head> <body class="ig-typography"> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body> </html>

import './App.css' import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; function App() { const data = [ { name: "John", age: 30 }, { name: "Jane", age: 25 }, { name: "Bob", age: 35 } ]; return ( <> <IgrGrid data={data} autoGenerate={false}> <IgrColumn field="name" header="Name" dataType="string"></IgrColumn> <IgrColumn field="age" header="Age" dataType="number"></IgrColumn> </IgrGrid> </> ) } export default App
Sincerely,
Riva Ivanova
Software Developer
Infragistics