From 4b2877e66142fd277365b0c2e604804057582b5f Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Fri, 23 Aug 2024 14:47:57 +0200
Subject: [PATCH] Added warning to the data grid

---
 .../screens/components/data-grid/DatagridPageLayout.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/website/screens/components/data-grid/DatagridPageLayout.tsx b/apps/website/screens/components/data-grid/DatagridPageLayout.tsx
index 8dbeea9ace..76908f3d22 100644
--- a/apps/website/screens/components/data-grid/DatagridPageLayout.tsx
+++ b/apps/website/screens/components/data-grid/DatagridPageLayout.tsx
@@ -1,4 +1,4 @@
-import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcFlex, DxcAlert } from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
@@ -15,6 +15,9 @@ const DataGridPageHeading = ({ children }: { children: React.ReactNode }) => {
       <PageHeading>
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Data Grid" />
+          <DxcAlert type="warning" size="fillParent">
+            There are known styling issues with sortable columns when used in a NextJS app.
+          </DxcAlert>
           <DxcParagraph>
             A data grid is a component designed to display large volumes in a structured and organized manner. It
             structures data into rows and columns, making it easy for users to visualize, analyze, and interact with the