From 4039ef962f6aa2c6987bbe075bab2afc99e89920 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 14 Feb 2024 13:31:54 -0800 Subject: [PATCH 1/2] WIP --- .../calcite-components/src/components.d.ts | 2 - .../src/components/table-cell/table-cell.tsx | 33 +- .../components/table-header/table-header.tsx | 31 +- .../src/components/table/table.tsx | 3 +- .../calcite-components/src/demos/table.html | 8985 +++++++++-------- 5 files changed, 4599 insertions(+), 4455 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 75b036a5593..0b95c676ea4 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4769,7 +4769,6 @@ export namespace Components { "messages": TableHeaderMessages; "numberCell": boolean; "parentRowIsSelected": boolean; - "parentRowPosition": number; "parentRowType": RowType; "positionInRow": number; /** @@ -12276,7 +12275,6 @@ declare namespace LocalJSX { "messages"?: TableHeaderMessages; "numberCell"?: boolean; "parentRowIsSelected"?: boolean; - "parentRowPosition"?: number; "parentRowType"?: RowType; "positionInRow"?: number; /** diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 9fb6cde521e..7e35d85c637 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -1,4 +1,15 @@ -import { Component, Element, h, Host, Method, Prop, State, VNode, Watch } from "@stencil/core"; +import { + Component, + Element, + Fragment, + h, + Host, + Method, + Prop, + State, + VNode, + Watch, +} from "@stencil/core"; import { Alignment, Scale } from "../interfaces"; import { componentFocusable, @@ -237,18 +248,24 @@ export class TableCell colSpan={this.colSpan} onBlur={this.onContainerBlur} onFocus={this.onContainerFocus} - role="gridcell" + role={this.interactionMode === "interactive" ? "gridcell" : "cell"} rowSpan={this.rowSpan} tabIndex={staticCell ? -1 : 0} // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.containerEl = el)} > - {(this.selectionCell || this.readCellContentsToAT) && this.focused && ( - - {this.selectionCell && this.selectionText} - {this.readCellContentsToAT && !this.selectionCell && this.contentsText} - - )} + + {(this.selectionCell || this.readCellContentsToAT) && this.focused && ( + + {this.selectionCell && this.selectionText} + {this.readCellContentsToAT && !this.selectionCell && this.contentsText} + + )} + diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 4c2de4f0f1a..45acd1012d9 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -59,9 +59,6 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo /** @internal */ @Prop() parentRowIsSelected: boolean; - /** @internal */ - @Prop() parentRowPosition: number; - /** @internal */ @Prop() parentRowType: RowType; @@ -146,6 +143,8 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo @State() defaultMessages: TableHeaderMessages; + @State() focused = false; + @State() screenReaderText = ""; @State() effectiveLocale = ""; @@ -191,6 +190,14 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo this.screenReaderText = text; } + private onContainerBlur = (): void => { + this.focused = false; + }; + + private onContainerFocus = (): void => { + this.focused = true; + }; + //-------------------------------------------------------------------------- // // Render Methods @@ -212,7 +219,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo return ( )} - {(this.selectionCell || this.numberCell) && ( - - {this.screenReaderText} - - )} + + {(this.selectionCell || this.numberCell) && this.screenReaderText} + ); diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 35d396b7a95..091f00ffc6e 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -528,10 +528,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen {this.renderTHead()} diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index db175fd3a12..f573276bfaf 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -1,246 +1,606 @@ + + + + + Table - - - - - Table + + + - .calcite-mode-dark #theme-chip-lavender[selected] { - --calcite-ui-icon-color: #d6b9eb; - } - - + + + +
+ + + + + + + + + + + + + + + + + + + + + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + +
+ - - - -
- +

Scroll in parent testing

+
+ + + + + + + + + + + + + + + + + + + + + + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + + + + + + + + + + + + + + + + + + + + + + + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + + @@ -341,4292 +701,4051 @@ cell content cell content - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content -
- +

A11y testing

-

Scroll in parent testing

-
- - - - - - - - - - - - - - - - - - - - - - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - - - - - - - - - - - - - - - - - - - - - - - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - - + + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + test 1 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 2 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 3 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 4 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 5 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 7 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 8 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 9 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 10 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 11 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 13 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 14 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 15 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 16 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 17 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 18 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 19 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 20 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 21 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 22 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 23 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + + + +

Kitchen Sink

+ +
+
+ Features + + Numbered + Striped + Bordered + +
+
+ Selection Mode + + none + single + multiple + +
+
+ Scale + + S + M + L + +
+
+ Layout + + Auto + Fixed + +
+ +
+ Interaction Mode + + Interactive + Static + +
+ +
+ pageSize + + + +
+ +
+ Themes + + Calcite (Default) + Mint Glacier + Ranger Station + Lavender Field + +
+
+ + + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + test 1 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 2 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 3 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 4 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 5 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 7 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 8 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 9 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 10 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 11 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 13 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 14 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 15 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 16 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 17 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 18 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 19 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 20 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 21 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 22 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 23 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + + + footer + footer + footer + footer + footer + 78 + Happy + + Another thing + + + + footer + footer + footer + footer + footer + 78 + Happy + + Another thing + + + + +

Localized numbers

+ + + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + 34 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + +

Simple

+ + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Simple interaction-mode="static"

+ + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

striped

+ + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Bordered

+ + - - - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell -
-

A11y testing

- - - - - - - - - - - slot - - - - - - - - - cell - cell - cell - cell - cell - test 1 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 2 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 3 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 4 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 5 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 7 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 8 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 9 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - test 10 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 11 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 13 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 14 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 15 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 16 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 17 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 18 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 19 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 20 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - test 21 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 22 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 23 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - - - -

Kitchen Sink

- -
-
- Features - - Numbered - Striped - Bordered - -
-
- Selection Mode - - none - single - multiple - -
-
- Scale - - S - M - L - -
-
- Layout - - Auto - Fixed - -
- -
- Interaction Mode - - Interactive - Static - -
- -
- pageSize - - - -
- -
- Themes - - Calcite - (Default) - Mint - Glacier - Ranger Station - Lavender Field - -
-
- - - - - - - - - - - slot - - - - - - - - - cell - cell - cell - cell - cell - test 1 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 2 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 3 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 4 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 5 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 7 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 8 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 9 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - test 10 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 11 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 13 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 14 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 15 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 16 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 17 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 18 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 19 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 20 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - test 21 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 22 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 23 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - - - footer - footer - footer - footer - footer - 78 - Happy - - Another thing - - - - footer - footer - footer - footer - footer - 78 - Happy - - Another thing - - - - -

Localized numbers

- - - - - - - - - - - slot - - - - - - - - - cell - cell - cell - cell - cell - 34 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - -

Simple

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Simple interaction-mode="static"

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - - - -

striped

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Bordered

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Bordered-striped

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Various alignments

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - -

Disabled rows

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Numbered

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Numbered

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - foot - foot - foot - foot - - - -

With rich cell content

- - - - - - - - - - Chip - - cell - - - cell - - Chipbutton - chip - - - cell - chip - - chipchip - - - foot - foot - foot - foot - - - -

With rich cell content interaction-mode="static"

- - - - - - - - - - Chip - - cell - - - cell - - Chipbutton - chip - - - cell - chip - - chipchip - - - foot - foot - foot - foot - - +

Bordered-striped

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + +

Various alignments

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

Layout fixed

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - +

Disabled rows

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

Using row-span and col-span

- - - - - - - cell - cell - - - cell - cell - - - cell - cell - cell - cell - cell - - - cell - cell - cell - cell - cell - cell - - - cell - cell - cell - cell - - +

Numbered

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

Using row-span and col-span and numbered

- - - - - - - cell - cell - - - cell - cell - - - cell - cell - cell - cell - cell - - - cell - cell - cell - cell - cell - cell - - - cell - cell - cell - cell - - +

Numbered

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + foot + foot + foot + foot + + -

Using row-span and col-span

- - - - - - - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - cell - - - cell - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - - +

With rich cell content

+ + + + + + + + + + Chip + + cell + + + cell + + Chipbutton + chip + + + cell + chip + + chipchip + + + foot + foot + foot + foot + + -

Multiple headers using col-span

- - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - +

With rich cell content interaction-mode="static"

+ + + + + + + + + + Chip + + cell + + + cell + + Chipbutton + chip + + + cell + chip + + chipchip + + + foot + foot + foot + foot + + -

Complex keyboard test with multiple headers, selection, pagination using col-span

- - - - - - - - - - - - - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - cell - - - cell - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - - - foot - foot - foot - foot - - - foot - foot - - +

Layout fixed

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

Headers in rows

- - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - +

Using row-span and col-span

+ + + + + + + cell + cell + + + cell + cell + + + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

Headers in rows and table-head

- - - - - - - - - - - - - - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - foot - foot - foot - - - - foot - foot - foot - - +

Using row-span and col-span and numbered

+ + + + + + + cell + cell + + + cell + cell + + + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

Headers in rows and table-head with selection-mode

- - - - - - - +

Using row-span and col-span

+ + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + cell + + + cell + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - foot - foot - foot - - - - foot - foot - foot - - -

selection-mode single

- - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - +

Multiple headers using col-span

+ + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

selection-mode multiple with selected at load

- - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - foot - foot - foot - foot - - +

Complex keyboard test with multiple headers, selection, pagination using col-span

+ + + + + + + + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + cell + + + cell + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + foot + foot + + + foot + foot + + -

selection-mode multiple with multiple headers, footers, pageSize

+

Headers in rows

+ + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + - - - - - - - - - - - - - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - - - foot - foot - foot - foot - - - foot - foot - - - - foot - foot - foot - - - - foot - - +

Headers in rows and table-head

+ + + + + + + + + + + + + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + + foot + foot + foot + + + + foot + foot + foot + + -

selection-mode multiple and numbered including out of view

+

Headers in rows and table-head with selection-mode

+ + + + + + + - - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + + foot + foot + foot + + + + foot + foot + foot + + +

selection-mode single

+ + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

selection-mode multiple and numbered including out of view and footer

+

selection-mode multiple with selected at load

+ + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + foot + foot + foot + foot + + - - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - - 24,212 - 58% happiness - - - +

selection-mode multiple with multiple headers, footers, pageSize

+ + + + + + + + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + foot + foot + + + foot + foot + + + + foot + foot + foot + + + + foot + + -

selection-mode multiple and numbered including out of view and multiple header and footer

+

selection-mode multiple and numbered including out of view

- - - - - - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - - 58% happiness - - - - 24,212 - 58% happiness - - - + + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

selection-mode multiple and numbered including out of view and multiple header and footer - - interaction-mode="static"

+

selection-mode multiple and numbered including out of view and footer

- - - - - - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - - 58% happiness - - - - 24,212 - 58% happiness - - - + + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + + 24,212 + 58% happiness + + + -

With selection-mode multiple and rich cell content

- - - - - - - - - - Chip - - cell - - - cell - - Chipbutton - chip - - - cell - chip - - chipchip - - +

selection-mode multiple and numbered including out of view and multiple header and footer

-

With selection-mode multiple interaction-mode="static" and rich cell content

- - - - - - - - - - Chip - - cell - - - cell - - Chipbutton - chip - - - cell - chip - - chipchip - - + + + + + + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + + 58% happiness + + + + 24,212 + 58% happiness + + + -

Handle keyboard navigation with disabled rows in various places

-

- Expect up / down to skip to next non-disabled - expect "page up / down / cntrl home + end" to focus next - available non-disabled -

+

+ selection-mode multiple and numbered including out of view and multiple header and footer - + interaction-mode="static" +

- - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - - - - \ No newline at end of file + chipGroupScale.addEventListener("calciteChipGroupSelect", (event) => { + calciteChipsScale.forEach((chip) => { + if (event.target.selectedItems.includes(chip)) { + table.scale = chip.value; + } else { + return; + } + }); + }); + + From 8eb9963cf9260ae24df5593af1f7b59fb053deb0 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 14 Feb 2024 15:35:52 -0800 Subject: [PATCH 2/2] feat(table): Improve accessibility of `interaction-mode: static` Table --- .../calcite-components/src/components/table-cell/table-cell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 7e35d85c637..79cc34c13d9 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -259,7 +259,7 @@ export class TableCell aria-live={this.focused ? "polite" : "off"} class={CSS.assistiveText} > - {(this.selectionCell || this.readCellContentsToAT) && this.focused && ( + {(this.selectionCell || this.readCellContentsToAT) && ( {this.selectionCell && this.selectionText} {this.readCellContentsToAT && !this.selectionCell && this.contentsText}
{this.caption}