|
1 | 1 | import { Icon } from '../../icon';
|
2 |
| - |
| 2 | +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid'; |
| 3 | +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; |
3 | 4 |
|
4 | 5 | export default () =>(
|
5 | 6 | <>
|
6 | 7 | <div id="test-area" className="k-d-grid k-grid-cols-1">
|
7 | 8 |
|
8 | 9 | <section>
|
9 |
| - <div className="k-grid k-grid-md k-grid-no-scrollbar" style={{ width: "600px", height: "400px" }}> |
10 |
| - <div className="k-grid-header"> |
| 10 | + |
| 11 | + <Grid className="k-grid-no-scrollbar" style={{ width: "600px", height: "400px" }}> |
| 12 | + <GridHeader> |
11 | 13 | <div className="k-grid-header-wrap">
|
12 |
| - <table className="k-table k-table-md k-grid-header-table"> |
| 14 | + <GridHeaderTable> |
13 | 15 | <colgroup>
|
14 | 16 | <col className="k-hierarchy-col" /><col />
|
15 | 17 | </colgroup>
|
16 |
| - <thead className="k-table-thead"> |
17 |
| - <tr className="k-table-row"> |
18 |
| - <th className="k-table-th k-header k-hierarchy-cell"> |
19 |
| - </th> |
20 |
| - <th className="k-table-th k-header"> |
21 |
| - <span className="k-cell-inner"> |
22 |
| - <span className="k-link"> |
23 |
| - <span className="k-column-title">Title</span> |
24 |
| - </span> |
25 |
| - </span> |
26 |
| - </th> |
27 |
| - </tr> |
28 |
| - </thead> |
29 |
| - </table> |
| 18 | + <TableThead> |
| 19 | + <TableRow> |
| 20 | + <GridHeaderCell className="k-hierarchy-cell"></GridHeaderCell> |
| 21 | + <GridHeaderCell columnTitle="Title"></GridHeaderCell> |
| 22 | + </TableRow> |
| 23 | + </TableThead> |
| 24 | + </GridHeaderTable> |
30 | 25 | </div>
|
31 |
| - </div> |
32 |
| - <div className="k-grid-content"> |
33 |
| - <table className="k-table k-table-md k-grid-table"> |
34 |
| - <colgroup> |
35 |
| - <col className="k-hierarchy-col" /><col /> |
36 |
| - </colgroup> |
37 |
| - <tbody className="k-table-tbody"> |
38 |
| - <tr className="k-table-row k-master-row"> |
39 |
| - <td className="k-table-td k-hierarchy-cell"> |
40 |
| - <Icon icon="caret-alt-right" /> |
41 |
| - </td> |
42 |
| - <td className="k-table-td">1</td> |
43 |
| - </tr> |
44 |
| - <tr className="k-table-row k-table-alt-row k-alt k-master-row k-expanded"> |
45 |
| - <td className="k-table-td k-hierarchy-cell"> |
46 |
| - <Icon icon="caret-alt-down" /> |
47 |
| - </td> |
48 |
| - <td className="k-table-td">2</td> |
49 |
| - </tr> |
50 |
| - <tr className="k-table-row k-detail-row"> |
51 |
| - <td className="k-table-td k-hierarchy-cell"></td> |
52 |
| - <td className="k-table-td k-detail-cell" colSpan={1}> |
53 |
| - {/* hierarchy child content */} |
54 |
| - <div className="k-grid k-grid-md k-grid-no-scrollbar" style={{ height: "200px" }}> |
55 |
| - <div className="k-grid-header"> |
56 |
| - <div className="k-grid-header-wrap"> |
57 |
| - <table className="k-table k-table-md k-grid-header-table"> |
58 |
| - <colgroup> |
59 |
| - <col /><col /> |
60 |
| - </colgroup> |
61 |
| - <thead className="k-table-thead"> |
62 |
| - <tr className="k-table-row"> |
63 |
| - <th className="k-table-th k-header"> |
64 |
| - <span className="k-cell-inner"> |
65 |
| - <span className="k-link"> |
66 |
| - <span className="k-column-title">Title</span> |
67 |
| - </span> |
68 |
| - </span> |
69 |
| - </th> |
70 |
| - <th className="k-table-th k-header"> |
71 |
| - <span className="k-cell-inner"> |
72 |
| - <span className="k-link"> |
73 |
| - <span className="k-column-title">Title</span> |
74 |
| - </span> |
75 |
| - </span> |
76 |
| - </th> |
77 |
| - </tr> |
78 |
| - </thead> |
79 |
| - </table> |
80 |
| - </div> |
81 |
| - </div> |
82 |
| - <div className="k-grid-content"> |
83 |
| - <table className="k-table k-table-md k-grid-table"> |
84 |
| - <colgroup> |
85 |
| - <col /><col /> |
86 |
| - </colgroup> |
87 |
| - <tbody className="k-table-tbody"> |
88 |
| - <tr className="k-table-row k-master-row"> |
89 |
| - <td className="k-table-td">Text</td> |
90 |
| - <td className="k-table-td">Text</td> |
91 |
| - </tr> |
92 |
| - <tr className="k-table-row k-table-alt-row k-alt k-master-row"> |
93 |
| - <td className="k-table-td">Text</td> |
94 |
| - <td className="k-table-td">Text</td> |
95 |
| - </tr> |
96 |
| - </tbody> |
97 |
| - </table> |
98 |
| - </div> |
99 |
| - </div> |
100 |
| - </td> |
101 |
| - </tr> |
102 |
| - </tbody> |
103 |
| - </table> |
104 |
| - </div> |
105 |
| - </div> |
| 26 | + </GridHeader> |
| 27 | + <GridContainer> |
| 28 | + <GridContent> |
| 29 | + <GridTable> |
| 30 | + <colgroup> |
| 31 | + <col className="k-hierarchy-col" /><col /> |
| 32 | + </colgroup> |
| 33 | + <TableTbody> |
| 34 | + <TableRow className="k-master-row"> |
| 35 | + <TableTd className="k-hierarchy-cell"> |
| 36 | + <Icon icon="caret-alt-right"></Icon> |
| 37 | + </TableTd> |
| 38 | + <TableTd>1</TableTd> |
| 39 | + </TableRow> |
| 40 | + <TableRow alt className="k-master-row k-expanded"> |
| 41 | + <TableTd className="k-hierarchy-cell"> |
| 42 | + <Icon icon="caret-alt-down"></Icon> |
| 43 | + </TableTd> |
| 44 | + <TableTd>2</TableTd> |
| 45 | + </TableRow> |
| 46 | + <TableRow className="k-detail-row"> |
| 47 | + <TableTd className="k-hierarchy-cell"></TableTd> |
| 48 | + <TableTd className="k-detail-cell" colspan={1}> |
| 49 | + {/* hierarchy child content */} |
| 50 | + <Grid className="k-grid-no-scrollbar" style={{ height: "200px" }}> |
| 51 | + <GridHeader> |
| 52 | + <div className="k-grid-header-wrap"> |
| 53 | + <GridHeaderTable> |
| 54 | + <colgroup> |
| 55 | + <col /><col /> |
| 56 | + </colgroup> |
| 57 | + <TableThead> |
| 58 | + <TableRow> |
| 59 | + <GridHeaderCell columnTitle="Title"></GridHeaderCell> |
| 60 | + <GridHeaderCell columnTitle="Title"></GridHeaderCell> |
| 61 | + </TableRow> |
| 62 | + </TableThead> |
| 63 | + </GridHeaderTable> |
| 64 | + </div> |
| 65 | + </GridHeader> |
| 66 | + <GridContainer> |
| 67 | + <GridContent> |
| 68 | + <GridTable> |
| 69 | + <colgroup> |
| 70 | + <col /> |
| 71 | + <col /> |
| 72 | + </colgroup> |
| 73 | + <TableTbody> |
| 74 | + <TableRow className="k-master-row"> |
| 75 | + <TableTd>Text</TableTd> |
| 76 | + <TableTd>Text</TableTd> |
| 77 | + </TableRow> |
| 78 | + <TableRow alt className="k-master-row"> |
| 79 | + <TableTd>Text</TableTd> |
| 80 | + <TableTd>Text</TableTd> |
| 81 | + </TableRow> |
| 82 | + </TableTbody> |
| 83 | + </GridTable> |
| 84 | + </GridContent> |
| 85 | + </GridContainer> |
| 86 | + </Grid> |
| 87 | + </TableTd> |
| 88 | + </TableRow> |
| 89 | + </TableTbody> |
| 90 | + </GridTable> |
| 91 | + </GridContent> |
| 92 | + </GridContainer> |
| 93 | + </Grid> |
| 94 | + |
106 | 95 | </section>
|
107 | 96 |
|
108 | 97 | </div>
|
|
0 commit comments