@progress/kendo-themes-html 7.2.1-dev.0 → 7.2.1-dev.1

package/src/treelist/tests/treelist-aggregate-react.tsx

@@ -1,100 +1,102 @@
 import { Icon } from '../../icon';
-
+import { TreeList } from '../../treelist';
+import { GridTable } from '../../grid';
+import { TableThead, TableTbody, TableRow, TableTd, TableTh } from '../../table';
 
 export default () =>(
     <>
         <div id="test-area" className="k-d-grid">
             <section>
                 <span>React</span>
-                <div className="k-grid k-grid-md k-treelist-scrollable">
-                    <table className="k-table k-table-md">
+                <TreeList className="k-treelist-scrollable">
+                    <GridTable>
                         <colgroup>
                             <col style={{ width: "34%" }} />
                             <col style={{ width: "33%" }} />
                             <col style={{ width: "33%" }} />
                         </colgroup>
-                        <thead className="k-table-thead k-grid-header">
-                            <tr className="k-table-row">
-                                <th colSpan={1} rowSpan={1} className="k-table-th k-header" style={{ top: '0px' }}><a className="k-link">Name</a></th>
-                                <th colSpan={1} rowSpan={1} className="k-table-th k-header" style={{ top: '0px' }}><a className="k-link">Position</a></th>
-                                <th colSpan={1} rowSpan={1} className="k-table-th k-header" style={{ top: '0px' }}><a className="k-link">Hire Date</a></th>
-                            </tr>
-                        </thead>
-                        <tbody className="k-table-tbody">
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}>
+                        <TableThead className="k-grid-header">
+                            <TableRow>
+                                <TableTh colspan={1} rowspan={1} className="k-header" style={{ top: '0px' }}><a className="k-link">Name</a></TableTh>
+                                <TableTh colspan={1} rowspan={1} className="k-header" style={{ top: '0px' }}><a className="k-link">Position</a></TableTh>
+                                <TableTh colspan={1} rowspan={1} className="k-header" style={{ top: '0px' }}><a className="k-link">Hire Date</a></TableTh>
+                            </TableRow>
+                        </TableThead>
+                        <TableTbody>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                     Daryl Sweeney
-                                </td>
-                                <td colSpan={1} className="k-table-td">CEO</td>
-                                <td colSpan={1} className="k-table-td">March 7, 2012</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>CEO</TableTd>
+                                <TableTd colspan={1}>March 7, 2012</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className=" k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Guy Wooten
-                                </td>
-                                <td colSpan={1} className="k-table-td">Chief Technical Officer</td>
-                                <td colSpan={1} className="k-table-td">April 3, 2010</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Chief Technical Officer</TableTd>
+                                <TableTd colspan={1}>April 3, 2010</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Priscilla Frank
-                                </td>
-                                <td colSpan={1} className="k-table-td">Chief Product Officer</td>
-                                <td colSpan={1} className="k-table-td">December 30, 2014</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Chief Product Officer</TableTd>
+                                <TableTd colspan={1}>December 30, 2014</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                     Anika Vega
-                                </td>
-                                <td colSpan={1} className="k-table-td">Chief Process Officer</td>
-                                <td colSpan={1} className="k-table-td">March 25, 2010</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Chief Process Officer</TableTd>
+                                <TableTd colspan={1}>March 25, 2010</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Vernon Ballard
-                                </td>
-                                <td colSpan={1} className="k-table-td">Director Facilities</td>
-                                <td colSpan={1} className="k-table-td">July 26, 2015</td>
-                            </tr>
-                            <tr className="k-table-row k-group-footer">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>7 employee(s)</td>
-                                <td colSpan={1} className="k-table-td"></td>
-                                <td colSpan={1} className="k-table-td">Last employee hired on August 30, 2015</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Director Facilities</TableTd>
+                                <TableTd colspan={1}>July 26, 2015</TableTd>
+                            </TableRow>
+                            <TableRow className="k-group-footer">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>7 employee(s)</TableTd>
+                                <TableTd colspan={1}></TableTd>
+                                <TableTd colspan={1}>Last employee hired on August 30, 2015</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Nevada Hart
-                                </td>
-                                <td colSpan={1} className="k-table-td">Chief Financial Officer</td>
-                                <td colSpan={1} className="k-table-td">September 17, 2015</td>
-                            </tr>
-                            <tr className="k-table-row k-master-row">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
+                                </TableTd>
+                                <TableTd colspan={1}>Chief Financial Officer</TableTd>
+                                <TableTd colspan={1}>September 17, 2015</TableTd>
+                            </TableRow>
+                            <TableRow className="k-master-row">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>
                                     <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                     Hunter Fry
-                                </td>
-                                <td colSpan={1} className="k-table-td">General Counsel</td>
-                                <td colSpan={1} className="k-table-td">March 12, 2011</td>
-                            </tr>
-                            <tr className="k-table-row k-group-footer">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>98 employee(s)</td>
-                                <td colSpan={1} className="k-table-td"></td>
-                                <td colSpan={1} className="k-table-td">Last employee hired on September 17, 2015</td>
-                            </tr>
-                            <tr className="k-table-row k-group-footer">
-                                <td className="k-table-td k-text-nowrap" colSpan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>99 employee(s)</td>
-                                <td colSpan={1} className="k-table-td"></td>
-                                <td colSpan={1} className="k-table-td">Last employee hired on September 17, 2015</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+                                </TableTd>
+                                <TableTd colspan={1}>General Counsel</TableTd>
+                                <TableTd colspan={1}>March 12, 2011</TableTd>
+                            </TableRow>
+                            <TableRow className="k-group-footer">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>98 employee(s)</TableTd>
+                                <TableTd colspan={1}></TableTd>
+                                <TableTd colspan={1}>Last employee hired on September 17, 2015</TableTd>
+                            </TableRow>
+                            <TableRow className="k-group-footer">
+                                <TableTd className="k-text-nowrap" colspan={1}><Icon className="k-treelist-toggle" icon="none"></Icon>99 employee(s)</TableTd>
+                                <TableTd colspan={1}></TableTd>
+                                <TableTd colspan={1} className="k-table-TableTd">Last employee hired on September 17, 2015</TableTd>
+                            </TableRow>
+                        </TableTbody>
+                    </GridTable>
+                </TreeList>
             </section>
         </div>
     </>