diff --git a/packages/default/scss/radio/_theme.scss b/packages/default/scss/radio/_theme.scss index 1a69fe53cd6..6854955e746 100644 --- a/packages/default/scss/radio/_theme.scss +++ b/packages/default/scss/radio/_theme.scss @@ -80,7 +80,7 @@ // Ripple .k-ripple-container { .k-radio::after { - background: $kendo-radio-checked-bg; + background: $kendo-radio-ripple-bg; opacity: $kendo-radio-ripple-opacity; } } diff --git a/packages/fluent/scss/ripple/_layout.scss b/packages/fluent/scss/ripple/_layout.scss index 932f3cf7bb3..2db624748b5 100644 --- a/packages/fluent/scss/ripple/_layout.scss +++ b/packages/fluent/scss/ripple/_layout.scss @@ -39,14 +39,14 @@ @keyframes ripple { 0% { - transform: scale(0); + transform: translate(-50%, -50%) scale(0); } 20% { - transform: scale(1); + transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; - transform: scale(1); + transform: translate(-50%, -50%) scale(1); } } diff --git a/packages/html/src/grid/grid-container.spec.tsx b/packages/html/src/grid/grid-container.spec.tsx new file mode 100644 index 00000000000..94265f96c12 --- /dev/null +++ b/packages/html/src/grid/grid-container.spec.tsx @@ -0,0 +1,17 @@ +import { classNames } from '../misc'; + +const className = `k-grid-container`; + +export const GridContainer = ( + props: React.HTMLAttributes +) => ( +
+ {props.children} +
+); + diff --git a/packages/html/src/grid/grid-content.spec.tsx b/packages/html/src/grid/grid-content.spec.tsx new file mode 100644 index 00000000000..db8890e8db7 --- /dev/null +++ b/packages/html/src/grid/grid-content.spec.tsx @@ -0,0 +1,16 @@ +import { classNames } from '../misc'; + +const className = `k-grid-content`; + +export const GridContent = ( + props: React.HTMLAttributes +) => ( +
+ {props.children} +
+); diff --git a/packages/html/src/grid/grid-footer-table.spec.tsx b/packages/html/src/grid/grid-footer-table.spec.tsx new file mode 100644 index 00000000000..fa2a4742513 --- /dev/null +++ b/packages/html/src/grid/grid-footer-table.spec.tsx @@ -0,0 +1,20 @@ +import { classNames } from '../misc'; +import { Table, KendoTableOptions } from '../table'; + +export const GRIDFOOTERTABLE_CLASSNAME = `k-grid-footer-table`; + +export const GridFooterTable = ( + props: KendoTableOptions & + React.HTMLAttributes +) => ( + + {props.children} +
+); diff --git a/packages/html/src/grid/grid-footer.spec.tsx b/packages/html/src/grid/grid-footer.spec.tsx new file mode 100644 index 00000000000..c3a2e696ae5 --- /dev/null +++ b/packages/html/src/grid/grid-footer.spec.tsx @@ -0,0 +1,17 @@ +import { classNames } from '../misc'; + +const className = `k-grid-footer`; + +export const GridFooter = ( + props: React.HTMLAttributes +) => ( +
+ {props.children} +
+); diff --git a/packages/html/src/grid/grid-grouping-header.spec.tsx b/packages/html/src/grid/grid-grouping-header.spec.tsx new file mode 100644 index 00000000000..29d0237d104 --- /dev/null +++ b/packages/html/src/grid/grid-grouping-header.spec.tsx @@ -0,0 +1,33 @@ +import { classNames } from '../misc'; + +const className = `k-grouping-header`; + +export type KendoGroupingHeaderProps = { + dropHint?: string; + dropClue?: boolean; +}; + +export const GridGroupingHeader = ( + props: KendoGroupingHeaderProps & + React.HTMLAttributes +) => { + const { + dropHint, + dropClue, + ...others + } = props; + + return ( +
+ { dropClue &&
} + {props.children} +
{dropHint}
+
+ ); +}; diff --git a/packages/html/src/grid/grid-header-cell.spec.tsx b/packages/html/src/grid/grid-header-cell.spec.tsx new file mode 100644 index 00000000000..c155884d297 --- /dev/null +++ b/packages/html/src/grid/grid-header-cell.spec.tsx @@ -0,0 +1,104 @@ +import { classNames, States, stateClassNames } from "../misc"; +import { TableTh, KendoTableThProps } from "../table/table-th"; +import { Icon } from "../icon"; + +const className = `k-header`; + +const states = [ + States.hover, + States.focus, + States.active +]; + +export type KendoGridHeaderCellProps = KendoTableThProps & { + menu?: "filter" | "column"; + sortable?: boolean; + sticky?: boolean; + resizable?: boolean; + columnTitle?: string; + scope?: string; + sortIcon?: string; + sortOrder?: number; +}; + +const defaultProps = { + sortIcon: "sort-asc-small" +}; + +export type KendoGridHeaderCellState = { [K in (typeof states)[number]]?: boolean }; + +export const GridHeaderCell = ( + props: KendoGridHeaderCellProps & + KendoGridHeaderCellState & + React.HTMLAttributes +) => { + const { + menu, + sortable, + sticky, + resizable, + columnTitle, + hover, + focus, + active, + sortIcon = defaultProps.sortIcon, + sortOrder, + ...others + } = props; + + return ( + + { + columnTitle && ( + + + {columnTitle} + {sortable && ( + + + + )} + {sortOrder && ( + {sortOrder} + )} + + {menu && ( + + + + )} + + ) + + } + {props.children} + {resizable && ( )} + + ); +}; + +export default GridHeaderCell; diff --git a/packages/html/src/grid/grid-header-table.spec.tsx b/packages/html/src/grid/grid-header-table.spec.tsx new file mode 100644 index 00000000000..2afcfb2307c --- /dev/null +++ b/packages/html/src/grid/grid-header-table.spec.tsx @@ -0,0 +1,20 @@ +import { classNames } from '../misc'; +import { Table, KendoTableOptions } from '../table'; + +export const GRIDHEADERTABLE_CLASSNAME = `k-grid-header-table`; + +export const GridHeaderTable = ( + props: KendoTableOptions & + React.HTMLAttributes +) => ( + + {props.children} +
+); diff --git a/packages/html/src/grid/grid-header.spec.tsx b/packages/html/src/grid/grid-header.spec.tsx new file mode 100644 index 00000000000..37c7c6d13d0 --- /dev/null +++ b/packages/html/src/grid/grid-header.spec.tsx @@ -0,0 +1,19 @@ +import { classNames } from '../misc'; + +const className = `k-grid-header`; + +export const GridHeader = ( + props: React.HTMLAttributes +) => ( +
+ + {props.children} + +
+); diff --git a/packages/html/src/grid/grid-pager.spec.tsx b/packages/html/src/grid/grid-pager.spec.tsx new file mode 100644 index 00000000000..b361d4f69a3 --- /dev/null +++ b/packages/html/src/grid/grid-pager.spec.tsx @@ -0,0 +1,19 @@ +import { classNames } from '../misc'; +import { Pager, KendoPagerProps } from '../pager'; + +const className = `k-grid-pager`; + +export const GridPager = ( + props: KendoPagerProps & + React.HTMLAttributes +) => ( + + {props.children} + +); diff --git a/packages/html/src/grid/grid-table.spec.tsx b/packages/html/src/grid/grid-table.spec.tsx new file mode 100644 index 00000000000..71db0831cc2 --- /dev/null +++ b/packages/html/src/grid/grid-table.spec.tsx @@ -0,0 +1,20 @@ +import { classNames } from '../misc'; +import { Table, KendoTableOptions } from '../table'; + +export const GRIDTABLE_CLASSNAME = `k-grid-table`; + +export const GridTable = ( + props: KendoTableOptions & + React.HTMLAttributes +) => ( + + {props.children} +
+); diff --git a/packages/html/src/grid/grid-toolbar.spec.tsx b/packages/html/src/grid/grid-toolbar.spec.tsx new file mode 100644 index 00000000000..a8fbdbb9738 --- /dev/null +++ b/packages/html/src/grid/grid-toolbar.spec.tsx @@ -0,0 +1,19 @@ +import { classNames } from '../misc'; +import { Toolbar, KendoToolbarProps } from '../toolbar'; + +const className = `k-grid-toolbar`; + +export const GridToolbar = ( + props: KendoToolbarProps & + React.HTMLAttributes +) => ( + + {props.children} + +); diff --git a/packages/html/src/grid/grid.spec.tsx b/packages/html/src/grid/grid.spec.tsx new file mode 100644 index 00000000000..5be5ca79d1b --- /dev/null +++ b/packages/html/src/grid/grid.spec.tsx @@ -0,0 +1,67 @@ +import { classNames, optionClassNames, Size } from '../misc'; + +export const GRID_CLASSNAME = 'k-grid'; + +const states = []; + +const options = { + size: [ Size.small, Size.medium, Size.large ] +}; + +export type KendoGridOptions = { + size?: (typeof options.size)[number] | null; +}; + +export type KendoGridProps = KendoGridOptions & { + toolbar?: JSX.Element; + pager?: JSX.Element; + pagerPosition?: 'top' | 'bottom'; + groupingHeader?: JSX.Element; + _renderAriaRoot?: boolean; +}; + +const defaultProps = { + size: Size.medium, + pagerPosition: 'bottom' +}; + +export const Grid = ( + props: KendoGridProps & + React.HTMLAttributes +) => { + const { + size = defaultProps.size, + toolbar, + pager, + pagerPosition, + groupingHeader, + _renderAriaRoot, + ...other + } = props; + + + return ( +
+ {toolbar} + {pagerPosition === 'top' && pager} + {groupingHeader} + { props.children && _renderAriaRoot ? +
{props.children}
: props.children + } + {pagerPosition === 'bottom' && pager} +
+ ); +}; + +Grid.states = states; +Grid.options = options; +Grid.className = GRID_CLASSNAME; +Grid.defaultProps = defaultProps; + +export default Grid; diff --git a/packages/html/src/grid/index.ts b/packages/html/src/grid/index.ts new file mode 100644 index 00000000000..1e8d862bb19 --- /dev/null +++ b/packages/html/src/grid/index.ts @@ -0,0 +1,12 @@ +export * from './grid.spec'; +export * from './grid-header.spec'; +export * from './grid-grouping-header.spec'; +export * from './grid-header-table.spec'; +export * from './grid-header-cell.spec'; +export * from './grid-container.spec'; +export * from './grid-content.spec'; +export * from './grid-table.spec'; +export * from './grid-footer.spec'; +export * from './grid-footer-table.spec'; +export * from './grid-pager.spec'; +export * from './grid-toolbar.spec'; diff --git a/packages/html/src/grid/tests/grid-adaptive-pager.tsx b/packages/html/src/grid/tests/grid-adaptive-pager.tsx index a50191921f3..bfd490e5e93 100644 --- a/packages/html/src/grid/tests/grid-adaptive-pager.tsx +++ b/packages/html/src/grid/tests/grid-adaptive-pager.tsx @@ -1,4 +1,4 @@ -import { Pager } from '../../pager'; +import { Grid, GridPager } from '../../grid'; export default () =>( @@ -11,9 +11,10 @@ export default () =>(
-
- -
+ + )}> +
@@ -26,9 +27,10 @@ export default () =>(
-
- -
+ + )}> +
diff --git a/packages/html/src/grid/tests/grid-adaptive-search.tsx b/packages/html/src/grid/tests/grid-adaptive-search.tsx index ac5a468e79a..10368c53a34 100644 --- a/packages/html/src/grid/tests/grid-adaptive-search.tsx +++ b/packages/html/src/grid/tests/grid-adaptive-search.tsx @@ -1,6 +1,6 @@ import { Button } from '../../button'; import { Searchbox } from '../../searchbox'; -import { Toolbar } from '../../toolbar'; +import { Grid, GridToolbar } from '../../grid'; export default () =>( @@ -10,12 +10,13 @@ export default () =>(
-
- + - -
+ + )}> +
@@ -26,12 +27,13 @@ export default () =>(
-
- + - -
+ + )}> +
diff --git a/packages/html/src/grid/tests/grid-angular.tsx b/packages/html/src/grid/tests/grid-angular.tsx index 6829a10ea87..f5663a34648 100644 --- a/packages/html/src/grid/tests/grid-angular.tsx +++ b/packages/html/src/grid/tests/grid-angular.tsx @@ -2,9 +2,10 @@ import { ActionButtons } from '../../action-buttons'; import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; import { Icon } from '../../icon'; -import { Pager } from '../../pager'; import { Popup } from '../../popup'; import { SkeletonNormal } from '../../skeleton'; +import { Grid, GridHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable, GridPager } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( @@ -14,86 +15,94 @@ export default () =>( Angular grid
-
-
- {/* add padding-left or -right for scrollbar width */} -
-
- + )} > + +
+ +
+ + + + + + + + + + + + + + +
+
- - - - - - -
- - - 100px - - - - - - no width - - -
+ + + 1 + Row + + + 2 + Alt row + + + 3 + + This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. + + + + 4 + + + +
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
1Row
2Alt row
3 - This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. -
4
-
-
- {/* set height to scroll height (virtual scrolling) */} -
-
+
+ {/* set height to scroll height (virtual scrolling) */} +
-
-
- -
+ + +
Angular -- fixed height, hierarchy, filter menu, sort icon
-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -102,201 +111,109 @@ export default () =>( - - - - - - - - - - - -
- - - Default - - - - - - - - - Hover - - - - - - - - - Focus - - - - - - - - - Active - - - - - - - - - Sorted - - - - - - - - -
+ + + + + 1 + Text + Text + Text + Text + + + + + {/* hierarchy child content */} +
+ Nested content +
+ + + + + + + + 2 + Text + Text + Text + Text + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1TextTextTextText
- {/* hierarchy child content */} -
- Nested content -
-
- - 2TextTextTextText
-
-
-
-
+
+
-
-
-
+ + +
Angular -- standalone column chooser
-
+
-
+ )}> +
- + - - - - - - - -
- - - Product - - - - - - Unit Price - - - - - - Qty Per Unit - - -
+ + + + + + + +
-
-
-
+ + +
- + - - - - - - - - - - - - - - - - - -
Chai1810 boxes x 20 bags
Chang1924 - 12 oz bottles
Aniseed Syrup2024 - 12 oz bottles
+ + + Chai + 18 + 10 boxes x 20 bags + + + Chang + 19 + 24 - 12 oz bottles + + + Aniseed Syrup + 20 + 24 - 12 oz bottles + + +
-
-
- + + +
diff --git a/packages/html/src/grid/tests/grid-column-menu-angular.tsx b/packages/html/src/grid/tests/grid-column-menu-angular.tsx index cd47448019a..338b8b302c3 100644 --- a/packages/html/src/grid/tests/grid-column-menu-angular.tsx +++ b/packages/html/src/grid/tests/grid-column-menu-angular.tsx @@ -1,211 +1,180 @@ import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; -import { Icon } from '../../icon'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
- - - - - - - -
+ + + - - - - Name - -
- - 		- - - Command - -
- -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - -
Product1
Product2
-
-
-
-
+ + Product1 + + + + + + + + + Product2 + + + + + +
-
-
-
+ + + +

Sortable

-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
- + - - - - - - - -
+ + + - - - - Name - -
- - 		- - - Command - -
- -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - -
Product1
Product2
-
-
-
-
+ + Product1 + + + + + + + + + Product2 + + + + + +
-
-
-
+ + + +

Sortable & Resizable

-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
- + - - - - - - - -
+ + + - - - - Name - -
- - 		- - - Command - -
- -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - -
Product1
Product2
-
-
-
-
+ + Product1 + + + + + + + + + Product2 + + + + + +
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-column-menu-blazor.tsx b/packages/html/src/grid/tests/grid-column-menu-blazor.tsx index e5683a7af9d..7dac196834c 100644 --- a/packages/html/src/grid/tests/grid-column-menu-blazor.tsx +++ b/packages/html/src/grid/tests/grid-column-menu-blazor.tsx @@ -1,287 +1,219 @@ import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; -import { Icon } from '../../icon'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
-
+ +
- + - - - - - - - -
+ + + - - - - Name - -
- - 		- - - Command - -
- -
+ + + + + +
-
-
-
+ + +
- + - - - - - - - - - - - - -
+ + + - - Product1 - + + Product1 + -
+ + + + - - Product2 - + + Product2 + -
+ + + + +
+
+
-
-
-
-
-
-
+ + +

Sortable

- -
-
+ +
- + - - - - - - - -
+ + + - - - - - Name - - - - - - - - - - - Command - -
- -
+ + + + + +
-
-
-
+ + +
- + - + - - - - - - - - - - - - -
+ + + - - Product1 - + + Product1 + -
+ + + + - - Product2 - + + Product2 + -
+ + + + +
+
+
-
-
-
-
-
-
+ + +

Sortable & Resizable

- -
-
+ +
- + - - - - - - - -
+ + + - - - - - - Name - - - - - - - - - - - Command - -
- - -
+ + + + + +
-
-
-
+ + +
- + - + - - - - - - - - - - - - -
+ + + - - Product1 - + + Product1 + -
+ + + + - - Product2 - + + Product2 + -
+ + + + +
+
+
-
-
-
-
-
-
+ + +
diff --git a/packages/html/src/grid/tests/grid-column-reordering-actions.tsx b/packages/html/src/grid/tests/grid-column-reordering-actions.tsx index d0a07fecad9..2d965dd55be 100644 --- a/packages/html/src/grid/tests/grid-column-reordering-actions.tsx +++ b/packages/html/src/grid/tests/grid-column-reordering-actions.tsx @@ -1,9 +1,8 @@ import { Chip, ChipAction, ChipList } from '../../chip'; import { Icon } from '../../icon'; -import { Pager } from '../../pager'; -import { Table, TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table'; -import { Toolbar } from '../../toolbar'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; import { Popup } from '../../popup'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar, GridPager } from '../../grid'; const styles = ` .k-animation-container, @@ -21,8 +20,8 @@ export default () =>(
-
- + @@ -37,10 +36,13 @@ export default () =>( } /> - -
+ + )} pager={( + + )}> +
- + @@ -48,98 +50,59 @@ export default () =>( - - - - Product Id - - - - - - - - - - - Unit Price - - - - - - - - - - - Discontinued - - - - - - - - - - - Category - - - - - - - + + + + -
+
-
-
- - - - - - - - - Chef Anton's Gumbo - 21.35 - 0 - Condiments - - - Alice Mutton - 39 - 0 - Meat/Poultry - - - Singaporean Hokkien Fried Mee - 123.79 - 1 - Meat/Poultry - - - Gorgonzola Telino - 12.5 - 0 - Meat/Poultry - - - Perth Pasties - 32.8 - 0 - Meat/Poultry - - -
-
- -
+ + + + + + + + + + + + Chef Anton's Gumbo + 21.35 + 0 + Condiments + + + Alice Mutton + 39 + 0 + Meat/Poultry + + + Singaporean Hokkien Fried Mee + 123.79 + 1 + Meat/Poultry + + + Gorgonzola Telino + 12.5 + 0 + Meat/Poultry + + + Perth Pasties + 32.8 + 0 + Meat/Poultry + + + + + +
diff --git a/packages/html/src/grid/tests/grid-column-reordering.tsx b/packages/html/src/grid/tests/grid-column-reordering.tsx index 97bcc977dc9..9b9d5c648af 100644 --- a/packages/html/src/grid/tests/grid-column-reordering.tsx +++ b/packages/html/src/grid/tests/grid-column-reordering.tsx @@ -1,9 +1,8 @@ import { Chip, ChipAction, ChipList } from '../../chip'; import { Icon } from '../../icon'; -import { Pager } from '../../pager'; -import { Table, TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table'; -import { Toolbar } from '../../toolbar'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; import { Popup } from '../../popup'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridPager, GridToolbar } from '../../grid'; const styles = ` .k-animation-container, @@ -29,8 +28,8 @@ export default () =>(
-
- + @@ -45,109 +44,71 @@ export default () =>( } /> - -
+ + )} pager={( + + )}> +
- + - - - - - Product Id - - - - - - - - - - - Unit Price - - - - - - - - - - - Discontinued - - - - - - - - - - - Category - - - - - - - - + + + + -
+
-
-
- - - - - - - - - Chef Anton's Gumbo - 21.35 - 0 - Condiments - - - Alice Mutton - 39 - 0 - Meat/Poultry - - - Singaporean Hokkien Fried Mee - 123.79 - 1 - Meat/Poultry - - - Gorgonzola Telino - 12.5 - 0 - Meat/Poultry - - - Perth Pasties - 32.8 - 0 - Meat/Poultry - - -
-
- -
+ + + + + + + + + + + + Chef Anton's Gumbo + 21.35 + 0 + Condiments + + + Alice Mutton + 39 + 0 + Meat/Poultry + + + Singaporean Hokkien Fried Mee + 123.79 + 1 + Meat/Poultry + + + Gorgonzola Telino + 12.5 + 0 + Meat/Poultry + + + Perth Pasties + 32.8 + 0 + Meat/Poultry + + + + + +
diff --git a/packages/html/src/grid/tests/grid-column-resizing-actions.tsx b/packages/html/src/grid/tests/grid-column-resizing-actions.tsx index 55aa7feabd4..0b77a88dd8e 100644 --- a/packages/html/src/grid/tests/grid-column-resizing-actions.tsx +++ b/packages/html/src/grid/tests/grid-column-resizing-actions.tsx @@ -1,14 +1,13 @@ import { Chip, ChipAction, ChipList } from '../../chip'; import { Icon } from '../../icon'; -import { Pager } from '../../pager'; -import { Table, TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table'; -import { Toolbar } from '../../toolbar'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; import { Popup } from '../../popup'; import { WindowNormal } from '../../window'; import { Button } from '../../button'; import { FormNormal, FormField } from '../../form'; import { Checkbox } from '../../checkbox'; import { Textbox } from '../../textbox'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar, GridPager } from '../../grid'; const styles = ` .k-animation-container, @@ -33,8 +32,8 @@ export default () =>(
-
- + @@ -49,10 +48,13 @@ export default () =>( } /> - -
+ + )} pager={( + + )}> +
- + @@ -60,98 +62,59 @@ export default () =>( - - - - Product Id - - - - - - - - - - - Unit Price - - - - - - - - - - - Discontinued - - - - - - - - - - - Category - - - - - - - + + + + -
+
-
-
- - - - - - - - - Chef Anton's Gumbo - 21.35 - 0 - Condiments - - - Alice Mutton - 39 - 0 - Meat/Poultry - - - Singaporean Hokkien Fried Mee - 123.79 - 1 - Meat/Poultry - - - Gorgonzola Telino - 12.5 - 0 - Meat/Poultry - - - Perth Pasties - 32.8 - 0 - Meat/Poultry - - -
-
- -
+ + + + + + + + + + + + Chef Anton's Gumbo + 21.35 + 0 + Condiments + + + Alice Mutton + 39 + 0 + Meat/Poultry + + + Singaporean Hokkien Fried Mee + 123.79 + 1 + Meat/Poultry + + + Gorgonzola Telino + 12.5 + 0 + Meat/Poultry + + + Perth Pasties + 32.8 + 0 + Meat/Poultry + + + + + +
diff --git a/packages/html/src/grid/tests/grid-editing-custom-editor.tsx b/packages/html/src/grid/tests/grid-editing-custom-editor.tsx index 4b08d2aa35c..353b6096355 100644 --- a/packages/html/src/grid/tests/grid-editing-custom-editor.tsx +++ b/packages/html/src/grid/tests/grid-editing-custom-editor.tsx @@ -8,227 +8,194 @@ import { MultiSelect } from '../../multiselect'; import { NumericTextbox } from '../../numerictextbox'; import { Switch } from '../../switch'; import { TimePicker } from '../../timepicker'; +import { Grid, GridHeader, GridHeaderCell, GridHeaderTable, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + +
+
- - - - - - - - - -
- - - Autocomplete - - - - - - Combobox - - - - - - Dropdown - - - - - - Multiselect - - -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - -
LTR
RTL
-
+ + + LTR + + + + + + + + + + + + + + + RTL + + + + + + + + + + + + + + +
-
-
-
+ + + -
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + +
+
- - - - - - - - - -
- - - Datepicker - - - - - - Timepicker - - - - - - Datetime - - - - - - Dateinput - - -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - -
LTR
RTL
-
+ + + LTR + + + + + + + + + + + + + + + RTL + + + + + + + + + + + + + + +
-
-
-
+ + + -
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + +
+
- - - - - - - - -
- - - Numeric - - - - - - Switch - - -
+ + + LTR + + + + + + + + + + RTL + + + + + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - -
LTR - - - -
RTL - - - -
-
-
-
-
-
- + + +
); diff --git a/packages/html/src/grid/tests/grid-editing-inline-angular.tsx b/packages/html/src/grid/tests/grid-editing-inline-angular.tsx index 4de4fd47c32..430c376d7cb 100644 --- a/packages/html/src/grid/tests/grid-editing-inline-angular.tsx +++ b/packages/html/src/grid/tests/grid-editing-inline-angular.tsx @@ -1,168 +1,160 @@ import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; import { Textbox } from '../../textbox'; -import { Toolbar } from '../../toolbar'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>

Edit Row

-
- + - -
-
-
- + + )}> + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
- - - - - - - -
- - - Name - - - - - - Command - - -
+ + + + + + + + + + + + + + + + + + + Product2 + + + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - -
- - - - -
Product2 - - -
-
-
-
-
+
+
-
-
-
+ + +

New Row

-
- + - -
-
-
- + + )}> + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
- - - - - - - -
- - - Name - - - - - - Command - - -
+ + + + + + + + + + + + + + + + + Product1 + + + + + + + + + + + + Product2 + + + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
Product1 - - -
Product2 - - -
-
-
-
-
+
+
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-editing-inline-blazor.tsx b/packages/html/src/grid/tests/grid-editing-inline-blazor.tsx index a05f1ac1f9c..3c97d29b0f1 100644 --- a/packages/html/src/grid/tests/grid-editing-inline-blazor.tsx +++ b/packages/html/src/grid/tests/grid-editing-inline-blazor.tsx @@ -1,208 +1,187 @@ import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; import { Textbox } from '../../textbox'; -import { Toolbar } from '../../toolbar'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable , GridToolbar } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>

Edit Row

-
- + - -
+ + )}> +
- + - - - - - - - -
+ + + - - - - Name - - - - - - Command - - -
+ + + + + +
-
-
-
+ + +
- + - - - - - - - - - - - - -
+ + + - + - + + - + + -
+ + + + - + - + + Product2 - + + -
+ + + +
-
-
-
+ + +

New Row

-
- + - -
+ + )}> +
- + - - - - - - - -
+ + + - - - - Name - - - - - - Command - - -
+ + + + + +
-
-
-
+ + +
- + - - - - - - - - - - - - - - - - - -
+ + + - + - + + - + + -
+ + + + - + - + + Product1 - + + -
+ + + + - + - + + Product2 - + + -
+ + + +
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-editing.tsx b/packages/html/src/grid/tests/grid-editing.tsx index 99b16fd423c..22a9648b95c 100644 --- a/packages/html/src/grid/tests/grid-editing.tsx +++ b/packages/html/src/grid/tests/grid-editing.tsx @@ -2,190 +2,160 @@ import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; import { NumericTextbox } from '../../numerictextbox'; import { Textbox } from '../../textbox'; -import { Toolbar } from '../../toolbar'; import { TooltipNormal } from '../../tooltip'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
- + - -
-
-
- + + )}> + +
+ +
+ + + + + + + + + + + + + + + +
+
- - - - - - - - -
- - - Name - - - - - - Price - - - - - - Available - - -
+ + + + + + + + + + + + + + + + Chai + 18 + false + + + + + + Chang + 19 + false + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - -
Chai18false - -
Chang19false - -
-
-
-
-
-
+ + + -
- + - -
+ + )}> +
- + - - - - - - - - -
- - - Name - - - - - - Price - - - - - - Available - - -  
+ + + + + +   + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
- - LongSingleWordTestLongSingleWordTestLongSingleWordTestLongSingleWordTest - 18false - - -
Chang19false - - -
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + LongSingleWordTestLongSingleWordTestLongSingleWordTestLongSingleWordTest + + 18 + false + + + + + + + Chang + 19 + false + + + + + + + + + +
); diff --git a/packages/html/src/grid/tests/grid-filter-menu-angular.tsx b/packages/html/src/grid/tests/grid-filter-menu-angular.tsx index 6f6266191a6..f120e08f00b 100644 --- a/packages/html/src/grid/tests/grid-filter-menu-angular.tsx +++ b/packages/html/src/grid/tests/grid-filter-menu-angular.tsx @@ -1,204 +1,201 @@ import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; -import { Icon } from '../../icon'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
- - - - - - - -
- - - Name - -
- - 		- - - Command - - -
+ + + + + + + Product1 + + + + + + + + + + + Product2 + + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - -
Product1
Product2
-
-
-
-
+
+
-
-
-
+ + + +

Sortable

-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
- + - - - - - - - -
- - - Name - - -
- - 		- - - Command - - -
+ + + + + + + Product1 + + + + + + + + + + + Product2 + + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - -
Product1
Product2
-
-
-
-
+
+
-
-
-
+ + + +

Sortable & Resizable

-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
- + - - - - - - - -
- - - Name - - -
- - 		- - - Command - - -
+ + + + + + + Product1 + + + + + + + + + + + Product2 + + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - -
Product1
Product2
-
-
-
-
+
+
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-filter-menu-blazor.tsx b/packages/html/src/grid/tests/grid-filter-menu-blazor.tsx index 0f9a4c67194..afb83c53675 100644 --- a/packages/html/src/grid/tests/grid-filter-menu-blazor.tsx +++ b/packages/html/src/grid/tests/grid-filter-menu-blazor.tsx @@ -1,276 +1,219 @@ import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; -import { Icon } from '../../icon'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
-
+ +
- + - - - - - - - -
+ + + - - - - Name - - - - - - - Command - - -
+ + + + + +
-
-
-
+ + +
- + - - - - - - - - - - - - -
+ + + - - Product1 - + + Product1 + -
+ + + + - - Product2 - + + Product2 + -
+ + + +
-
-
-
+ + + +

Sortable

-
-
+ +
- + - - - - - - - -
+ + + - - - - - Name - - - - -
- -
- 		- Command -
+ + + + + +
-
-
-
+ + +
- + - + - - - - - - - - - - - - -
+ + + - - Product1 - + + Product1 + -
+ + + + - - Product2 - + + Product2 + -
+ + + +
-
-
-
+ + + +

Sortable & Resizable

-
-
+ +
- + - - - - - - - -
+ + + - - - - - - Name - - - -
- -
- - 		- - - Command - - - -
+ + + + + +
-
-
-
+ + +
- + - + - - - - - - - - - - - - -
+ + + - - Product1 - + + Product1 + -
+ + + + - - Product2 - + + Product2 + -
+ + + +
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-filter-row-angular.tsx b/packages/html/src/grid/tests/grid-filter-row-angular.tsx index d27e514a999..3706a8cb8fc 100644 --- a/packages/html/src/grid/tests/grid-filter-row-angular.tsx +++ b/packages/html/src/grid/tests/grid-filter-row-angular.tsx @@ -3,213 +3,202 @@ import { Checkbox } from '../../checkbox'; import { DropdownList } from '../../dropdownlist'; import { NumericTextbox } from '../../numerictextbox'; import { Textbox } from '../../textbox'; -import { Toolbar } from '../../toolbar'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>

Base

-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + + +
+
+ +
+ + {' '} + +
+
+
+ + +
+
+ +
+ + {' '} + +
+
+
+ + + + + + + + + +
+
- - - - - - - - - - + + + + + + + + + + + + + + + + + +
+
+ +
+ + {' '} +
- -
- - - -
- - - ID - - - - - - Name - - - - - - Command - - -
-
-
- -
- - {' '} - -
+ + + + + + 1 + Product1 + + + + + + + + + 2 + Product2 + + + + + + +
+
+
+
+ + + + +

With Toolbar

+ + + + )}> + +
+ +
-
-
- -
- - {' '} - -
+
+ + +
+
+ +
+ + {' '} +
-
-
+
+ + + + +
-
-
-
- - - - - - - - - - - - - - - - - - - - - -
1Product1
2Product2
-
-
-
-
-
-
-
-
-

With Toolbar

-
- - - -
-
-
- + + + +
+
- - - - - - - - - - - - - - -
- - - ID - - - Name - - - Command - - -
-
-
- -
- - {' '} - -
-
-
- 		-
-
- -
- - {' '} - -
-
-
-
+ + + + + + 1 + Product1 + + + + + + + + + 2 + Product2 + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - -
1Product1
2Product2
-
-
-
-
+
+
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-filter-row-blazor.tsx b/packages/html/src/grid/tests/grid-filter-row-blazor.tsx index 02b2c6d6ffe..53a32f42a60 100644 --- a/packages/html/src/grid/tests/grid-filter-row-blazor.tsx +++ b/packages/html/src/grid/tests/grid-filter-row-blazor.tsx @@ -3,58 +3,40 @@ import { Checkbox } from '../../checkbox'; import { DropdownList } from '../../dropdownlist'; import { NumericTextbox } from '../../numerictextbox'; import { Textbox } from '../../textbox'; -import { Toolbar } from '../../toolbar'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table'; export default () =>( <>

Base

-
-
+ +
- + - - - - - - - - - - - - - - -
+ + + - - - - Id - - - - - - Name - - - - - - Command - - -
+ + + + + + +
-
-
+
- 		+ +
@@ -65,8 +47,8 @@ export default () =>(
- 		+ +
@@ -77,125 +59,107 @@ export default () =>(
- 		+ +
-
-
+
-
+ + + +
-
-
-
+ + +
- + - - - - - - - - - - - - - - -
+ + + - + + 1 - + + Product1 - + + -
+ + + + - + + 2 - + + Product2 - + + -
+ + + +
-
-
-
+ + + +

With Toolbar

-
- + - -
+ + )}> +
- + - - - - - - - - - - - - - - -
+ + + - - - - Id - - - - - - Name - - - - - - Command - - -
+ + + + + + +
-
-
+
- 		+ +
@@ -206,8 +170,8 @@ export default () =>(
- 		+ +
@@ -218,76 +182,75 @@ export default () =>(
- 		+ +
-
-
+
-
+ + + +
-
-
-
+ + +
- + - - - - - - - - - - - - - - -
+ + + - + + 1 - + + Product1 - + + -
+ + + + - + + 2 - + + Product2 - + + -
+ + + +
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-filter-row.tsx b/packages/html/src/grid/tests/grid-filter-row.tsx index 7428c674ef0..9f64283bdb0 100644 --- a/packages/html/src/grid/tests/grid-filter-row.tsx +++ b/packages/html/src/grid/tests/grid-filter-row.tsx @@ -8,23 +8,24 @@ import { DropdownList } from '../../dropdownlist'; import { NumericTextbox } from '../../numerictextbox'; import { Textbox } from '../../textbox'; import { TimePicker } from '../../timepicker'; - +import { Grid, GridHeader, GridHeaderTable } from '../../grid'; +import { TableThead, TableRow, TableTh } from '../../table'; export default () =>( <>
-
-
+ +
- + - - - - - -
+ + + @@ -32,28 +33,28 @@ export default () =>( -
+ + + +
-
-
+ +
-
-
+ +
- + - - - - - -
+ + + @@ -61,26 +62,26 @@ export default () =>( -
+ + + +
-
-
+ +
-
-
+ +
- + - - - - - -
+ + + @@ -88,26 +89,26 @@ export default () =>( -
+ + + +
-
-
+ +
-
-
+ +
- + - - - - - -
+ + + @@ -115,26 +116,26 @@ export default () =>( -
+ + + +
-
-
+ +
-
-
+ +
- + - - - - - -
+ + + @@ -142,26 +143,26 @@ export default () =>( -
+ + + +
-
-
+ +
-
-
+ +
- + - - - - - -
+ + + @@ -169,28 +170,28 @@ export default () =>( -
+ + + +
-
-
+ +
-
-
+ +
- + - - - - - -
+ + + @@ -198,26 +199,26 @@ export default () =>( -
+ + + +
-
-
+ +
-
-
+ +
- + - - - - - -
+ + + @@ -225,26 +226,26 @@ export default () =>( -
+ + + +
-
-
+ +
-
-
+ +
- + - - - - - -
+ + + @@ -252,13 +253,13 @@ export default () =>( -
+ + + +
-
-
+ +
diff --git a/packages/html/src/grid/tests/grid-grouping-actions.tsx b/packages/html/src/grid/tests/grid-grouping-actions.tsx index 17f268e9c9d..edf8d58ab51 100644 --- a/packages/html/src/grid/tests/grid-grouping-actions.tsx +++ b/packages/html/src/grid/tests/grid-grouping-actions.tsx @@ -1,10 +1,8 @@ import { Chip, ChipAction, ChipList } from '../../chip'; import { Icon } from '../../icon'; -import { Pager } from '../../pager'; -import { Table, TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table'; -import { Toolbar } from '../../toolbar'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; import { Popup } from '../../popup'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar, GridPager } from '../../grid'; const styles = ` .k-animation-container, @@ -21,8 +19,8 @@ export default () => (
-
- + @@ -37,10 +35,13 @@ export default () => ( } /> - -
+ + )} pager={( + + )}> +
- + @@ -48,98 +49,59 @@ export default () => ( - - - - Product Id - - - - - - - - - - - Unit Price - - - - - - - - - - - Discontinued - - - - - - - - - - - Category - - - - - - - + + + + -
+
-
-
- - - - - - - - - Chef Anton's Gumbo - 21.35 - 0 - Condiments - - - Alice Mutton - 39 - 0 - Meat/Poultry - - - Singaporean Hokkien Fried Mee - 123.79 - 1 - Meat/Poultry - - - Gorgonzola Telino - 12.5 - 0 - Meat/Poultry - - - Perth Pasties - 32.8 - 0 - Meat/Poultry - - -
-
- -
+ + + + + + + + + + + + Chef Anton's Gumbo + 21.35 + 0 + Condiments + + + Alice Mutton + 39 + 0 + Meat/Poultry + + + Singaporean Hokkien Fried Mee + 123.79 + 1 + Meat/Poultry + + + Gorgonzola Telino + 12.5 + 0 + Meat/Poultry + + + Perth Pasties + 32.8 + 0 + Meat/Poultry + + + + + +
diff --git a/packages/html/src/grid/tests/grid-grouping-blazor.tsx b/packages/html/src/grid/tests/grid-grouping-blazor.tsx index 0e09d61bac1..d39d5dd60e4 100644 --- a/packages/html/src/grid/tests/grid-grouping-blazor.tsx +++ b/packages/html/src/grid/tests/grid-grouping-blazor.tsx @@ -2,127 +2,100 @@ import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; import { Icon } from '../../icon'; import { Chip, ChipList, ChipAction } from '../../chip'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridGroupingHeader, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>

Base

-
-
-
- Drag a column header and drop it here to group by that column -
-
-
+ + )}> +
- + - - - - - - - - -
+ + + - - - - Id - - - - - - Name - - - - - - Command - - -
+ + + + + + +
-
-
-
+ + +
- + - - - - - - - - - - - - - - -
+ + + - - 1 - - Product1 - + + 1 + Product1 + -
+ + + + - - 2 - - Product2 - + + 2 + Product2 + -
+ + + +
-
-
-
+ + +

Single Group

-
-
+ }>Id -
-
-
+ + )}> +
- + @@ -130,43 +103,25 @@ export default () =>( - - - - - - - - - -
+ + + + - - - - Id - - - - - - Name - - - - - - Command - - -
+ + + + + + +
-
-
-
+ + +
- + @@ -174,83 +129,75 @@ export default () =>( - - - - - - - - - - - - - - - - - - - - - - -
+ + +

Id: 1

-
+ + + + + - - 1 - - Product1 - + + 1 + Product1 + -
+ + + +

Id: 2

-
+ + + + + - - 2 - - Product2 - + + 2 + Product2 + -
+ + + +
-
-
-
+ + +

Two Groups

-
-
+ }>Id }>Name -
-
-
+ + )}> +
- + @@ -259,44 +206,26 @@ export default () =>( - - - - - - - - - - -
+ + + + + - - - - Id - - - - - - Name - - - - - - Command - - -
+ + + + + + +
-
-
-
+ + +
- + @@ -305,91 +234,83 @@ export default () =>( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + +

Id: 1

-
+ + + + +

Name: Product1

-
+ + + + + + - - 1 - - Product1 - + + 1 + Product1 + -
+ + + +

Id: 2

-
+ + + + +

Name: Product2

-
+ + + + + + - - 2 - - Product2 - + + 2 + Product2 + -
+ + + +
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-grouping-detail-template.tsx b/packages/html/src/grid/tests/grid-grouping-detail-template.tsx index 39716b34d4a..724112e1a0a 100644 --- a/packages/html/src/grid/tests/grid-grouping-detail-template.tsx +++ b/packages/html/src/grid/tests/grid-grouping-detail-template.tsx @@ -2,22 +2,46 @@ import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; import { Icon } from '../../icon'; import { Chip, ChipList, ChipAction } from '../../chip'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridGroupingHeader } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
Base -
-
-
- Drag a column header and drop it here to group by that column + + )}> + +
+ + + + + + + + + + + + + + + + + + + +
-
-
-
-
- + + + +
+
@@ -25,84 +49,81 @@ export default () =>( - - - - - - - - - -
- - - ID - - - - - - Name - - - - - - Command - - -
+ + + + + + + + + 1 + Product1 + + + + + + + + + + + + 2 + Product2 + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - -
1Product1
2Product2
-
-
-
-
+
+
-
-
-
+ + + + Single Group -
-
+ }>ID -
-
-
-
-
- + + )}> + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -111,99 +132,102 @@ export default () =>( - - - - - - - - - - -
- - - ID - - - - - - Name - - - - - - Command - - -
+ + + +

+ + ID: 1 +

+ + + + + + + + + + + 1 + Product1 + + + + + + +

+ + ID: 2 +

+ + + + + + + + + + + 2 + Product2 + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

ID: 1

-
1Product1
-

ID: 2

-
2Product2
-
-
-
-
+
+
-
-
-
+ + + + Two Groups -
-
+ }>ID }>Name -
-
-
-
-
- + + )}> + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -213,115 +237,121 @@ export default () =>( - - - - - - - - - - - -
- - - ID - - - - - - Name - - - - - - Command - - -
+ + + +

+ + ID: 1 +

+ + + + + +

+ + Name: Product1 +

+ + + + + + + + + + + + 1 + Product1 + + + + + + +

+ + ID: 2 +

+ + + + + +

+ + Name: Product2 +

+ + + + + + + + + + + + 2 + Product2 + + + + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

ID: 1

-
-

Name: Product1

-
1Product1
-

ID: 2

-
-

Name: Product2

-
2Product2
-
-
-
-
+
+
-
-
-
+ + + Expanded Template -
-
+ }>ID }>Name -
-
-
-
-
- + + )}> + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -331,114 +361,92 @@ export default () =>( - - - - - - - - - - - -
- - - ID - - - - - - Name - - - - - - Command - - -
+ + + +

+ + ID: 1 +

+ + + + + +

+ + Name: Product1 +

+ + + + + + + + + + + + 1 + Product1 + + + + + + + + + Template Text + + + +

+ + ID: 2 +

+ + + + + +

+ + Name: Product2 +

+ + + + + + + + + + + + 2 + Product2 + + + + + + + + + Template Text + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

ID: 1

-
-

Name: Product1

-
1Product1
Template Text
-

ID: 2

-
-

Name: Product2

-
2Product2
Template Text
-
-
-
-
+
+
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-grouping.tsx b/packages/html/src/grid/tests/grid-grouping.tsx index 56d4dadd81d..d3d5a8f9be3 100644 --- a/packages/html/src/grid/tests/grid-grouping.tsx +++ b/packages/html/src/grid/tests/grid-grouping.tsx @@ -1,9 +1,9 @@ import { Button } from '../../button'; import { ButtonGroup } from '../../button-group'; import { Icon } from '../../icon'; -import { Toolbar } from '../../toolbar'; import { Chip, ChipList, ChipAction } from '../../chip'; - +import { Grid, GridHeader, GridHeaderCell, GridHeaderTable, GridGroupingHeader, GridContainer, GridContent, GridTable, GridToolbar } from '../../grid'; +import { TableThead, TableRow, TableTd, TableTbody } from '../../table'; const styles = ` .k-grouping-header .k-grouping-dropclue { @@ -22,352 +22,254 @@ export default () =>( angular no grouping jquery no grouping -
- + - -
-
-
- Drag a column header and drop it here to group by that column + + )} + groupingHeader={( + + )}> + +
+ + + + + + + + + + + + +
-
-
-
-
- + + + +
+
- - - - - - - - -
- - - Name - - - - - - Price - - - - - - Available - - - - - - Units - - -
-
-
-
-
-
- - - - - - - - - - - - -
Chai30false15
-
+ + + Chai + 30 + false + 15 + + +
-
-
-
+ + + -
- + - + - - -
-
-
- Drag a column header and drop it here to group by that column -
-
-
+ + + )} + groupingHeader={( + + )}> +
- + - - - - - - - - -
- - - Name - - - - - - Price - - - - - - Available - - - - - - Units - - -
+ + + + + + + + +
-
-
- - - - - - - - - - - - -
Chai30false15
-
-
+ + + + + + + + + + Chai + 30 + false + 15 + + + + + + angular with grouping jquery with grouping -
- + - -
-
+ + )} + groupingHeader={( + }>Price }>Name -
-
-
-
-
- + + )}> + +
+ +
+ + + + + + + + + + + + + + + + +
+
- - - - - - - - - -
- - - Name - - - - - - Price - - - - - - Discontinued - - - - - - Units - - -
+ + + +

+ + Price: 19 +

+ + + + +

+ + Price: 30 +

+ + + + + Chai + 30 + false + 15 + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - -
-

- - Price: 19 -

-
-

- - Price: 30 -

-
Chai30false15
-
-
-
-
-
+ + + -
- + - -
-
+ + )} + groupingHeader={( + }>Price }>Name -
-
-
+ + )}> +
- + - - - - - - - - - -
- - - Name - - - - - - Price - - - - - - Available - - - - - - Units - - -
+ + + + + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - -
-

- - Price: 19 -

-
-

- - Price: 30 -

-
 Chai30false15
-
-
+ + + + + + + + + + +

+ + Price: 19 +

+ + + + +

+ + Price: 30 +

+ + + + + Chai + 30 + false + 15 + + + + + + angular grid drag clue jquery grid drag clue diff --git a/packages/html/src/grid/tests/grid-hierarchy.tsx b/packages/html/src/grid/tests/grid-hierarchy.tsx index 0d5b89cc920..fe28a361e07 100644 --- a/packages/html/src/grid/tests/grid-hierarchy.tsx +++ b/packages/html/src/grid/tests/grid-hierarchy.tsx @@ -1,108 +1,97 @@ import { Icon } from '../../icon'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
-
+ + +
- + - - - - - - -
- - - - Title - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - - - - -
- - 1
- - 2
- {/* hierarchy child content */} -
-
-
- - - - - - - - - - -
- - - Title - - - - - - Title - - -
-
-
-
- - - - - - - - - - - - - - -
TextText
TextText
-
-
-
-
-
+ + + + + + + + + + + + + 1 + + + + + + 2 + + + + + {/* hierarchy child content */} + + +
+ + + + + + + + + + + +
+ + + + + + + + + + + Text + Text + + + Text + Text + + + + + + + + + + + + + +
diff --git a/packages/html/src/grid/tests/grid-locked-columns-rtl.tsx b/packages/html/src/grid/tests/grid-locked-columns-rtl.tsx index 9b5ffd73952..123097c732f 100644 --- a/packages/html/src/grid/tests/grid-locked-columns-rtl.tsx +++ b/packages/html/src/grid/tests/grid-locked-columns-rtl.tsx @@ -1,6 +1,7 @@ import { Checkbox } from '../../checkbox'; import { Icon } from '../../icon'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridFooter, GridFooterTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd, TableTfoot } from '../../table'; const styles = ` /* These overrides are needed for the "Angular Grid with locked columns, Grouping and Multiline headers" example -> @@ -18,336 +19,247 @@ export default () =>(
Angular Grid with locked columns, Grouping and Multiline headers -
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+
+
- + - - - - - - - - - - -
Product IDProduct Name
-
-
- - - - - - - - - - - - - - - - - - -
- - - Availability - - - - - - Discontinued - - -
- - - Unit Price - - - - - - Units On Order - - - - - - Units In Stock - - -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- + + + +

+ Discontinued: false -

-
Chai
2Chang
3 - Aniseed Syrup -
- 4 - - Chef Anton's Cajun Seasoning -
- 6 - - Grandma's Boysenberry Spread -
-

- +

+ + + + + + Chai + + + + 2 + Chang + + + + 3 + + Aniseed Syrup + + + + + + 4 + + + Chef Anton's Cajun Seasoning + + + + + 6 + Grandma's Boysenberry Spread + + + + + + + + +

+ Discontinued: true -

-
- 5 - - Chef Anton's Gumbo Mix -
-
-
-
-
-
+

+ + + + + + 5 + + + Chef Anton's Gumbo Mix + + + + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

-
- 18 - - 0 - - 39 - - -
- 19 - - 40 - - 17 - - -
- 10 - - 70 - - 13 - - -
- 22 - - 0 - - 53 - - -
- 25 - - 0 - - 120 - - -
- Sum: 94 -
-

-
21.35 - 0 - - 0 - - -
- Sum: 24 -
-
+
-
-
-
-
-
- - - - - - - - - - - - - -
-
-
- + +
+
- - - - - - - - -
Total Unit Price: 115.35
+ + + +

+ + + + 18 + 0 + 39 + + + + 19 + 40 + 17 + + + + 10 + 70 + 13 + + + + 22 + 0 + 53 + + + + 25 + 0 + 120 + + + + Sum: 94 + + + + + + +

+ + + + 21.35 + 0 + 0 + + + + + + Sum: 24 + + + + + +
+
+
+ + + +
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + Total Unit Price: 115.35 + + + + + +
-
-
+ +
); diff --git a/packages/html/src/grid/tests/grid-locked-columns.tsx b/packages/html/src/grid/tests/grid-locked-columns.tsx index 410acfb96dd..cdf130f9cb1 100644 --- a/packages/html/src/grid/tests/grid-locked-columns.tsx +++ b/packages/html/src/grid/tests/grid-locked-columns.tsx @@ -1,5 +1,7 @@ import { Checkbox } from '../../checkbox'; import { Icon } from '../../icon'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridFooter, GridFooterTable } from '../../grid'; +import { TableThead, TableTbody, TableTfoot, TableRow, TableTd } from '../../table'; const styles = ` @@ -17,632 +19,472 @@ export default () =>( <>
-
-
+ +
- + - - - - - - -
- - - Order ID - - - - - - - Ship Name - - - -
+ + + + + + +
- + - - - - - - - -
- - - Ship Country - - - - - - - Ship City - - - - - - - Ship Address - - - -
+ + + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
10248Vins et alcools Chevalier
10249Toms Spezialitäten
10250Hanari Carnes
10251Victuailles en stock (Hovered)
10252Suprêmes délices (Selected)
10253Hanari (Selected and Hovered)
10254Chop-suey Chinese
10255Richter Supermarkt
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FranceReims59 rue de l'Abbaye
GermanyMünsterLuisenstr. 48
BrazilRio de JaneiroRua do Paço, 67
FranceLyon2, rue du Commerce
BelgiumCharleroiBoulevard Tirou, 255
BrazilRio de JaneiroRua do Paço, 67
SwitzerlandBernHauptstr. 31
SwitzerlandGenèveStarenweg 5
-
-
+ + +
+ + + + + + + + 10248 + Vins et alcools Chevalier + + + 10249 + Toms Spezialitäten + + + 10250 + Hanari Carnes + + + 10251 + Victuailles en stock (Hovered) + + + 10252 + Suprêmes délices (Selected) + + + 10253 + Hanari (Selected and Hovered) + + + 10254 + Chop-suey Chinese + + + 10255 + Richter Supermarkt + + + +
+ + + + + + + + + + France + Reims + 59 rue de l'Abbaye + + + Germany + Münster + Luisenstr. 48 + + + Brazil + Rio de Janeiro + Rua do Paço, 67 + + + France + Lyon + 2, rue du Commerce + + + Belgium + Charleroi + Boulevard Tirou, 255 + + + Brazil + Rio de Janeiro + Rua do Paço, 67 + + + Switzerland + Bern + Hauptstr. 31 + + + Switzerland + Genève + Starenweg 5 + + + + + +
jQuery Grid - Frozen columns and sorting -
-
+ +
- + - - - - - - -
- - - Order ID - - - - - - Ship Name - - 1 - - -
+ + + + + + +
- + - - - - - - -
- - - Ship Country - - 2 - - - - - - Ship City - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
10374Wolski Zajazd
10611Wolski Zajazd
10792Wolski Zajazd
10792Wolski Zajazd
-
- - - - - - - - - - - - - - - - - - - - - - - -
PolandWarszawa
PolandWarszawa
PolandWarszawa
PolandWarszawa
-
-
- + + +
+ + + + + + + + 10374 + Wolski Zajazd + + + 10611 + Wolski Zajazd + + + 10792 + Wolski Zajazd + + + 10792 + Wolski Zajazd + + + +
+ + + + + + + + + Poland + Warszawa + + + Poland + Warszawa + + + Poland + Warszawa + + + Poland + Warszawa + + + + + +
Angular Grid with locked columns, Grouping and Multiline headers -
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+
+
- + - - - - - - - - - - -
- - - Product ID - - - - - - Product Name - - -
-
-
- - - - - - - - - - - - - - - - - - -
- - - Availability - - - - - - Discontinued - - -
- - - Unit Price - - - - - - Units On Order - - - - - - Units In Stock - - -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- + + + +

+ Discontinued: false -

-
Chai
2Chang
3 - Aniseed Syrup -
- 4 - - Chef Anton's Cajun Seasoning -
- 6 - - Grandma's Boysenberry Spread -
-

- +

+ + + + + + Chai + + + + 2 + Chang + + + + 3 + + Aniseed Syrup + + + + + + 4 + + + Chef Anton's Cajun Seasoning + + + + + 6 + Grandma's Boysenberry Spread + + + + + + + + +

+ Discontinued: true -

-
- 5 - - Chef Anton's Gumbo Mix -
-
-
-
-
-
+

+ + + + + + 5 + + + Chef Anton's Gumbo Mix + + + + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

-
- 18 - - 0 - - 39 - - -
- 19 - - 40 - - 17 - - -
- 10 - - 70 - - 13 - - -
- 22 - - 0 - - 53 - - -
- 25 - - 0 - - 120 - - -
- Sum: 94 -
-

-
21.35 - 0 - - 0 - - -
- Sum: 24 -
-
+
-
-
-
-
-
- - - - - - - - - - - - - -
-
-
- + +
+
- - - - - - - - -
Total Unit Price: 115.35
+ + + +

+ + + + 18 + 0 + 39 + + + + 19 + 40 + 17 + + + + 10 + 70 + 13 + + + + 22 + 0 + 53 + + + + 25 + 0 + 120 + + + + Sum: 94 + + + + + + +

+ + + + 21.35 + 0 + 0 + + + + + + Sum: 24 + + + + + +
+
+
+ + + +
+ + + + + + + + + + + + + +
-
-
+
+ + + + + + + + + + Total Unit Price: 115.35 + + + + + + +
+ +
diff --git a/packages/html/src/grid/tests/grid-long-titles.tsx b/packages/html/src/grid/tests/grid-long-titles.tsx index 9385347564d..85f4ebac017 100644 --- a/packages/html/src/grid/tests/grid-long-titles.tsx +++ b/packages/html/src/grid/tests/grid-long-titles.tsx @@ -1,4 +1,5 @@ -import { Icon } from '../../icon'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, } from '../../grid'; +import { TableRow, TableThead } from '../../table'; const styles = ` @@ -17,58 +18,41 @@ export default () =>(
-
-
+ +
- + - - - - - -
- - - Active Column Menu       Lorem ipsum dolor sit amet consectetur adipiscing elit - - - -
+ + + + + +
-
-
- + +
- -
-
+ +
- + - - - - - -
- - - Lorem ipsum dolor sit amet consectetur adipiscing elit       RTL Column Menu - - - -
+ + + + + +
-
-
- + +
@@ -76,59 +60,41 @@ export default () =>(
- -
-
+ +
- + - - - - - -
- - - Active Filterable       Lorem ipsum dolor sit amet consectetur adipiscing elit - - - -
+ + + + + +
-
-
- + +
- -
-
+ +
- + - - - - - -
- - - Lorem ipsum dolor sit amet consectetur adipiscing elit       RTL Filterable - - - -
+ + + + + +
-
-
- + +
@@ -136,59 +102,41 @@ export default () =>(
- -
-
+ +
- + - - - - - -
- - - Sortable Column Menu       Lorem ipsum dolor sit amet consectetur adipiscing elit - - - -
+ + + + + +
-
-
- + +
- -
-
+ +
- + - - - - - -
- - - Lorem ipsum dolor sit amet consectetur adipiscing elit       RTL Sortable Column Menu - - - -
+ + + + + +
-
-
- + +
@@ -196,59 +144,41 @@ export default () =>(
- -
-
+ +
- + - - - - - -
- - - Sortable Filterable       Lorem ipsum dolor sit amet consectetur adipiscing elit - - - -
+ + + + + +
-
-
- + +
- -
-
+ +
- + - - - - - -
- - - Lorem ipsum dolor sit amet consectetur adipiscing elit       RTL Sortable Filterable - - - -
+ + + + + +
-
-
- + +
@@ -256,62 +186,44 @@ export default () =>( {/* Angular Specific */}
-
-
- {/* add padding-left or -right for scrollbar width */} -
-
- - - - - - - - - -
- - - Angular Filterable       Lorem ipsum dolor sit amet consectetur adipiscing elit - -
- -
-
+ + {/* add padding-left or -right for scrollbar width */} + +
+ + + + + + + + + +
-
-
+ +
{/* Angular Specific */}
-
-
-
- {/* add padding-left or -right for scrollbar width */} -
- - - - - - - - - -
- - - Lorem ipsum dolor sit amet consectetur adipiscing elit       RTL Angular Filterable - - - -
-
+ + {/* add padding-left or -right for scrollbar width */} + +
+ + + + + + + + + +
-
-
+ +
diff --git a/packages/html/src/grid/tests/grid-multicolumn-headers.tsx b/packages/html/src/grid/tests/grid-multicolumn-headers.tsx index d149b9c3ab8..67ed6112898 100644 --- a/packages/html/src/grid/tests/grid-multicolumn-headers.tsx +++ b/packages/html/src/grid/tests/grid-multicolumn-headers.tsx @@ -1,150 +1,110 @@ -import { Icon } from '../../icon'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
-
-
-
- + + +
+ +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + +
+
+
- - - - - - -
- Name -
+ + + + Chai + + + + + Chang + + + + + Aniseed Syrup + + + + +
+
+
-
- + + +
+
- - - - - - - - - -
- - - Availability - - -
- - - Units In Stock - - - - - - Unit Price - - - - - - Discontinued - - -
+ + + 39 + 18 + false + + + 17 + 19 + false + + + 13 + 10 + false + + +
-
-
-
-
- - - - - - - - - - - - - - - -
- Chai -
- Chang -
- Aniseed Syrup -
-
-
-
-
-
-
- - - - - - - - - - - - - - - -
- 39 - - 18 - - false -
- 17 - - 19 - - false -
- 13 - - 10 - - false -
-
-
-
-
+
+
-
-
-
- + + +
- -
-
+ +
- + @@ -153,84 +113,30 @@ export default () =>( - - - - - - - - - - - - - - - - -
- - - Company - - - - - - - Contact Info - - -
- - - First Name - - - - - - - Last Name - - - - - - - Location - - - - - - Phone - - - -
- - - Country - - - - - - - City - - - -
+ + + + + + + + + + + + + + + + +
-
-
- + + + @@ -239,10 +145,10 @@ export default () =>( - -
-
-
+ + + +
diff --git a/packages/html/src/grid/tests/grid-no-records.tsx b/packages/html/src/grid/tests/grid-no-records.tsx index 495f29e0877..5e76fdc7771 100644 --- a/packages/html/src/grid/tests/grid-no-records.tsx +++ b/packages/html/src/grid/tests/grid-no-records.tsx @@ -1,108 +1,86 @@ - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
-
+ +
- + - - - - - - - -
- - - OrderID - - - - - - Ship Name - - - - - - Freight - - -
-
-
-
- - - - - - - - -
-
-
No records available.
+ + + + + + + +
-
-
-
+ + + + + + + + + + + + +
+
No records available.
+
+
+ + +

Angular Grid

-
-
-
- - - - - - - - - - - - - - - -
CompanyNameContactNameCityContactTitle
+ + +
+ + + + + + + + + +
-
- -
-
+ + +
- + - + - - - - - -
No records available.
+ + + No records available. + + +
-
+
-
-
-
+ + +
); diff --git a/packages/html/src/grid/tests/grid-pager.tsx b/packages/html/src/grid/tests/grid-pager.tsx index 86449c5cafd..cea488fc42d 100644 --- a/packages/html/src/grid/tests/grid-pager.tsx +++ b/packages/html/src/grid/tests/grid-pager.tsx @@ -1,4 +1,5 @@ -import { Pager } from '../../pager'; +import { Grid, GridHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable, GridPager } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( @@ -9,119 +10,92 @@ export default () =>( Angular grid
-
-
+ )}> +
- + - - - - - - -
- - - 100px - - - - - - no width - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - -
1Row
2Alt row
-
- -
+ + + + + + + + + + + 1 + Row + + + 2 + Alt row + + + + + +
-
-
- {/* add padding-left or -right for scrollbar width */} -
-
- + )}> + {/* add padding-left or -right for scrollbar width */} + +
+ +
+ + + + + + + + + + + + + + +
+
- - - - - - -
- - - 100px - - - - - - no width - - -
+ + + 1 + Row + + + 2 + Alt row + + +
-
- -
-
-
- - - - - - - - - - - - - - - -
1Row
2Alt row
-
-
- {/* set height to scroll height (virtual scrolling) */} -
-
+
+ {/* set height to scroll height (virtual scrolling) */} +
-
-
- -
+ + +
@@ -129,119 +103,92 @@ export default () =>( Angular grid pager top
-
- -
+ }> +
- + - - - - - - -
- - - 100px - - - - - - no width - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - -
1Row
2Alt row
-
-
+ + + + + + + + + + + 1 + Row + + + 2 + Alt row + + + + + +
-
- -
- {/* add padding-left or -right for scrollbar width */} -
-
- + }> + {/* add padding-left or -right for scrollbar width */} + +
+ +
+ + + + + + + + + + + + + + +
+
- - - - - - -
- - - 100px - - - - - - no width - - -
+ + + 1 + Row + + + 2 + Alt row + + +
-
- -
-
-
- - - - - - - - - - - - - - - -
1Row
2Alt row
-
-
- {/* set height to scroll height (virtual scrolling) */} -
-
+
+ {/* set height to scroll height (virtual scrolling) */} +
-
-
-
+ + +
diff --git a/packages/html/src/grid/tests/grid-react-basic.tsx b/packages/html/src/grid/tests/grid-react-basic.tsx index 67dffffd807..2647d7f186c 100644 --- a/packages/html/src/grid/tests/grid-react-basic.tsx +++ b/packages/html/src/grid/tests/grid-react-basic.tsx @@ -1,4 +1,6 @@ import { Checkbox } from '../../checkbox'; +import { Grid, GridHeader, GridHeaderTable, GridContainer, GridContent, GridTable, GridHeaderCell } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( @@ -6,10 +8,10 @@ export default () =>(
Basic Grid
-
-
+ +
- + @@ -18,59 +20,23 @@ export default () =>( - - - - - - - - - - -
- - - ID - - - - - - Name - - - - - - CategoryName - - - - - - Price - - - - - - In stock - - - - - - Discontinued - - -
+ + + + + + + + + + +
-
-
-
+ + +
- + @@ -79,128 +45,128 @@ export default () =>( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1ChaiBeverages1839
2ChangBeverages1917
3Aniseed SyrupCondiments1013
4Chef Anton's Cajun SeasoningCondiments2253
5Chef Anton's Gumbo MixCondiments21.350
6Grandma's Boysenberry SpreadCondiments25120
7Uncle Bob's Organic Dried PearsProduce3015
8Northwoods Cranberry SauceCondiments406
9Mishi Kobe NikuMeat/Poultry9729
10IkuraSeafood3131
11Queso CabralesDairy Products2122
12Queso Manchego La PastoraDairy Products3886
13KonbuSeafood624
14TofuProduce23.2535
+ + + 1 + Chai + Beverages + 18 + 39 + + + + 2 + Chang + Beverages + 19 + 17 + + + + 3 + Aniseed Syrup + Condiments + 10 + 13 + + + + 4 + Chef Anton's Cajun Seasoning + Condiments + 22 + 53 + + + + 5 + Chef Anton's Gumbo Mix + Condiments + 21.35 + 0 + + + + 6 + Grandma's Boysenberry Spread + Condiments + 25 + 120 + + + + 7 + Uncle Bob's Organic Dried Pears + Produce + 30 + 15 + + + + 8 + Northwoods Cranberry Sauce + Condiments + 40 + 6 + + + + 9 + Mishi Kobe Niku + Meat/Poultry + 97 + 29 + + + + 10 + Ikura + Seafood + 31 + 31 + + + + 11 + Queso Cabrales + Dairy Products + 21 + 22 + + + + 12 + Queso Manchego La Pastora + Dairy Products + 38 + 86 + + + + 13 + Konbu + Seafood + 6 + 24 + + + + 14 + Tofu + Produce + 23.25 + 35 + + + +
-
-
-
+ + +
diff --git a/packages/html/src/grid/tests/grid-react.tsx b/packages/html/src/grid/tests/grid-react.tsx index 50de4098c32..e0b0efd25b2 100644 --- a/packages/html/src/grid/tests/grid-react.tsx +++ b/packages/html/src/grid/tests/grid-react.tsx @@ -1,5 +1,6 @@ import { Icon } from '../../icon'; - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridFooter, GridFooterTable } from '../../grid'; +import { TableRow, TableThead, TableTbody, TableTfoot, TableTd } from '../../table'; export default () =>( <> @@ -7,10 +8,10 @@ export default () =>( Interaction States
-
-
+ +
- + @@ -21,67 +22,25 @@ export default () =>( - - - - - - - - - - - - -
- - - ID - - - - - - Name - - - - - - Price - - - - - - In stock - - - - - - On order - - - - - - Discontinued - - - - - - Additional details - - -
+ + + + + + + + + + + + +
-
-
-
+ + +
- + @@ -92,168 +51,198 @@ export default () =>( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1Normal$18.00390false10 boxes x 20 bags
2Drag Selection Alt$19.001740false24 - 12 oz bottles
3Drag Selection$10.001370false12 - 550 ml bottles
4Row Selection Alt$22.00530false48 - 6 oz jars
5Row Selection$21.3500true36 boxes
6Drag Selection Alt Hover$25.001200false12 - 8 oz jars
7Drag Selection Hover$30.00150false12 - 1 lb pkgs.
8Hover$40.0060false12 - 12 oz jars
9Focus sticky cell$97.00290true18 - 500 g pkgs.
10Focus normal cell$31.00310false12 - 200 ml jars
11Queso Cabrales$21.002230false1 kg pkg.
12Queso Manchego La Pastora$38.00860false10 - 500 g pkgs.
13Konbu$6.00240false2 kg box
14Tofu$23.25350false40 - 100 g pkgs.
15Genen Shouyu$15.50390false24 - 250 ml bottles
+ + + + + + 1 + Normal + $18.00 + 39 + 0 + false + 10 boxes x 20 bags + + + + + + 2 + Drag Selection Alt + $19.00 + 17 + 40 + false + 24 - 12 oz bottles + + + + + + 3 + Drag Selection + $10.00 + 13 + 70 + false + 12 - 550 ml bottles + + + + + + 4 + Row Selection Alt + $22.00 + 53 + 0 + false + 48 - 6 oz jars + + + + + + 5 + Row Selection + $21.35 + 0 + 0 + true + 36 boxes + + + + + + 6 + Drag Selection Alt Hover + $25.00 + 120 + 0 + false + 12 - 8 oz jars + + + + + + 7 + Drag Selection Hover + $30.00 + 15 + 0 + false + 12 - 1 lb pkgs + + + + + + 8 + Hover + $40.00 + 6 + 0 + false + 12 - 12 oz jars + + + + + + 9 + Focus sticky cell + $97.00 + 29 + 0 + true + 18 - 500 g pkgs. + + + + + + 10 + Focus normal cell + $31.00 + 31 + 0 + false + 12 - 200 ml jars + + + + + + 11 + Queso Cabrales + $21.00 + 22 + 30 + false + 1 kg pkg. + + + + + + 12 + Queso Manchego La Pastora + $38.00 + 86 + 0 + false + 10 - 500 g pkgs. + + + + + + 13 + Konbu + $6.00 + 24 + 30 + false + 2 kg box + + + + + + 14 + Tofu + $23.25 + 35 + 0 + false + 40 - 100 g pkgs. + + + + + + 15 + Genen Shouyu + $15.50 + 39 + 30 + false + 24 - 250 ml bottles + + +
-
-
-
+ + +
- + @@ -264,22 +253,22 @@ export default () =>( - - - - - - - - - - - - -
avg: Xtotal: Y
+ + + + + + avg: X + total: Y + + + + + +
-
-
+ +
diff --git a/packages/html/src/grid/tests/grid-row-reordering.tsx b/packages/html/src/grid/tests/grid-row-reordering.tsx index 29a25218bee..ed7a87ad3a1 100644 --- a/packages/html/src/grid/tests/grid-row-reordering.tsx +++ b/packages/html/src/grid/tests/grid-row-reordering.tsx @@ -1,8 +1,7 @@ import { Button } from '../../button'; import { Icon } from '../../icon'; -import { Pager } from '../../pager'; -import { Toolbar } from '../../toolbar'; -import { Table, TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridPager, GridToolbar } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () => ( @@ -10,13 +9,18 @@ export default () => (
-
- - - -
+ + + + )} + pager={( + + )}> +
- + @@ -24,104 +28,65 @@ export default () => ( - - - - - Product Id - - - - - - - - - - - Unit Price - - - - - - - - - - - Discontinued - - - - - - - - - - - Category - - - - - - - + + + + + -
+
-
-
- - - - - - - - - - Chef Anton's Gumbo - 21.35 - 0 - Condiments - - - - Alice Mutton - 39 - 0 - Meat/Poultry - - - - Singaporean Hokkien Fried Mee - 123.79 - 1 - Meat/Poultry - - - - Gorgonzola Telino - 12.5 - 0 - Meat/Poultry - - - - Perth Pasties - 32.8 - 0 - Meat/Poultry - - -
-
- -
+ + + + + + + + + + + + + Chef Anton's Gumbo + 21.35 + 0 + Condiments + + + + Alice Mutton + 39 + 0 + Meat/Poultry + + + + Singaporean Hokkien Fried Mee + 123.79 + 1 + Meat/Poultry + + + + Gorgonzola Telino + 12.5 + 0 + Meat/Poultry + + + + Perth Pasties + 32.8 + 0 + Meat/Poultry + + + + + +
diff --git a/packages/html/src/grid/tests/grid-rows-resizing.tsx b/packages/html/src/grid/tests/grid-rows-resizing.tsx index 89fbaaecd52..e4a0a4bdd2c 100644 --- a/packages/html/src/grid/tests/grid-rows-resizing.tsx +++ b/packages/html/src/grid/tests/grid-rows-resizing.tsx @@ -1,6 +1,7 @@ import { Button } from '../../button'; -import { Toolbar } from '../../toolbar'; import { Searchbox } from '../../searchbox'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar } from '../../grid'; +import { TableRow, TableThead, TableTbody, TableTd } from '../../table'; export default () =>( <> @@ -9,189 +10,159 @@ export default () =>( Resizing Row / Hover
-
- + - -
+ + )}> +
- + - - - - - - - -
- - - Header Cell - - - - - - Header Cell - - - - - - Header Cell - - -
+ + + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Grid CellGrid Cell with loooooong text that spans on multiple rows - - -
Grid CellGrid Cell - - -
Grid CellGrid Cell - - -
Grid CellGrid Cell - - -
- - - -
-
+ + + + + + + + + + + + Grid Cell + Grid Cell with loooooong text that spans on multiple rows + + + + + + + Grid Cell + Grid Cell + + + + + + + Grid Cell + Grid Cell + + + + + + + Grid Cell + Grid Cell + + + + + + + + + + + + +
Resizing Row / Drag
-
- + - -
+ + )}> +
- + - - - - - - - -
- - - Header Cell - - - - - - Header Cell - - - - - - Header Cell - - -
+ + + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Grid CellGrid Cell with loooooong text that spans on multiple rows - - -
Grid CellGrid Cell - - -
Grid CellGrid Cell - - -
Grid CellGrid Cell - - -
- - - -
-
+ + + + + + + + + + + + Grid Cell + Grid Cell with loooooong text that spans on multiple rows + + + + + + + Grid Cell + Grid Cell + + + + + + + Grid Cell + Grid Cell + + + + + + + Grid Cell + Grid Cell + + + + + + + + + + + + +
diff --git a/packages/html/src/grid/tests/grid-rows-states.tsx b/packages/html/src/grid/tests/grid-rows-states.tsx index bc64cd92e7f..29803212b4f 100644 --- a/packages/html/src/grid/tests/grid-rows-states.tsx +++ b/packages/html/src/grid/tests/grid-rows-states.tsx @@ -1,4 +1,6 @@ import { Checkbox } from '../../checkbox'; +import { Grid, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table'; const styles = ` @@ -19,135 +21,135 @@ export default () =>(
-
- + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + - BaseSortedFocusSelected
+ + Base + Sorted + Focus + Selected + + + + + - Normal rowSortedFocusSelected
+ + Normal row + Sorted + Focus + Selected + + + - Alt rowSortedAlt + FocusAlt + Selected
+ + Alt row + Sorted + Alt + Focus + Alt + Selected + + + + + - SortedHovered rowHover + FocusHover + Selected
+ + Sorted + Hovered row + Hover + Focus + Hover + Selected + + + - Alt hovered rowSortedAlt + Hover + FocusAlt + Hover + Selected
+ + Alt hovered row + Sorted + Alt + Hover + Focus + Alt + Hover + Selected + + + + + - Focused rowSortedN/AFocus + Selected
+ + Focused row + Sorted + N/A + Focus + Selected + + + - Alt focused rowSortedN/AAlt + Focus + Selected
+ + Alt focused row + Sorted + N/A + Alt + Focus + Selected + + + + + - Selected rowSortedSelected + FocusN/A
+ + Selected row + Sorted + Selected + Focus + N/A + + + - Alt selected rowSortedAlt + Selected + FocusN/A
+ + Alt selected row + Sorted + Alt + Selected + Focus + N/A + + + + + - Hover + Selected rowSortedHover + Selected + FocusN/A
+ + Hover + Selected row + Sorted + Hover + Selected + Focus + N/A + + + - Alt + Hover selected rowSortedAlt + Hover + Selected + FocusN/A
-
+ + Alt + Hover selected row + Sorted + Alt + Hover + Selected + Focus + N/A + + + +
diff --git a/packages/html/src/grid/tests/grid-rtl-angular.tsx b/packages/html/src/grid/tests/grid-rtl-angular.tsx index 6c4f55af4ee..ca69bd5ada6 100644 --- a/packages/html/src/grid/tests/grid-rtl-angular.tsx +++ b/packages/html/src/grid/tests/grid-rtl-angular.tsx @@ -1,7 +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,188 +10,134 @@ export default () =>( Angular grid
-
-
- {/* add padding-left or -right for scrollbar width */} -
-
- + )} > + {/* add padding-left or -right for scrollbar width */} + +
+ +
+ + + + + + + + + + + + + + +
+
- - - - - - -
- - - 100px - - - - - - no width - - -
+ + + 1 + Row + + + 2 + Alt row + + + 3 + + This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. + + + + 4 + + + + 5 + + + +
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
1Row
2Alt row
3 - This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. -
4
5
-
-
- {/* set height to scroll height (virtual scrolling) */} -
-
+
+ {/* set height to scroll height (virtual scrolling) */} +
-
-
- -
+ + +
Angular -- fixed height, hierarchy, filter menu, sort icon
-
-
-
-
- + + +
+ +
+ + + + + + + + + + + + + + + + + +
+
- - - - - - - - - - -
- - - Default - -
- - 		- - - Hover - -
- - 		- - - Focus - -
- - 		- - - Active - -
- - 		- - - Sorted - - -
- -
+ + + + 1 + Text + Text + Text + Text + + + + + {/* hierarchy child content */} +
+ Nested content +
+ + + + + + + 2 + Text + Text + Text + Text + + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
1TextTextTextText
- {/* hierarchy child content */} -
- Nested content -
-
- - 2TextTextTextText
-
-
-
-
+
+
-
-
-
+ + +
diff --git a/packages/html/src/grid/tests/grid-rtl.tsx b/packages/html/src/grid/tests/grid-rtl.tsx index c49691cf5aa..4b190d7e47b 100644 --- a/packages/html/src/grid/tests/grid-rtl.tsx +++ b/packages/html/src/grid/tests/grid-rtl.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 () =>( @@ -8,169 +9,123 @@ export default () =>(
jQuery grid
-
-
+ )}> +
- + - - - - - - -
- - - 100px - - - - - - no width - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
1Row
2Alt row
3 - This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. -
4
5
-
- -
+ + + + + + + + + + + 1 + Row + + + 2 + Alt row + + + 3 + + This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. + + + + 4 + + + + 5 + + + + + + +
jQuery -- fixed height, hierarchy, filter menu, sort icon
-
-
+ +
- + - - - - - - - - - - -
- - - - Default - - - - - - - Hover - - - - - - - Focus - - - - - - - Active - - - - - - - Sorted - - - - -
+ + + + + + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - 1TextTextTextText
- {/* hierarchy child content */} -
- Nested content -
-
- - 2TextTextTextText
-
-
+ + + + + + + + + + + + + 1 + Text + Text + Text + Text + + + + + {/* hierarchy child content */} +
+ Nested content +
+ + + + + + + 2 + Text + Text + Text + Text + + + + + +
diff --git a/packages/html/src/grid/tests/grid-selection-aggregates.tsx b/packages/html/src/grid/tests/grid-selection-aggregates.tsx index 66fbd442047..b86dca17e1a 100644 --- a/packages/html/src/grid/tests/grid-selection-aggregates.tsx +++ b/packages/html/src/grid/tests/grid-selection-aggregates.tsx @@ -1,5 +1,6 @@ -import { Pager } from '../../pager'; import { SkeletonNormal } from '../../skeleton'; +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer,GridContent, GridTable, GridPager } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( @@ -8,67 +9,59 @@ export default () =>( Grid with selection aggregates container
-
-
+ )}> +
- + - - - - - - -
- - - 100px - - - - - - no width - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - - - + + + + + + 1 + Row + + + 2 + Alt row + + + 3 + This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. - - - - - - - - - - - -
1Row
2Alt row
3 + + + + +
4
5
-
+ + + + 4 + + + + 5 + + + + + + + +
Sum: @@ -91,73 +84,63 @@ export default () =>( 4
- -
+
- Grid with selection aggregates container (RTL)
-
-
+ )}> +
- + - - - - - - -
- - - 100px - - - - - - no width - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - - - + + + + + + 1 + Row + + + 2 + Alt row + + + 3 + This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. - - - - - - - - - - - -
1Row
2Alt row
3 + + + + +
4
5
-
+ + + + 4 + + + + 5 + + + + + + + +
Sum: @@ -180,10 +163,8 @@ export default () =>( 4
- -
+
-
); diff --git a/packages/html/src/grid/tests/grid-size-sm-comp-sm.tsx b/packages/html/src/grid/tests/grid-size-sm-comp-sm.tsx index 44902a3a0f6..25dbd50a309 100644 --- a/packages/html/src/grid/tests/grid-size-sm-comp-sm.tsx +++ b/packages/html/src/grid/tests/grid-size-sm-comp-sm.tsx @@ -1,13 +1,13 @@ +import { Grid, GridContainer, GridContent, GridHeader, GridTable, GridHeaderTable, GridHeaderCell, GridPager, GridToolbar, GridGroupingHeader } from '../../grid'; +import { TableThead, TableTh, TableRow, TableTbody, TableTd } from '../../table'; import { Button } from '../../button'; import { Checkbox } from '../../checkbox'; import { Chip, ChipAction, ChipList } from '../../chip'; import { DropdownList } from '../../dropdownlist'; import { Icon } from '../../icon'; import { NumericTextbox } from '../../numerictextbox'; -import { Pager } from '../../pager'; import { SkeletonNormal } from '../../skeleton'; import { Textbox } from '../../textbox'; -import { Toolbar } from '../../toolbar'; import { TooltipNormal } from '../../tooltip'; @@ -28,134 +28,85 @@ export default () =>( Grid
-
-
+ )}> +
- + - - - - - - -
- - - 100px - - - - - - no width - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - - - + + + + + + 1 + Row + + + 2 + Alt row + + + 3 + This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. - - - - - - - - - - - -
1Row
2Alt row
3 + + + + +
4
5
-
- -
+ + + + 4 + + + + 5 + + + + + + +
Filtering
-
-
+ +
- + - - - - - - - - - - - - - - - - - - -
- - - - Default - - - - - - - Hover - - - - - - - Focus - - - - - - - Active - - - - - - - Sorted - - - - -
+ + + + + + + + + + +
-
-
+
- 		+ +
@@ -166,8 +117,8 @@ export default () =>(
- 		+ +
@@ -178,8 +129,8 @@ export default () =>(
- 		+ +
@@ -190,8 +141,8 @@ export default () =>(
- 		+ +
@@ -202,239 +153,204 @@ export default () =>(
- 		+ +
-
-
+
-
+ + + +
-
-
- - - - - - - - - - - - - - - - + + + + + + + + 1 + Text + Text + Text + Text + + + + + {/* hierarchy child content */} +
Nested content -
- - - - - - - - - - - -
- - 1TextTextTextText
- {/* hierarchy child content */} -
+ + + + +
- - 2TextTextTextText
-
-
+
+ + + + + + + 2 + Text + Text + Text + Text + + + + + +
Editing
-
- + - -
+ + )}> +
- + - - - - - - - - -
- - - Name - - - - - - Price - - - - - - Available - - -  
+ + + + + +   + + +
-
-
- - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + LongSingleWordTestLongSingleWordTestLongSingleWordTestLongSingleWordTest - - - - - - - - - - - - -
- - - - - - - -
- + + + + +
18false - - -
Chang19false - - -
-
-
- + + 18 + false + + + + + + + Chang + 19 + false + + + + + + + + + +
Grouping
-
-
-
+ }>Price }>Name -
-
-
+ + )}> +
- + - + - - - - - - - - - -
- - - Name - - - - - - Price - - - - - - Available - - - - - - Units - - -
+ + + + + + + + + +
-
-
- - - - - - - + + + + + +

+ Price: 19 -

- - - - - - - - - - - - - -
-

- + + + + +

-

- +

+ + + + +

+ Price: 30 -

-
 Chai30false15
-
-
+

+ + + +   + Chai + 30 + false + 15 + + + + + +
diff --git a/packages/html/src/grid/tests/grid-size-sm.tsx b/packages/html/src/grid/tests/grid-size-sm.tsx index 6e8246dab52..1c5c05e1ec0 100644 --- a/packages/html/src/grid/tests/grid-size-sm.tsx +++ b/packages/html/src/grid/tests/grid-size-sm.tsx @@ -4,11 +4,11 @@ import { Chip, ChipAction, ChipList } from '../../chip'; import { DropdownList } from '../../dropdownlist'; import { Icon } from '../../icon'; import { NumericTextbox } from '../../numerictextbox'; -import { Pager } from '../../pager'; import { SkeletonNormal } from '../../skeleton'; import { Textbox } from '../../textbox'; -import { Toolbar } from '../../toolbar'; import { TooltipNormal } from '../../tooltip'; +import { Grid, GridHeader, GridGroupingHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable, GridPager, GridToolbar } from '../../grid'; +import { TableTh, TableTd, TableThead, TableRow, TableTbody } from '../../table'; const styles = ` @@ -28,146 +28,97 @@ export default () =>( Grid
-
-
+ )}> +
- + - - - - - - -
- - - 100px - - - - - - no width - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - - - + + + + + + 1 + Row + + + 2 + Alt row + + + 3 + This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. - - - - - - - - - - - -
1Row
2Alt row
3 + + + + +
4
5
-
- -
+ + + + 4 + + + + 5 + + + + + + +
Filtering
-
-
+ +
- + - - - - - - - - - - - - - - - - - - -
- - - - Default - - - - - - - Hover - - - - - - - Focus - - - - - - - Active - - - - - - - Sorted - - - - -
+ + + + + + + + + + +
-
-
+
- 		+ +
- +
{' '} - +
- 		+ +
@@ -178,8 +129,8 @@ export default () =>(
- 		+ +
@@ -190,8 +141,8 @@ export default () =>(
- 		+ +
@@ -202,239 +153,201 @@ export default () =>(
- 		+ +
-
-
+
-
+ + + +
-
-
- - - - - - - - - - - - - - - - + + + + + + + + 1 + Text + Text + Text + Text + + + + + {/* hierarchy child content */} +
Nested content -
- - - - - - - - - - - -
- - 1TextTextTextText
- {/* hierarchy child content */} -
+ + + + +
- - 2TextTextTextText
-
-
+ + + + + + + + 2 + Text + Text + Text + Text + + + + + +
Editing
-
- + - -
+ + )}> +
- + - - - - - - - - -
- - - Name - - - - - - Price - - - - - - Available - - -  
+ + + + + +   + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
- - LongSingleWordTestLongSingleWordTestLongSingleWordTestLongSingleWordTest - 18false - - -
Chang19false - - -
-
-
- + + + + + + + + + + + + + + + + + + + + + + + + + + LongSingleWordTestLongSingleWordTestLongSingleWordTestLongSingleWordTest + + 18 + false + + + + + + + Chang + 19 + false + + + + + + + + + +
Grouping
-
-
-
+ }>Price - }>Name + }>Name -
-
-
+ + )}> +
- + - - - - - - - - - -
- - - Name - - - - - - Price - - - - - - Available - - - - - - Units - - -
+ + + + + + + + + +
-
-
- - - - - - - + + + + + +

+ Price: 19 -

- - - - - - - - - - - - - -
-

- + + + + +

-

- +

+ + + + +

+ Price: 30 -

-
 Chai30false15
-
-
+

+ + + +   + Chai + 30 + false + 15 + + + + + +
diff --git a/packages/html/src/grid/tests/grid-sticky-columns-rtl.tsx b/packages/html/src/grid/tests/grid-sticky-columns-rtl.tsx index 10cdf9320c9..3f49e70228a 100644 --- a/packages/html/src/grid/tests/grid-sticky-columns-rtl.tsx +++ b/packages/html/src/grid/tests/grid-sticky-columns-rtl.tsx @@ -1,21 +1,31 @@ import { Icon } from '../../icon'; -import { Pager } from '../../pager'; import { Chip, ChipList, ChipAction } from '../../chip'; +import { Grid, GridGroupingHeader, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridPager } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; +const styles = ` + .k-grid-header-wrap { + border-width: 0px; + } +`; export default () =>( <> +

React Grid - Sticky columns - RTL

-
-
+ }>shipName -
-
-
- + + )} + pager={( + )}> + +
+
@@ -26,62 +36,25 @@ export default () =>( - - - - - - - - - - - - -
- - - customerID - - - - - - customerID - - - - - - - shipName - - - - - - freight - - - - - - shippedDate - - - - - - ID - - -
+ + + + + + + + + + + + +
-
-
-
+ + +
- + @@ -92,90 +65,89 @@ export default () =>( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + +

Lehmanns Marktstand

-
LEHMSSaturday, January 13, 1996Lehmanns Marktstand25.83Tuesday, January 16, 199610279
LEHMSSaturday, January 13, 1996Lehmanns Marktstand25.83Tuesday, January 16, 199610279
+ + + + + + LEHMS + Saturday, January 13, 1996 + Lehmanns Marktstand + 25.83 + Tuesday, January 16, 1996 + 10279 + + + + + LEHMS + Saturday, January 13, 1996 + Lehmanns Marktstand + 25.83 + Tuesday, January 16, 1996 + 10279 + + +

Split Rail Beer & Ale

-
SPLIRMonday, January 1, 1996Split Rail Beer & Ale4.54Tuesday, January 30, 199610271
SPLIRMonday, January 1, 1996Split Rail Beer & Ale4.54Tuesday, January 30, 199610271
+ + + + + + SPLIR + Monday, January 1, 1996 + Split Rail Beer & Ale + 4.54 + Tuesday, January 30, 1996 + 10271 + + + + + SPLIR + Monday, January 1, 1996 + Split Rail Beer & Ale + 4.54 + Tuesday, January 30, 1996 + 10271 + + +

Wartian Herkku

-
WARTHFriday, January 26, 1996Wartian Herkku25.73Wednesday, January 31, 199610266
WARTHFriday, January 26, 1996Wartian Herkku25.73Wednesday, January 31, 199610266
+ + + + + + WARTH + Friday, January 26, 1996 + Wartian Herkku + 25.73 + Wednesday, January 31, 1996 + 10266 + + + + + WARTH + Friday, January 26, 1996 + Wartian Herkku + 25.73 + Wednesday, January 31, 1996 + 10266 + + +
-
-
- -
+ + +
); diff --git a/packages/html/src/grid/tests/grid-sticky-columns.tsx b/packages/html/src/grid/tests/grid-sticky-columns.tsx index da4894163bc..83b4b42fe6f 100644 --- a/packages/html/src/grid/tests/grid-sticky-columns.tsx +++ b/packages/html/src/grid/tests/grid-sticky-columns.tsx @@ -1,14 +1,15 @@ import { Icon } from '../../icon'; import { Chip, ChipList, ChipAction } from '../../chip'; - +import { Grid, GridHeader, GridGroupingHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <>
-
-
+ +
- + @@ -16,52 +17,22 @@ export default () =>( - - - - - - - - - -
- - - Product Name - - - - - - Units In Stock - - - - - - Price - - - - - - Units On Order - - - - - - Reorder Level - - -
+ + + + + + + + + +
-
-
-
+ + +
- + @@ -69,96 +40,94 @@ export default () =>( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Chai3918010
Chang17194025
Aniseed Syrup(Selected)13107025
Chef Anton (Alt Selected)532200
Chef (Selected+Hover)021.3500
Gran (Alt Selected+Hover)12025025
Uncle Bob's Organic Dried Pears1530010
Northwoods Cranberry Sauce64000
Mishi Kobe Niku299700
Ikura313100
+ + + Chai + 39 + 18 + 0 + 10 + + + Chang + 17 + 19 + 40 + 25 + + + Aniseed Syrup(Selected) + 13 + 10 + 70 + 25 + + + Chef Anton (Alt Selected) + 53 + 22 + 0 + 0 + + + Chef (Selected+Hover) + 0 + 21.35 + 0 + 0 + + + Gran (Alt Selected+Hover) + 120 + 25 + 0 + 25 + + + Uncle Bob's Organic Dried Pears + 15 + 30 + 0 + 10 + + + Northwoods Cranberry Sauce + 6 + 40 + 0 + 0 + + + Mishi Kobe Niku + 29 + 97 + 0 + 0 + + + Ikura + 31 + 31 + 0 + 0 + + +
-
-
-
+ + + -
-
+ + }>Active Projects -
- -
+ +
- + @@ -167,59 +136,24 @@ export default () =>( - - - - - - - - - - - - - - -
- - - Name - - - - - - Team - - - - - - Active Projects - - - - - - Salary - - - - - - On Vacation - - -
+ + + + + + + + + + +
-
- -
-
+ + +
- + @@ -228,153 +162,115 @@ export default () =>( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + +

Currently active projects: 2  

-
- Employee 0 - Team 0 - 2 - 1429 - True
- Employee 4 - Team 1 - 2 - 2915 - True
- + + + + + Employee 0 + + Team 0 + + 2 + 1429 + True + + + + Employee 4 + + Team 1 + + 2 + 2915 + True + + + + + Team size: 7 - - - Total: X - -
+ + + Total: X + + + +

Currently active projects: 5   These people work on too many projects

-
- Employee 1 - Team 1 (Hovered) - 5 - 2307 - False
- Employee 2 - Team 2 (Selected) - 5 - 4225 - True
- Employee 3 - Team 0 (Selected and Hovered) - 5 - 4593 - False
- Employee 5 - Team 2 - 5 - 2906 - False
- + + + + + Employee 1 + + Team 1 (Hovered) + + 5 + 2307 + False + + + + Employee 2 + + Team 2 (Selected) + + 5 + 4225 + True + + + + Employee 3 + + Team 0 (Selected and Hovered) + + 5 + 4593 + False + + + + Employee 5 + + Team 2 + + 5 + 2906 + False + + + + + Team size: 18 - - - Total: Y - -
+ + + Total: Y + + + +
-
-
-
-
+ + + +
); diff --git a/packages/html/src/grid/tests/grid-sticky-multicolumn-headers.tsx b/packages/html/src/grid/tests/grid-sticky-multicolumn-headers.tsx index fc93bab76bd..1426ccdc815 100644 --- a/packages/html/src/grid/tests/grid-sticky-multicolumn-headers.tsx +++ b/packages/html/src/grid/tests/grid-sticky-multicolumn-headers.tsx @@ -1,13 +1,14 @@ - +import { Grid, GridHeader, GridHeaderTable, GridHeaderCell } from '../../grid'; +import { TableThead, TableRow } from '../../table'; export default () =>( <>
LTR -
-
+ +
- + @@ -16,90 +17,36 @@ export default () =>( - - - - - - - - - - - - - - - - - - - -
- - - Contact Name - - - - - - Contact Info - - - - - - Phone - - -
- - - Contact Title - - - - - - Location - - -
- - - Test - - - - - - City - - -
- - - Fax - - - - - - Country - - -
+ + + + + + + + + + + + + + + + + + + +
-
-
+ + RTL
-
-
+ +
- + @@ -108,83 +55,29 @@ export default () =>( - - - - - - - - - - - - - - - - - - - -
- - - Contact Name - - - - - - Contact Info - - - - - - Phone - - -
- - - Contact Title - - - - - - Location - - -
- - - Test - - - - - - City - - -
- - - Fax - - - - - - Country - - -
+ + + + + + + + + + + + + + + + + + + +
-
-
+ +
diff --git a/packages/html/src/grid/tests/grid-toolbar.tsx b/packages/html/src/grid/tests/grid-toolbar.tsx index 1ad1a318d74..e869397686e 100644 --- a/packages/html/src/grid/tests/grid-toolbar.tsx +++ b/packages/html/src/grid/tests/grid-toolbar.tsx @@ -1,7 +1,7 @@ import { Button } from '../../button'; import { ButtonGroup } from '../../button-group'; import { Searchbox } from '../../searchbox'; -import { Toolbar } from '../../toolbar'; +import { Grid, GridToolbar } from '../../grid'; const styles = ` @@ -25,128 +25,128 @@ export default () =>( Toolbar
-
- + - -
+ + )} />
-
- + - -
+ + )} + />
Toolbar RTL
-
- + - -
+ + )}/>
-
- + - -
+ + )}/>
Search
-
- + - -
+ + )}/>
-
- + -
+ - - -
+ + )}/>
Search RTL
-
- + - -
+ + )}/>
{/* Spacer with fixed width */} -
- +
- -
+ + )}/>
Multi-line
-
- + - -
+ + )}/>
Multiline RTL
-
- + - -
+ + )}/>
diff --git a/packages/html/src/grid/tests/grid-virtualization.tsx b/packages/html/src/grid/tests/grid-virtualization.tsx index 74b3b43ab4b..2189ce10646 100644 --- a/packages/html/src/grid/tests/grid-virtualization.tsx +++ b/packages/html/src/grid/tests/grid-virtualization.tsx @@ -1,4 +1,6 @@ import { SkeletonNormal } from "../../skeleton"; +import { Grid, GridHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable } from '../../grid'; +import { TableThead, TableTbody, TableRow, TableTd } from '../../table'; export default () =>( <> @@ -7,117 +9,44 @@ export default () =>( Grid with Virtualization
-
-
+ +
- + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - -
- - - Field 1 - - - - - - - Field 2 - - - - - - - Field 3 - - - - - - - Field 4 - - - - - - - - Field 5 - - - - - - - Field 6 - - - - - - - Field 7 - - - - - - - Field 8 - - - - - - - Field 9 - - - - - - - Field 10 - - - -
+ + + + + + + + + + + + + + +
-
- -
-
+ + +
- + @@ -130,487 +59,414 @@ export default () =>( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - - - - -
- - - - - - - - - - - - - - - - - - - -
Row: 1, Col: 1Row: 1, Col: 2Row: 1, Col: 3Row: 1, Col: 4Row: 1, Col: 5Row: 1, Col: 6Row: 1, Col: 7Row: 1, Col: 8Row: 1, Col: 9Row: 1, Col: 10
Row: 2, Col: 1Row: 2, Col: 2Row: 2, Col: 3Row: 2, Col: 4Row: 2, Col: 5Row: 2, Col: 6Row: 2, Col: 7Row: 2, Col: 8Row: 2, Col: 9Row: 2, Col: 10
Row: 3, Col: 1Row: 3, Col: 2Row: 3, Col: 3Row: 3, Col: 4Row: 3, Col: 5Row: 3, Col: 6Row: 3, Col: 7Row: 3, Col: 8Row: 3, Col: 9Row: 3, Col: 10
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Row: 1, Col: 1 + Row: 1, Col: 2 + Row: 1, Col: 3 + Row: 1, Col: 4 + Row: 1, Col: 5 + Row: 1, Col: 6 + Row: 1, Col: 7 + Row: 1, Col: 8 + Row: 1, Col: 9 + Row: 1, Col: 10 + + + Row: 2, Col: 1 + Row: 2, Col: 2 + Row: 2, Col: 3 + Row: 2, Col: 4 + Row: 2, Col: 5 + Row: 2, Col: 6 + Row: 2, Col: 7 + Row: 2, Col: 8 + Row: 2, Col: 9 + Row: 2, Col: 10 + + + Row: 3, Col: 1 + Row: 3, Col: 2 + Row: 3, Col: 3 + Row: 3, Col: 4 + Row: 3, Col: 5 + Row: 3, Col: 6 + Row: 3, Col: 7 + Row: 3, Col: 8 + Row: 3, Col: 9 + Row: 3, Col: 10 + + +
-
-
-
+ + +
Grid with Virtualization RTL
-
-
+ +
- + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - -
- - - Field 1 - - - - - - - Field 2 - - - - - - - Field 3 - - - - - - - Field 4 - - - - - - - - Field 5 - - - - - - - Field 6 - - - - - - - Field 7 - - - - - - - Field 8 - - - - - - - Field 9 - - - - - - - Field 10 - - - -
+ + + + + + + + + + + + + + +
-
- -
-
+ + +
- + @@ -623,371 +479,371 @@ export default () =>( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - + + - + + -
+ + + + - + + - + + - + + - + + - + + - + + - + + - - - - -
- - - - - - - - - - - - - - - - - - - -
Row: 1, Col: 1Row: 1, Col: 2Row: 1, Col: 3Row: 1, Col: 4Row: 1, Col: 5Row: 1, Col: 6Row: 1, Col: 7Row: 1, Col: 8Row: 1, Col: 9Row: 1, Col: 10
Row: 2, Col: 1Row: 2, Col: 2Row: 2, Col: 3Row: 2, Col: 4Row: 2, Col: 5Row: 2, Col: 6Row: 2, Col: 7Row: 2, Col: 8Row: 2, Col: 9Row: 2, Col: 10
Row: 3, Col: 1Row: 3, Col: 2Row: 3, Col: 3Row: 3, Col: 4Row: 3, Col: 5Row: 3, Col: 6Row: 3, Col: 7Row: 3, Col: 8Row: 3, Col: 9Row: 3, Col: 10
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Row: 1, Col: 1 + Row: 1, Col: 2 + Row: 1, Col: 3 + Row: 1, Col: 4 + Row: 1, Col: 5 + Row: 1, Col: 6 + Row: 1, Col: 7 + Row: 1, Col: 8 + Row: 1, Col: 9 + Row: 1, Col: 10 + + + Row: 2, Col: 1 + Row: 2, Col: 2 + Row: 2, Col: 3 + Row: 2, Col: 4 + Row: 2, Col: 5 + Row: 2, Col: 6 + Row: 2, Col: 7 + Row: 2, Col: 8 + Row: 2, Col: 9 + Row: 2, Col: 10 + + + Row: 3, Col: 1 + Row: 3, Col: 2 + Row: 3, Col: 3 + Row: 3, Col: 4 + Row: 3, Col: 5 + Row: 3, Col: 6 + Row: 3, Col: 7 + Row: 3, Col: 8 + Row: 3, Col: 9 + Row: 3, Col: 10 + + +
-
-
-
+ + +
diff --git a/packages/html/src/grid/tests/grid.tsx b/packages/html/src/grid/tests/grid.tsx index 828ae810f74..d34a0ce50e5 100644 --- a/packages/html/src/grid/tests/grid.tsx +++ b/packages/html/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 () =>( jQuery grid
-
-
+ )}> +
- + - - - - - - -
- - - 100px - - - - - - no width - - -
+ + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
1Row
2Alt row
3 - This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. -
4
5
-
- -
+ + + + + + + + + + + 1 + Row + + + 2 + Alt row + + + 3 + + This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment. + + + + 4 + + + + 5 + + + + + + +
jQuery -- fixed height, hierarchy, filter menu, sort icon +
-
-
+ +
- + - - - - - - - - - - -
- - - - Default - - - - - - - Hover - - - - - - - Focus - - - - - - - Active - - - - - - - Sorted - - - - -
+ + + + + + + + + + +
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - 1TextTextTextText
- {/* hierarchy child content */} -
- Nested content -
-
- - 2TextTextTextText
-
-
+ + + + + + + + + + + + + 1 + Text + Text + Text + Text + + + + + {/* hierarchy child content */} +
+ Nested content +
+ + + + + + + 2 + Text + Text + Text + Text + + + + + +
Drag column
-
-
+ +
- + - - - - - - - -
- - - Company Name - - - - - - Country - - -
+ + + + + + + +
-
-
- - - - - - - - - - - - - - - - - - -
Alfreds FutterkisteGermany
Ana Trujillo Emparedados y heladosMexico
-
-
- + + + + + + + + + + + + + Alfreds Futterkiste + Germany + + + + Ana Trujillo Emparedados y helados + Mexico + + + + + +
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts index 724a0371d08..a399fe36d20 100644 --- a/packages/html/src/index.ts +++ b/packages/html/src/index.ts @@ -97,7 +97,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'; diff --git a/packages/html/src/table/table-th.tsx b/packages/html/src/table/table-th.tsx index fc1ecb8ee4e..45b466e8bfc 100644 --- a/packages/html/src/table/table-th.tsx +++ b/packages/html/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 (
-
+