From c1c7ab0f0b539c60ad47502d809aa940d02f3f25 Mon Sep 17 00:00:00 2001 From: khotcholava Date: Fri, 29 Nov 2024 19:23:58 +0400 Subject: [PATCH] feat(platform): table filter enhancement closes [#11783](https://github.com/SAP/fundamental-ngx/issues/11783) ## Description fix table component host spec test --- libs/docs/platform/table/e2e/table.po.ts | 3 + .../table/platform-table-docs.component.html | 818 +++++++++--------- 2 files changed, 412 insertions(+), 409 deletions(-) diff --git a/libs/docs/platform/table/e2e/table.po.ts b/libs/docs/platform/table/e2e/table.po.ts index 7bce9ff57a2..bcac85691fd 100644 --- a/libs/docs/platform/table/e2e/table.po.ts +++ b/libs/docs/platform/table/e2e/table.po.ts @@ -107,6 +107,9 @@ export class TablePo extends PlatformBaseComponentPo { constructor(public readonly url: string) { super(); + console.log({ + url: this.url + }); } async open(): Promise { diff --git a/libs/docs/platform/table/platform-table-docs.component.html b/libs/docs/platform/table/platform-table-docs.component.html index 975158bbea2..49a8e81c487 100644 --- a/libs/docs/platform/table/platform-table-docs.component.html +++ b/libs/docs/platform/table/platform-table-docs.component.html @@ -1,112 +1,112 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Simple Table + +

This example shows simple table usage

+

Developers can pass additional content into tables' toolbar left side.

+

+ To do that, developers need to wrap needed content with fdp-table-toolbar-left-actions component. +

+

This example also shows the usage of the overflow functionality of the toolbar.

+ + + + + + + + + + Custom Column Width & Column Resizing + + +

+ Use width on the table column for setting custom width for the column cells. For the columns + without width set it will be calculated automatically based on the body cell content but not header cell + content. +

+ +

Note that if width is set in percents (%), it will be calculated relatively to initial table width.

+ +

+ Columns width will be recalculated on any width change but you also can use table's method + recalculateTableColumnWidth to recalculate it manually. +

+ + + + + + + + + Custom Column + +

This example shows custom column definition implementation

+

Developers are able to change the appearance of a regular cell and header cell as well.

+

Additionally, developers can define custom renderer of the header cell popover.

+ + + + + + + + + Custom Toolbar Title +This example shows how to customize the title of the table + + + + + + + + Column Freezing + +

Use [freezeColumnsTo]="columnName" to freeze columns up to and including.

+

Use [freezeEndColumnsTo]="columnName" to freeze columns from and to the end of the table.

+ +

+ Designated freezable columns with the [freezable] input, and end-freezable columns with the + [endFreezable] input. +

+ +

+ When using this feature, it's very important to set the width for every column as table cell width + won't be calculated properly without it. +

+ +

+ In the example below, "Name" and "Description" are freezable to the start of the table, and "Date" and + "Verified" are freezable to the end of the table. The frozen status of these columns can be set or unset by + clicking the header cell. The "Price" and "Status" columns cannot be frozen. +

+ + + + + + + + + Loading/Busy State + +

+ Use [loading]="true|false" to set busy state. Table component also exposes + onDataRequested and onDataReceived outputs, that can be used to implement any external + loading logic. These events are tied to the querying process through dataSource. +

+

+ By default, Table tracks these loading events and apply loading state internally. However, you can modify this + logic by using onDataRequested and onDataReceived methods and + loading input on the component +

+ + + + + + + Initial State @@ -125,303 +125,303 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Tree Table + + This example shows tree table usage. To setup tree table use next properties: + +
    +
  • [isTreeTable] Whether tree mode enabled or no.
    • +
  • [relationKey] Name of the field in the object which contains children nodes.
    • +
+ +

Drag & Drop

+ +

Tree table supports mouse Drag & Drop by default, so rows can be moved & placed inside other rows.

+

+ Drag & Drop events are simply client-side events and any desired backend changes must be handled by catching the + (rowsRearrange) event. +

+ +
+ +

+ Drag and drop is available via keyboard by focusing a row or cell, holding the alt/option key and using the up + or down arrows. +

+

+ By default, keyboard drag & drop works in shift mode, which means that focused item will ne moved on the same + level as it's siblings. +

+

+ By pressing alt/option + shift key, drag & drop will use 'group' mode with the next sibling based on the + direction of drag & drop. +

+

Drag and drop can be disabled by setting the [enableRowReordering] input to false.

+ +

+ Additionally, developers can pass custom [dropPredicate] and + [dragoverPredicate] functions to allow/disallow drop on particular row. +

+

+ More info on [dropPredicate] and [dragoverPredicate] can be found on + CDK page +

+ +

Tree initialization

+

+ Tree can be initialized and and its state can be controlled by the application. In order to do this tree needs + be instantiated using TableRow interface, where application set initial state. +

+

+ You can also set [enableTristateMode], to propagate selection from children to parents and parent + to children. +

+ + + + + + + + + + Table to render "No data" message + + + This example demonstrates ability to define table to display when no items are found. Use + fdp-table-no-data-wrapper element to define custom "No data" message. + + + + + + + + + Semantic Highlighting + +

This example shows semantic highlighting for the rows.

+ +

+ Use semanticHighlighting="value" input property on the table to show semantic row's status column. + Where value (string) is the key of the table row's item with status. Available statuses are + valid, warning, information, error. Any other statuses will be percieved as "no status". +

+ + + + + + + + + + Row custom CSS class + + This example demonstrates ability to apply custom CSS classes to the table rows. Use rowsClass input + property of the table component to define custom CSS classes. +
    +
  • Pass string ('customClass') to set custom CSS classes for every row.
    • +
  • + Pass function ((row) => row.field ? 'customClass' : 'anotherClass') which returns string to + describe own logic. Row will be passed as function's parameter. +
    • +
+ + + + + + + + + +Wrapping text in columns + +

This example demonstrates ability to disable wrapping column text into multiple lines.

+

+ Pass ([noWrap]="true") input property to the column definition in order to make text inside it not + to wrap. +

+ + + + + + + + + + No outer borders + + For a table without outer borders add [noOuterBorders]="true". Additionally, you can remove the + vertical borders with [noVerticalBorders]="true". + + + + + + + + +Dynamically adding rows to the table + + +

+ Table component supports of adding new rows to it by providing user with new row with form controls to define + row columns values. +

+

+ To enable adding new rows "on the fly", provide [editMode]="'inline'" input property for + fdp-table-toolbar component. +

+

+ WHen new row added, Table Component tries to generate empty object based on columns definitions. If this object + needs to be more sophisticated, developers can pass [editableRowSkeleton] property with configured + empty row object. +

+

By default, editable cell renders form control based on the column [dataType] input property:

+
    +
  • Default: text input
    • +
  • Number: number input
    • +
  • Boolean: switch
    • +
  • Date: date picker
    • +
+

+ If you want to render different form control for a specific column, you need to provide a custom template + with*fdpEditableCellDef directive. +

+ + + + + + + + + + + Hiding columns depending on the table size + + +

it is not recommended to use large amount of columns in a table which has small size.

+

+ In this case developers can use [fdpTableCellResponsive] directive with responsive breakpoints + object. +

+

+ This object should contain key as a minimum width of the breakpoint and value whether or not to show column for + this size. +

+ + + + + + + + + +Initial Loading + +

+ As the Table component supports as input a data source that can return observable, it will automatically show + skeleton placeholders while data is being loaded. +

+ +

+ Please note, that skeleton placeholders only shown before items are loaded for the first time. Every subsequent + loading will be shown with busy indicator. +

+ + + + + + + + +Rendering columns with ngFor loop + +

Platform Table component supports declaring columns with *ngFor loop.

+

When new column added, it will automatically appear in the table.

+

If by default column should be hidden, developers can add [visible]="false" Input property.

+

This way column still will be added to the table configuration dialog, but won't be rendered when added.

+ + + + + + + + + Playground Area + + + + + + + + + + + + + + + + + +