From 8687c6fd2605ffc1e7fa142c0c655c3ce7fcc077 Mon Sep 17 00:00:00 2001
From: Emil Petrov <emil.petrov@progress.com>
Date: Mon, 29 Jan 2024 17:14:52 +0200
Subject: [PATCH] chore(html): add grid with filter row template

---
 packages/html/src/grid/index.ts               |   1 +
 .../grid/templates/grid-with-filter-row.tsx   | 149 ++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 packages/html/src/grid/templates/grid-with-filter-row.tsx

diff --git a/packages/html/src/grid/index.ts b/packages/html/src/grid/index.ts
index 6c2b1ac9ffa..c81843f6ff1 100644
--- a/packages/html/src/grid/index.ts
+++ b/packages/html/src/grid/index.ts
@@ -13,3 +13,4 @@ export * from './grid-toolbar.spec';
 export * from './templates/grid-normal';
 export * from './templates/grid-with-column-menu';
 export * from './templates/grid-with-filter-menu';
+export * from './templates/grid-with-filter-row';
diff --git a/packages/html/src/grid/templates/grid-with-filter-row.tsx b/packages/html/src/grid/templates/grid-with-filter-row.tsx
new file mode 100644
index 00000000000..21f2d0ac7d8
--- /dev/null
+++ b/packages/html/src/grid/templates/grid-with-filter-row.tsx
@@ -0,0 +1,149 @@
+import { Grid, GridHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable, GridPager } from '../../grid';
+import { TableTh, TableTd, TableThead, TableRow, TableTbody } from '../../table';
+import { Button } from '../../button';
+import { DropdownList } from '../../dropdownlist';
+import { NumericTextbox } from '../../numerictextbox';
+import { Textbox } from '../../textbox';
+
+export const GridWithFilterRow = (props) => (
+    <Grid _renderAriaRoot
+        pager={( <GridPager refresh={false} /> )}
+        children={(
+            <>
+                <GridHeader>
+                    <div className="k-grid-header-wrap">
+                        <GridHeaderTable>
+                            <colgroup>
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                            </colgroup>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Product Id"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Quantity"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Unit Price"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Discontinued"></GridHeaderCell>
+                                </TableRow>
+                                <TableRow className="k-filter-row">
+                                    <TableTh>
+                                        <div className="k-filtercell">
+                                            <div className="k-filtercell-wrapper">
+                                                <NumericTextbox />
+                                                <div className="k-filtercell-operator">
+                                                    <DropdownList className="k-dropdown-operator" arrowIconName="filter" />
+                                                    {' '}
+                                                    <Button icon="filter-clear"></Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </TableTh>
+                                    <TableTh>
+                                        <div className="k-filtercell">
+                                            <div className="k-filtercell-wrapper">
+                                                <Textbox />
+                                                <div className="k-filtercell-operator">
+                                                    <DropdownList className="k-dropdown-operator" arrowIconName="filter" />
+                                                    {' '}
+                                                    <Button icon="filter-clear"></Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </TableTh>
+                                    <TableTh>
+                                        <div className="k-filtercell">
+                                            <div className="k-filtercell-wrapper">
+                                                <Textbox />
+                                                <div className="k-filtercell-operator">
+                                                    <DropdownList className="k-dropdown-operator" arrowIconName="filter" />
+                                                    {' '}
+                                                    <Button icon="filter-clear"></Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </TableTh>
+                                    <TableTh>
+                                        <div className="k-filtercell">
+                                            <div className="k-filtercell-wrapper">
+                                                <NumericTextbox />
+                                                <div className="k-filtercell-operator">
+                                                    <DropdownList className="k-dropdown-operator" arrowIconName="filter" />
+                                                    {' '}
+                                                    <Button icon="filter-clear"></Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </TableTh>
+                                    <TableTh>
+                                        <div className="k-filtercell">
+                                            <div className="k-filtercell-wrapper">
+                                                <DropdownList />
+                                                <div className="k-filtercell-operator">
+                                                    <Button icon="filter-clear"></Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </TableTh>
+                                </TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
+                    </div>
+                </GridHeader>
+                <GridContainer>
+                    <GridContent className="k-virtual-content">
+                        <GridTable>
+                            <colgroup>
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                            </colgroup>
+                            <TableTbody>
+                                <TableRow>
+                                    <TableTd>1</TableTd>
+                                    <TableTd>Chai</TableTd>
+                                    <TableTd>10 boxes x 20 bags</TableTd>
+                                    <TableTd>18</TableTd>
+                                    <TableTd>false</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt>
+                                    <TableTd>2</TableTd>
+                                    <TableTd>Chang</TableTd>
+                                    <TableTd>24 - 12 oz bottles</TableTd>
+                                    <TableTd>19</TableTd>
+                                    <TableTd>false</TableTd>
+                                </TableRow>
+                                <TableRow>
+                                    <TableTd>3</TableTd>
+                                    <TableTd>Aniseed Syrup</TableTd>
+                                    <TableTd>12 - 550 ml bottles</TableTd>
+                                    <TableTd>10</TableTd>
+                                    <TableTd>false</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt>
+                                    <TableTd>4</TableTd>
+                                    <TableTd>Chef Anton&apos;s Cajun Seasoning</TableTd>
+                                    <TableTd>48 - 6 oz jars</TableTd>
+                                    <TableTd>22</TableTd>
+                                    <TableTd>false</TableTd>
+                                </TableRow>
+                                <TableRow>
+                                    <TableTd>5</TableTd>
+                                    <TableTd>Grandma&apos;s Boysenberry Spread</TableTd>
+                                    <TableTd>12 - 8 oz jars</TableTd>
+                                    <TableTd>25</TableTd>
+                                    <TableTd>false</TableTd>
+                                </TableRow>
+                            </TableTbody>
+                        </GridTable>
+                    </GridContent>
+                </GridContainer>
+            </>
+        )}
+        {...props}
+    ></Grid>
+);