diff --git a/docs/en/UI/Angular/Data-Table-Column-Extensions.md b/docs/en/UI/Angular/Data-Table-Column-Extensions.md index 6f1367d934..7660ec5550 100644 --- a/docs/en/UI/Angular/Data-Table-Column-Extensions.md +++ b/docs/en/UI/Angular/Data-Table-Column-Extensions.md @@ -1,6 +1,5 @@ # Data Table Column (or Entity Prop) Extensions for Angular UI - ## Introduction Entity prop extension system allows you to add a new column to the data table for an entity or change/remove an already existing one. A "Name" column was added to the user management page below: @@ -196,6 +195,14 @@ type PropCallback = (data?: PropData) => R; type PropPredicate = (data?: PropData) => boolean; ``` +### ColumnPredicate + +`ColumnPredicate` is the type of the predicate function that can be passed to an `EntityProp` as `columnVisible` parameter. A column predicate gets a single parameter, the `GetInjected`, you can use the `GetInjected` parameter to reach injected `Service` or `Component`. The return type must be `boolean`. Here is a simplified representation: + +```js +type ColumnPredicate = (getInjected: GetInjected) => boolean; +``` + ### EntityPropOptions\ `EntityPropOptions` is the type that defines required and optional properties you have to pass in order to create an entity prop. @@ -212,6 +219,7 @@ type EntityPropOptions = { columnWidth?: number; permission?: string; visible?: PropPredicate; + columnVisible?: ColumnPredicate; }; ``` @@ -224,9 +232,12 @@ As you see, passing `type` and `name` is enough to create an entity prop. Here i - **sortable** defines if the table is sortable based on this entity prop. Sort icons are shown based on it. (_default:_ `false`) - **columnWidth** defines a minimum width for the column. Good for horizontal scroll. (_default:_ `undefined`) - **permission** is the permission context which will be used to decide if a column for this entity prop should be displayed to the user or not. (_default:_ `undefined`) -- **visible** is a predicate that will be used to decide if this entity prop should be displayed on the table or not. (_default:_ `() => true`) +- **visible** is a predicate that will be used to decide if the cell content of this entity prop should be displayed on the table or not based on the data record. (_default:_ `() => true`) +- **columnVisible** is a predicate that will be used to decide if the column of this entity prop should be displayed on the table or not. (_default:_ `() => true`) > Important Note: Do not use record in visibility predicates. First of all, the table header checks it too and the record will be `undefined`. Second, if some cells are displayed and others are not, the table will be broken. Use the `valueResolver` and render an empty cell when you need to hide a specific cell. +> +> `visible` predicate only hide the cell content, not the column. Use `columnVisible` to hide the entire column. You may find a full example below. @@ -257,6 +268,10 @@ const options: EntityPropOptions = { return store.selectSnapshot(selectSensitiveDataVisibility).toLowerCase() === 'true'; } + columnVisible: getInjected => { + const sessionStateService = getInjected(SessionStateService); + return !sessionStateService.getTenant()?.isAvailable; // hide this column when the tenant is available. + }, }; const prop = new EntityProp(options); @@ -281,19 +296,19 @@ The items in the list will be displayed according to the linked list order, i.e. ```js export function reorderUserContributors( - propList: EntityPropList, + propList: EntityPropList ) { // drop email node const emailPropNode = propList.dropByValue( 'AbpIdentity::EmailAddress', - (prop, text) => prop.text === text, + (prop, text) => prop.text === text ); // add it back after phoneNumber propList.addAfter( emailPropNode.value, 'phoneNumber', - (value, name) => value.name === name, + (value, name) => value.name === name ); } ``` @@ -304,7 +319,7 @@ export function reorderUserContributors( ```js export function isLockedOutPropContributor( - propList: EntityPropList, + propList: EntityPropList ) { // add isLockedOutProp as 2nd column propList.add(isLockedOutProp).byIndex(1);