@progress/kendo-themes-html 7.1.1-dev.0 → 7.2.0-dev.0

package/src/grid/tests/grid.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '../../icon';
-import { Pager } from '../../pager';
 import { SkeletonNormal } from '../../skeleton';
+import { Grid, GridHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable, GridPager } from '../../grid';
+import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
 
 
 export default () =>(
@@ -10,227 +11,171 @@ export default () =>(
             <span className="col-2">jQuery grid</span>
 
             <section className="col-2">
-                <div className="k-grid k-grid-md k-grid-no-scrollbar">
-                    <div className="k-grid-header">
+                <Grid className="k-grid-no-scrollbar" pager={( <GridPager /> )}>
+                    <GridHeader>
                         <div className="k-grid-header-wrap">
-                            <table className="k-table k-table-md k-grid-header-table">
+                            <GridHeaderTable>
                                 <colgroup>
                                     <col style={{ width: "100px" }} />
                                     <col />
                                 </colgroup>
-                                <thead className="k-table-thead">
-                                    <tr className="k-table-row">
-                                        <th className="k-table-th k-header">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">100px</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                        <th className="k-table-th k-header">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">no width</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                            </table>
+                                <TableThead>
+                                    <TableRow>
+                                        <GridHeaderCell columnTitle="100px" />
+                                        <GridHeaderCell columnTitle="no width" />
+                                    </TableRow>
+                                </TableThead>
+                            </GridHeaderTable>
                         </div>
-                    </div>
-                    <div className="k-grid-content">
-                        <table className="k-table k-table-md k-grid-table">
-                            <colgroup>
-                                <col style={{ width: "100px" }} />
-                                <col />
-                            </colgroup>
-                            <tbody className="k-table-tbody">
-                                <tr className="k-table-row">
-                                    <td className="k-table-td">1</td>
-                                    <td className="k-table-td">Row</td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-alt">
-                                    <td className="k-table-td">2</td>
-                                    <td className="k-table-td">Alt row</td>
-                                </tr>
-                                <tr className="k-table-row">
-                                    <td className="k-table-td">3</td>
-                                    <td className="k-table-td">
-                                        This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment.
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-alt">
-                                    <td className="k-table-td">4</td>
-                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
-                                </tr>
-                                <tr className="k-table-row">
-                                    <td className="k-table-td">5</td>
-                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <Pager className="k-grid-pager" />
-                </div>
+                    </GridHeader>
+                    <GridContainer>
+                        <GridContent>
+                            <GridTable>
+                                <colgroup>
+                                    <col style={{ width: "100px" }} />
+                                    <col />
+                                </colgroup>
+                                <TableTbody>
+                                    <TableRow>
+                                        <TableTd>1</TableTd>
+                                        <TableTd>Row</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-alt" alt>
+                                        <TableTd>2</TableTd>
+                                        <TableTd>Alt row</TableTd>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableTd>3</TableTd>
+                                        <TableTd>
+                                    This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment.
+                                        </TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-alt" alt>
+                                        <TableTd>4</TableTd>
+                                        <TableTd><SkeletonNormal animation={false} /></TableTd>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableTd>5</TableTd>
+                                        <TableTd><SkeletonNormal animation={false} /></TableTd>
+                                    </TableRow>
+                                </TableTbody>
+                            </GridTable>
+                        </GridContent>
+                    </GridContainer>
+                </Grid>
             </section>
 
             <span className="col-2">jQuery -- fixed height, hierarchy, filter menu, sort icon</span>
+
             <section className="col-2">
-                <div className="k-grid k-grid-md k-grid-no-scrollbar" style={{ height: "250px" }}>
-                    <div className="k-grid-header">
+                <Grid className="k-grid-no-scrollbar" style={{ height: "250px" }}>
+                    <GridHeader>
                         <div className="k-grid-header-wrap">
-                            <table className="k-table k-table-md k-grid-header-table">
+                            <GridHeaderTable>
                                 <colgroup>
                                     <col className="k-hierarchy-col" /><col /><col /><col /><col />
                                 </colgroup>
-                                <thead className="k-table-thead">
-                                    <tr className="k-table-row">
-                                        <th className="k-table-th k-header k-hierarchy-cell">
-                                        </th>
-                                        <th className="k-table-th k-header k-filterable">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Default</span>
-                                                </span>
-                                                <a href="#" className="k-grid-filter-menu k-grid-header-menu"><Icon icon="filter" /></a>
-                                            </span>
-                                        </th>
-                                        <th className="k-table-th k-header k-filterable k-hover">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Hover</span>
-                                                </span>
-                                                <a href="#" className="k-grid-filter-menu k-grid-header-menu"><Icon icon="filter" /></a>
-                                            </span>
-                                        </th>
-                                        <th className="k-table-th k-header k-filterable k-focus">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Focus</span>
-                                                </span>
-                                                <a href="#" className="k-grid-filter-menu k-grid-header-menu"><Icon icon="filter" /></a>
-                                            </span>
-                                        </th>
-                                        <th className="k-table-th k-header k-filterable k-active">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Active</span>
-                                                </span>
-                                                <a href="#" className="k-grid-filter-menu k-grid-header-menu k-active"><Icon icon="filter" /></a>
-                                            </span>
-                                        </th>
-                                        <th className="k-table-th k-header k-filterable k-sorted">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Sorted</span>
-                                                    <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
-                                                </span>
-                                                <a href="#" className="k-grid-filter-menu k-grid-header-menu"><Icon icon="filter" /></a>
-                                            </span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                            </table>
+                                <TableThead>
+                                    <TableRow>
+                                        <GridHeaderCell className="k-hierarchy-cell"></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Default" menu="filter"></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Hover" menu="filter" hover></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Focus" menu="filter" focus></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Active" menu="filter" active></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Sorted" menu="filter" sortable></GridHeaderCell>
+                                    </TableRow>
+                                </TableThead>
+                            </GridHeaderTable>
                         </div>
-                    </div>
-                    <div className="k-grid-content">
-                        <table className="k-table k-table-md k-grid-table">
-                            <colgroup>
-                                <col className="k-hierarchy-col" /><col /><col /><col /><col />
-                            </colgroup>
-                            <tbody className="k-table-tbody">
-                                <tr className="k-table-row k-master-row k-expanded">
-                                    <td className="k-table-td k-hierarchy-cell">
-                                        <Icon icon="caret-alt-down" />
-                                    </td>
-                                    <td className="k-table-td">1</td>
-                                    <td className="k-table-td">Text</td>
-                                    <td className="k-table-td">Text</td>
-                                    <td className="k-table-td">Text</td>
-                                    <td className="k-table-td">Text</td>
-                                </tr>
-                                <tr className="k-table-row k-detail-row">
-                                    <td className="k-table-td k-hierarchy-cell"></td>
-                                    <td className="k-table-td k-detail-cell" colSpan={5}>
-                                        {/* hierarchy child content */}
-                                        <div style={{ background: "#ccc", padding: "10px" }}>
-                                            Nested content
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-alt k-master-row">
-                                    <td className="k-table-td k-hierarchy-cell">
-                                        <Icon icon="caret-alt-right" />
-                                    </td>
-                                    <td className="k-table-td">2</td>
-                                    <td className="k-table-td">Text</td>
-                                    <td className="k-table-td">Text</td>
-                                    <td className="k-table-td">Text</td>
-                                    <td className="k-table-td">Text</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
+                    </GridHeader>
+                    <GridContainer>
+                        <GridContent>
+                            <GridTable>
+                                <colgroup>
+                                    <col className="k-hierarchy-col" /><col /><col /><col /><col />
+                                </colgroup>
+                                <TableTbody>
+                                    <TableRow className="k-master-row k-expanded">
+                                        <TableTd className="k-hierarchy-cell">
+                                            <Icon icon="caret-alt-down" />
+                                        </TableTd>
+                                        <TableTd>1</TableTd>
+                                        <TableTd>Text</TableTd>
+                                        <TableTd>Text</TableTd>
+                                        <TableTd>Text</TableTd>
+                                        <TableTd>Text</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-detail-row">
+                                        <TableTd className="k-hierarchy-cell"></TableTd>
+                                        <TableTd className="k-detail-cell" colspan={5}>
+                                            {/* hierarchy child content */}
+                                            <div style={{ background: "#ccc", padding: "10px" }}>
+                                        Nested content
+                                            </div>
+                                        </TableTd>
+                                    </TableRow>
+                                    <TableRow alt className="k-alt k-master-row">
+                                        <TableTd className="k-hierarchy-cell">
+                                            <Icon icon="caret-alt-right" />
+                                        </TableTd>
+                                        <TableTd>2</TableTd>
+                                        <TableTd>Text</TableTd>
+                                        <TableTd>Text</TableTd>
+                                        <TableTd>Text</TableTd>
+                                        <TableTd>Text</TableTd>
+                                    </TableRow>
+                                </TableTbody>
+                            </GridTable>
+                        </GridContent>
+                    </GridContainer>
+                </Grid>
             </section>
 
             <span>Drag column</span>
             <section className="col-2">
-                <div id="grid" data-role="grid" className="k-grid k-grid-md k-grid-display-block">
-                    <div className="k-grid-header">
+                <Grid id="grid" data-role="grid" className="k-grid-display-block">
+                    <GridHeader>
                         <div className="k-grid-header-wrap k-auto-scrollable">
-                            <table className="k-table k-table-md k-grid-header-table">
+                            <GridHeaderTable>
                                 <colgroup>
                                     <col className="k-drag-col" />
                                     <col />
                                     <col />
                                 </colgroup>
-                                <thead className="k-table-thead">
-                                    <tr className="k-table-row">
-                                        <th className="k-table-th k-drag-cell k-header"></th>
-                                        <th className="k-table-th k-header">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Company Name</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                        <th className="k-table-th k-header">
-                                            <span className="k-cell-inner">
-                                                <span className="k-link">
-                                                    <span className="k-column-title">Country</span>
-                                                </span>
-                                            </span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                            </table>
+                                <TableThead>
+                                    <TableRow>
+                                        <GridHeaderCell className="k-drag-cell"></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Company Name"></GridHeaderCell>
+                                        <GridHeaderCell columnTitle="Country"></GridHeaderCell>
+                                    </TableRow>
+                                </TableThead>
+                            </GridHeaderTable>
                         </div>
-                    </div>
-                    <div className="k-grid-content k-auto-scrollable">
-                        <table className="k-table k-table-md k-grid-table" role="grid">
-                            <colgroup>
-                                <col className="k-drag-col" />
-                                <col />
-                                <col />
-                            </colgroup>
-                            <tbody className="k-table-tbody">
-                                <tr className="k-table-row k-master-row">
-                                    <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                    <td className="k-table-td">Alfreds Futterkiste</td>
-                                    <td className="k-table-td">Germany</td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-alt k-master-row">
-                                    <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                    <td className="k-table-td">Ana Trujillo Emparedados y helados</td>
-                                    <td className="k-table-td">Mexico</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-
+                    </GridHeader>
+                    <GridContainer>
+                        <GridContent>
+                            <GridTable>
+                                <colgroup>
+                                    <col className="k-drag-col" />
+                                    <col />
+                                    <col />
+                                </colgroup>
+                                <TableTbody>
+                                    <TableRow className="k-master-row">
+                                        <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                        <TableTd>Alfreds Futterkiste</TableTd>
+                                        <TableTd>Germany</TableTd>
+                                    </TableRow>
+                                    <TableRow alt className="k-alt k-master-row">
+                                        <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                        <TableTd>Ana Trujillo Emparedados y helados</TableTd>
+                                        <TableTd>Mexico</TableTd>
+                                    </TableRow>
+                                </TableTbody>
+                            </GridTable>
+                        </GridContent>
+                    </GridContainer>
+                </Grid>
             </section>
         </div>
     </>

package/src/index.ts

@@ -96,7 +96,7 @@ export * from './tilelayout/index';
 // export * from './dock-manager/index';
 
 // Data management
-// export * from './grid/index';
+export * from './grid/index';
 export * from './listview/index';
 // export * from './spreadsheet/index';
 // export * from './pivotgrid/index';

package/src/table/table-th.tsx

@@ -5,6 +5,7 @@ const className = `k-table-th`;
 export type KendoTableThProps = {
     text?: string;
     colspan?: any;
+    rowspan?: any;
 };
 
 export const TableTh = (
@@ -14,6 +15,7 @@ export const TableTh = (
     const {
         text,
         colspan,
+        rowspan,
         ...other
     } = props;
 
@@ -24,6 +26,7 @@ export const TableTh = (
     return (
         <th
             colSpan={colspan}
+            rowSpan={rowspan}
             {...other}
             className={classNames(
                 props.className,