From a60b0efddad458603741e0ac20ab5fce2275244f Mon Sep 17 00:00:00 2001
From: Emil Petrov <emil.petrov@progress.com>
Date: Thu, 25 Jan 2024 16:16:24 +0200
Subject: [PATCH] chore(html): add grid-normal template

---
 packages/html/src/grid/index.ts               |  1 +
 .../html/src/grid/templates/grid-normal.tsx   | 80 +++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 packages/html/src/grid/templates/grid-normal.tsx

diff --git a/packages/html/src/grid/index.ts b/packages/html/src/grid/index.ts
index 1e8d862bb19..7e7fed9f1a0 100644
--- a/packages/html/src/grid/index.ts
+++ b/packages/html/src/grid/index.ts
@@ -10,3 +10,4 @@ export * from './grid-footer.spec';
 export * from './grid-footer-table.spec';
 export * from './grid-pager.spec';
 export * from './grid-toolbar.spec';
+export * from './templates/grid-normal';
diff --git a/packages/html/src/grid/templates/grid-normal.tsx b/packages/html/src/grid/templates/grid-normal.tsx
new file mode 100644
index 00000000000..2969308c1ac
--- /dev/null
+++ b/packages/html/src/grid/templates/grid-normal.tsx
@@ -0,0 +1,80 @@
+import { Grid, GridHeader, GridGroupingHeader ,GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable, GridPager } from '../../grid';
+import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
+
+export const GridNormal = (props) => (
+    <Grid _renderAriaRoot
+        pager={( <GridPager /> )}
+        groupingHeader={(
+            <GridGroupingHeader dropHint="Drag a column header and drop it here to group by that column" />
+        )}
+        children={(
+            <>
+                <GridHeader>
+                    <div className="k-grid-header-wrap">
+                        <GridHeaderTable>
+                            <colgroup>
+                                <col style={{ width: "240px" }} />
+                                <col />
+                                <col />
+                                <col style={{ width: "150px" }} />
+                            </colgroup>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell columnTitle="Contact Name" />
+                                    <GridHeaderCell columnTitle="Contact Title" />
+                                    <GridHeaderCell columnTitle="Company Name" />
+                                    <GridHeaderCell columnTitle="Country" />
+                                </TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
+                    </div>
+                </GridHeader>
+                <GridContainer>
+                    <GridContent>
+                        <GridTable>
+                            <colgroup>
+                                <col style={{ width: "240px" }} />
+                                <col />
+                                <col />
+                                <col style={{ width: "150px" }} />
+                            </colgroup>
+                            <TableTbody>
+                                <TableRow>
+                                    <TableTd>Maria Anders</TableTd>
+                                    <TableTd>Sales Representative</TableTd>
+                                    <TableTd>Alfreds Futterkiste</TableTd>
+                                    <TableTd>Germany</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt>
+                                    <TableTd>Ana Trujillo</TableTd>
+                                    <TableTd>Owner</TableTd>
+                                    <TableTd>Anna Trujillo Emparedados y helados</TableTd>
+                                    <TableTd>Mexico</TableTd>
+                                </TableRow>
+                                <TableRow>
+                                    <TableTd>Thomas Hardy</TableTd>
+                                    <TableTd>Sales Representative</TableTd>
+                                    <TableTd>Around the Horn</TableTd>
+                                    <TableTd>UK</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt>
+                                    <TableTd>Christina Berglund</TableTd>
+                                    <TableTd>Office Administrator</TableTd>
+                                    <TableTd>Berglunds snabbköp</TableTd>
+                                    <TableTd>Sweden</TableTd>
+                                </TableRow>
+                                <TableRow>
+                                    <TableTd>Martin Sommer</TableTd>
+                                    <TableTd>Owner</TableTd>
+                                    <TableTd>Bólido Comidas preparadas</TableTd>
+                                    <TableTd>Spain</TableTd>
+                                </TableRow>
+                            </TableTbody>
+                        </GridTable>
+                    </GridContent>
+                </GridContainer>
+            </>
+        )}
+        {...props}>
+    </Grid>
+);