-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(grid): extract sticky and locked column state tests
- Loading branch information
Showing
2 changed files
with
263 additions
and
0 deletions.
There are no files selected for viewing
140 changes: 140 additions & 0 deletions
140
packages/html/src/grid/tests/grid-locked-column-states.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import { GridContainer, GridContent, GridHeader, GridHeaderCell, GridHeaderTable, GridTable, GridWithLockedColumns } from '../../grid'; | ||
| import { TableThead, TableRow, TableTbody, TableTd } from '../../table'; | ||
|
|
||
| export default () => ( | ||
| <> | ||
| <div id="test-area" className="k-d-grid k-grid-cols-1"> | ||
| <GridWithLockedColumns> | ||
| <GridHeader> | ||
| <div className="k-grid-header-locked" style={{ width: "400px" }}> | ||
| <GridHeaderTable> | ||
| <colgroup> | ||
| <col style={{ width: "150px" }} /> | ||
| <col style={{ width: "300px" }} /> | ||
| </colgroup> | ||
| <TableThead> | ||
| <TableRow> | ||
| <GridHeaderCell menu="column" columnTitle="Order ID"></GridHeaderCell> | ||
| <GridHeaderCell menu="column" columnTitle="Ship Name"></GridHeaderCell> | ||
| </TableRow> | ||
| </TableThead> | ||
| </GridHeaderTable> | ||
| </div> | ||
| <div className="k-grid-header-wrap" style={{ width: "581px" }}> | ||
| <GridHeaderTable> | ||
| <colgroup> | ||
| <col style={{ width: "300px" }} /> | ||
| <col style={{ width: "300px" }} /> | ||
| <col style={{ width: "400px" }} /> | ||
| </colgroup> | ||
| <TableThead> | ||
| <TableRow> | ||
| <GridHeaderCell menu="column" columnTitle="Ship Country"></GridHeaderCell> | ||
| <GridHeaderCell menu="column" columnTitle="Ship City"></GridHeaderCell> | ||
| <GridHeaderCell menu="column" columnTitle="Ship Address"></GridHeaderCell> | ||
| </TableRow> | ||
| </TableThead> | ||
| </GridHeaderTable> | ||
| </div> | ||
| </GridHeader> | ||
| <GridContainer> | ||
| <div className="k-grid-content-locked" style={{ width: "400px", height: "303px" }}> | ||
| <GridTable> | ||
| <colgroup> | ||
| <col style={{ width: "150px" }} /> | ||
| <col style={{ width: "300px" }} /> | ||
| </colgroup> | ||
| <TableTbody> | ||
| <TableRow> | ||
| <TableTd>10248</TableTd> | ||
| <TableTd>Vins et alcools Chevalier</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-alt" alt> | ||
| <TableTd>10249</TableTd> | ||
| <TableTd>Toms Spezialitäten</TableTd> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableTd>10250</TableTd> | ||
| <TableTd>Hanari Carnes</TableTd> | ||
| </TableRow> | ||
| <TableRow hover className="k-alt" alt> | ||
| <TableTd>10251</TableTd> | ||
| <TableTd>Victuailles en stock (Hover)</TableTd> | ||
| </TableRow> | ||
| <TableRow selected > | ||
| <TableTd>10252</TableTd> | ||
| <TableTd>Suprêmes délices (Selected)</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-alt" alt hover selected> | ||
| <TableTd>10253</TableTd> | ||
| <TableTd>Toms (Selected + Hover)</TableTd> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableTd>10254</TableTd> | ||
| <TableTd>Hanari Carnes</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-alt" alt> | ||
| <TableTd>10255</TableTd> | ||
| <TableTd>Victuailles en stock</TableTd> | ||
| </TableRow> | ||
| </TableTbody> | ||
| </GridTable> | ||
| </div> | ||
| <GridContent className="k-virtual-content" style={{ width: "605px", height: "320px" }}> | ||
| <GridTable> | ||
| <colgroup> | ||
| <col style={{ width: "300px" }} /> | ||
| <col style={{ width: "300px" }} /> | ||
| <col style={{ width: "400px" }} /> | ||
| </colgroup> | ||
| <TableTbody> | ||
| <TableRow> | ||
| <TableTd>France</TableTd> | ||
| <TableTd>Reims</TableTd> | ||
| <TableTd>59 rue de l'Abbaye</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-alt" alt> | ||
| <TableTd>Germany</TableTd> | ||
| <TableTd>Münster</TableTd> | ||
| <TableTd>Luisenstr. 48</TableTd> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableTd>Brazil</TableTd> | ||
| <TableTd>Rio de Janeiro</TableTd> | ||
| <TableTd>Rua do Paço, 67</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-alt" alt hover> | ||
| <TableTd>France</TableTd> | ||
| <TableTd>Lyon</TableTd> | ||
| <TableTd>2, rue du Commerce</TableTd> | ||
| </TableRow> | ||
| <TableRow selected> | ||
| <TableTd>Belgium</TableTd> | ||
| <TableTd>Charleroi</TableTd> | ||
| <TableTd>Boulevard Tirou, 255</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-alt" alt hover selected> | ||
| <TableTd>Germany</TableTd> | ||
| <TableTd>Münster</TableTd> | ||
| <TableTd>Luisenstr. 48</TableTd> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableTd>Brazil</TableTd> | ||
| <TableTd>Rio de Janeiro</TableTd> | ||
| <TableTd>Rua do Paço, 67</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-alt" alt> | ||
| <TableTd>France</TableTd> | ||
| <TableTd>Lyon</TableTd> | ||
| <TableTd>2, rue du Commerce</TableTd> | ||
| </TableRow> | ||
| </TableTbody> | ||
| </GridTable> | ||
| </GridContent> | ||
| </GridContainer> | ||
| </GridWithLockedColumns> | ||
| </div> | ||
|
|
||
| </> | ||
|
|
||
| ); |
123 changes: 123 additions & 0 deletions
123
packages/html/src/grid/tests/grid-sticky-column-states.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import { GridContainer, GridContent, GridHeader, GridHeaderCell, GridHeaderTable, GridTable, GridWithStickyColumns } from '../../grid'; | ||
| import { TableThead, TableRow, TableTbody, TableTd } from '../../table'; | ||
|
|
||
| export default () => ( | ||
| <> | ||
| <div id="test-area" className="k-d-grid k-grid-cols-1"> | ||
| <GridWithStickyColumns> | ||
| <GridHeader> | ||
| <div className="k-grid-header-wrap"> | ||
| <GridHeaderTable style={{ width: "1100px" }}> | ||
| <colgroup> | ||
| <col style={{ width: "250px" }} /> | ||
| <col style={{ width: "150px" }} /> | ||
| <col style={{ width: "200px" }} /> | ||
| <col style={{ width: "250px" }} /> | ||
| <col style={{ width: "250px" }} /> | ||
| </colgroup> | ||
| <TableThead> | ||
| <TableRow> | ||
| <GridHeaderCell className="k-grid-content-sticky" rowspan={1} colspan={1} columnTitle="Product Name" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}></GridHeaderCell> | ||
| <GridHeaderCell rowspan={1} colspan={1} columnTitle="Units In Stock"></GridHeaderCell> | ||
| <GridHeaderCell rowspan={1} colspan={1} columnTitle="Price"></GridHeaderCell> | ||
| <GridHeaderCell className="k-grid-content-sticky" rowspan={1} colspan={1} columnTitle="Units on Order" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}></GridHeaderCell> | ||
| <GridHeaderCell rowspan={1} colspan={1} columnTitle="Reorder Level"></GridHeaderCell> | ||
| </TableRow> | ||
| </TableThead> | ||
| </GridHeaderTable> | ||
| </div> | ||
| </GridHeader> | ||
| <GridContainer> | ||
| <GridContent className="k-virtual-content"> | ||
| <div style={{ position: "relative" }}> | ||
| <GridTable style={{ width: "1100px" }}> | ||
| <colgroup> | ||
| <col width="250px" /> | ||
| <col width="150px" /> | ||
| <col width="200px" /> | ||
| <col width="250px" /> | ||
| <col width="250px" /> | ||
| </colgroup> | ||
| <TableTbody> | ||
| <TableRow className="k-master-row"> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chai</TableTd> | ||
| <TableTd colspan={1}>39</TableTd> | ||
| <TableTd colspan={1}>$18.00</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd> | ||
| <TableTd colspan={1}>10</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-master-row k-alt" role="row" alt> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chang</TableTd> | ||
| <TableTd colspan={1}>17</TableTd> | ||
| <TableTd colspan={1}>$19.00</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>40</TableTd> | ||
| <TableTd colspan={1}>25</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-master-row" role="row" selected> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Aniseed Syrup (Selected)</TableTd> | ||
| <TableTd colspan={1}>13</TableTd> | ||
| <TableTd colspan={1}>$10.00</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>70</TableTd> | ||
| <TableTd colspan={1}>25</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-master-row k-alt" role="row" alt selected> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef Anton's (Alt Selected)</TableTd> | ||
| <TableTd colspan={1}>53</TableTd> | ||
| <TableTd colspan={1}>$22.00</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd> | ||
| <TableTd colspan={1}>0</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-master-row" role="row" selected hover> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef Anton's (Selected + Hover) </TableTd> | ||
| <TableTd colspan={1}>0</TableTd> | ||
| <TableTd colspan={1}>$21.35</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd> | ||
| <TableTd colspan={1}>0</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-master-row k-alt" role="row" alt selected hover> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Grandma's (Alt Selected + Hover) </TableTd> | ||
| <TableTd colspan={1}>120</TableTd> | ||
| <TableTd colspan={1}>$25.00</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd> | ||
| <TableTd colspan={1}>25</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-master-row" role="row"> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Uncle Bob's Organic Dried Pears</TableTd> | ||
| <TableTd colspan={1}>15</TableTd> | ||
| <TableTd colspan={1}>$30.00</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd> | ||
| <TableTd colspan={1}>10</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-master-row k-alt" role="row" alt> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Northwoods Cranberry Sauce</TableTd> | ||
| <TableTd colspan={1}>6</TableTd> | ||
| <TableTd colspan={1}>$40.00</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd> | ||
| <TableTd colspan={1}>0</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-master-row" role="row"> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Mishi Kobe Niku</TableTd> | ||
| <TableTd colspan={1}>29</TableTd> | ||
| <TableTd colspan={1}>97</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd> | ||
| <TableTd colspan={1}>0</TableTd> | ||
| </TableRow> | ||
| <TableRow className="k-master-row k-alt" role="row" alt> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Ikura</TableTd> | ||
| <TableTd colspan={1}>31</TableTd> | ||
| <TableTd colspan={1}>$31.00</TableTd> | ||
| <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd> | ||
| <TableTd colspan={1}>0</TableTd> | ||
| </TableRow> | ||
| </TableTbody> | ||
| </GridTable> | ||
| </div> | ||
| <div className="k-height-container"><div></div></div> | ||
| </GridContent> | ||
| </GridContainer> | ||
| </GridWithStickyColumns> | ||
| </div> | ||
|
|
||
| </> | ||
|
|
||
| ); |