Tables display sets of data. They can be fully customized.
Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.
Simple Table
A simple example with no frills. Table columns are defined from the data.
When using custom columns, you will need to add the -IncludeInSearch parameter to the columns you'd like to include in the search.
$Data =@(@{Dessert ='Frozen yoghurt'; Calories =159; Fat =6.0; Carbs =24; Protein =4.0}@{Dessert ='Ice cream sandwich'; Calories =159; Fat =6.0; Carbs =24; Protein =4.0}@{Dessert ='Eclair'; Calories =159; Fat =6.0; Carbs =24; Protein =4.0}@{Dessert ='Cupcake'; Calories =159; Fat =6.0; Carbs =24; Protein =4.0}@{Dessert ='Gingerbread'; Calories =159; Fat =6.0; Carbs =24; Protein =4.0}) $Columns =@(New-UDTableColumn-Property Dessert -Title "A Dessert"-IncludeInSearchNew-UDTableColumn-Property Calories -Title Calories New-UDTableColumn-Property Fat -Title Fat New-UDTableColumn-Property Carbs -Title Carbs New-UDTableColumn-Property Protein -Title Protein )New-UDTable-Id 'customColumnsTable'-Data $Data -Columns $Columns -ShowSearch
Table with server-side processing
Process data on the server so you can perform paging, filtering, sorting and searching in systems like SQL. To implement a server-side table, you will use the -LoadData parameter. This parameter accepts a ScriptBlock. The $EventData variable includes information about the state of the table. You can use cmdlets to process the data based on this information.
$EventData Structure
The $EventData object contains the following properties.
Property Name
Type
Description
Filters
Hashtable[]
@{
id = 'fieldName'
value = 'filterValue'
}
A list of filter values. Each hashtable has an Id and a Value property.
OrderBy
Hashtable
@{ field = "fieldName" }
Property name to sort by.
OrderDirection
string
asc or desc depending on the sort order.
Page
int
The current page (starting with 0).
PageSize
int
The selected page size.
Properties
string[]
An array of properties being shown in the table.
Search
string
A search string provided by the user.
TotalCount
int
The total number of records before filtering or paging.
You may want to allow the user to take action on the current set of displayed data. To do so, use Get-UDElement in the input object you want to retrieve the data from and get the table by Id. Once you have the element, you can use the CurrentData property of the element to get an array of currently displayed rows.
By default, paging is disable and tables will grow based on how many rows of data you provide. You can enable paging by using the -ShowPagination cmdlet (alias -Paging). You can configure the page size using the -PageSize cmdlet.
By default, the page size selector provides an option to show all rows. If you want to prevent users from doing this, use the -DisablePageSizeAll cmdlet.
Pagination Location
You can change the location of the pagination control by using the -PaginationLocation parameter. It accepts top, bottom and both.
Sorting
To enable sorting for a table, use the -ShowSort parameter. When you enable sorting, you will be able to click the table headers to sort the table by clicking the headers. By default, multi-sort is enabled. To multi-hold shift and click a column header.
You can control which columns can be sorted by using New-UDTableColumn and -ShowSort parameter.
@{Dessert ='Eclair'; Calories =159; Fat =6.0; Carbs =24; Protein =4.0}@{Dessert ='Cupcake'; Calories =159; Fat =6.0; Carbs =24; Protein =4.0}@{Dessert ='Gingerbread'; Calories =159; Fat =6.0; Carbs =24; Protein =4.0}) $Columns =@(New-UDTableColumn-Property Dessert -Title "A Dessert"-ShowSortNew-UDTableColumn-Property Calories -Title Calories New-UDTableColumn-Property Fat -Title Fat New-UDTableColumn-Property Carbs -Title Carbs -ShowSortNew-UDTableColumn-Property Protein -Title Protein -ShowSort)New-UDTable-Id 'customColumnsTable'-Data $Data -Columns $Columns
Disable Sort Remove
By default, the sorting of a table has 3 states. Unsorted, ascending and descending. If you would like to disable the unsorted state, use the -DisableSortRemove parameter of New-UDTable.
Tables support selection of rows. You can create an event handler for the OnRowSelected parameter to receive when a new row is selected or unselected or you can use Get-UDElement to retrieve the current set of selected rows.
The following example creates a table with row selection enabled. A toast is show when clicking the row or when clicking the GET Rows button.
The $EventData variable for the -OnRowSelected event will include all the columns as properties and a selected property as to whether the row was selected or unselected.
For example, the service table data would look like this.
@{ Id =0 Name ='AESMService', Status ='Running' StartupType ='AutomaticDelayedStart' StartType ='Automation' selected =$true}
Collapsible Rows
You can include additional information within the table by using the -OnRowExpand parameter of New-UDTable. It accepts a ScriptBlock that you can use to return additional components.
Tables support exporting the data within the table. You can export as CSV, XLSX, JSON or PDF. You can define which columns to include in an export and choose to export just the current page or all the data within the table.
You can control the export functionality with a PowerShell script block. This is useful when exporting from server-side sources like SQL server tables.
In this example, I have a SQL table that contains podcasts. When exporting, you will receive information about the current state of the table to allow you to customize what data is exported.
You can decide which export options to present to your users using the -ExportOption cmdlet. The following example would only show the CSV export option.
If you use the -LoadData parameter, you can sync the table directly. This has the benefit of maintaining the table state, such as the page and filtering, after the refresh.
