feat(table): support native table selectors #10594
Conversation
andrewseguin
added
feature
googlebot
added
the
cla: yes
andrewseguin
force-pushed
the
table-native-html
branch
3 times, most recently
from
7acb55d
to
da35122
Compare
andrewseguin
force-pushed
the
table-native-html
branch
from
da35122
to
610e357
Compare
src/cdk/table/table.ts
Outdated
| } | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| if (this._elementRef.nativeElement.tagName === 'TABLE') { |
src/cdk/table/table.ts
Outdated
| /** Adds native table sections (e.g. tbody) and moves the row placeholders into them. */ | ||
| private _applyNativeTableSections() { | ||
| const tHeadEl = document.createElement('thead'); | ||
| const tBodyEl = document.createElement('tbody'); |
There was a problem hiding this comment.
Just thead and tbody since that's the tag name; it's weird as camelCase
src/lib/table/table.md
Outdated
| @@ -278,3 +278,50 @@ Table's default role is `grid`, and it can be changed to `treegrid` through `rol | |||
|
|
|||
| `mat-table` does not manage any focus/keyboard interaction on its own. Users can add desired | |||
| focus/keyboard interactions in their application. | |||
|
|
|||
| ### Using flex layout | |||
There was a problem hiding this comment.
Reword this to be something like Tables with `display: flex so that it's not confused with @angular/flex-layout
src/lib/table/table.md
Outdated
| ### Using flex layout | ||
|
|
||
| The `MatTable` does not require that you use a native HTML table. Instead, you can use an | ||
| alternative approach that uses flex-layout for the table's styles. |
|
Thanks - updated with the comments applied |
jelbourn
added
pr: lgtm
action: merge
|
Can you please give us a stackblitz example for this. Having difficulty to implement native table with rowspan as a material table. Sample code is also more then enough. Thanks in advance. |
|
@jainankit102 check material.angular.io. it's all there. |
|
@CDDelta thanks for that but I already checked in material.angular.io. didn't found any example regarding material table with rowspan and colspan. Thanks |
|
@jainankit102 sorry it was early in the morning, I didn't notice you were looking for rowspan examples. I recommend you open a new issue about this, you would be more likely to get responses. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Summary:
Add native table selectors to the
CdkTable(e.g.<table cdk-table>) and refocuses the docs on this approach as the primary way of using the table componentsFixes #6058, #7964, #9027, #8680
Closes #5888, #5866
Full Description:
Add the ability to render the table using the native HTML table element as opposed to using the flex-based
<mat-table>element. This quickly enables key features such as auto column resizing, col/row span, easy copy/paste (cells map into spreadsheets easily). Also, any native table can become a material table by simply applying themat-tableclass (+ classes to rows/cells).Benefits to using native table:
<table>)CdkTablesupports a table appearance out of the box (no need for additional styling)