Table
Table component for Universal Dashboard
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.
1
$Data = @(
2
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
5
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
6
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
7
)
8
9
New-UDTable -Data $Data
Copied!

Table with Custom Columns

Define custom columns for your table.
1
$Data = @(
2
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
5
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
6
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
7
)
8
9
$Columns = @(
10
New-UDTableColumn -Property Dessert -Title "A Dessert"
11
New-UDTableColumn -Property Calories -Title Calories
12
New-UDTableColumn -Property Fat -Title Fat
13
New-UDTableColumn -Property Carbs -Title Carbs
14
New-UDTableColumn -Property Protein -Title Protein
15
)
16
17
New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns
Copied!

Table with Custom Column Rendering

Define column rendering. Sorting and exporting still work for the table.
1
$Data = @(
2
@{Dessert = 'Frozen yoghurt'; Calories = 1; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
5
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
6
@{Dessert = 'Gingerbread'; Calories = 200; Fat = 6.0; Carbs = 24; Protein = 4.0}
7
)
8
9
$Columns = @(
10
New-UDTableColumn -Property Dessert -Title Dessert -Render {
11
New-UDButton -Id "btn$($EventData.Dessert)" -Text "Click for Dessert!" -OnClick { Show-UDToast -Message $EventData.Dessert }
12
}
13
New-UDTableColumn -Property Calories -Title Calories
14
New-UDTableColumn -Property Fat -Title Fat
15
New-UDTableColumn -Property Carbs -Title Carbs
16
New-UDTableColumn -Property Protein -Title Protein
17
)
18
19
New-UDTable -Data $Data -Columns $Columns -Sort -Export
Copied!

Table Column Width

Column width can be defined using the -Width parameter. You can also decide to truncate columns that extend past that width.
1
$Data = @(
2
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
5
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
6
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
7
)
8
9
$Columns = @(
10
New-UDTableColumn -Property Dessert -Title Dessert -Render {
11
New-UDButton -Id "btn$($EventData.Dessert)" -Text "Click for Dessert!" -OnClick { Show-UDToast -Message $EventData.Dessert }
12
}
13
New-UDTableColumn -Property Calories -Title Calories -Width 5 -Truncate
14
New-UDTableColumn -Property Fat -Title Fat
15
New-UDTableColumn -Property Carbs -Title Carbs
16
New-UDTableColumn -Property Protein -Title Protein
17
)
18
19
New-UDTable -Data $Data -Columns $Columns -Sort
Copied!

Filters

You can configure custom filters per column. The table supports text, select, fuzzy , slider, range, date , number, and autocomplete filters.
1
$Data = @(
2
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
5
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
6
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
7
)
8
9
$Columns = @(
10
New-UDTableColumn -Property Dessert -Title "A Dessert" -Filter -FilterType AutoComplete
11
New-UDTableColumn -Property Calories -Title Calories -Filter -FilterType Range
12
New-UDTableColumn -Property Fat -Title Fat -Filter -FilterType Range
13
New-UDTableColumn -Property Carbs -Title Carbs -Filter -FilterType Range
14
New-UDTableColumn -Property Protein -Title Protein -Filter -FilterType Range
15
)
16
17
New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns -ShowFilter
Copied!

Table with server-side processing

For a full example of server-side processing, see this blog post.
Process data on the server so you can perform paging, filtering, sorting and searching in systems like SQL.
1
$Columns = @(
2
New-UDTableColumn -Property Dessert -Title "A Dessert"
3
New-UDTableColumn -Property Calories -Title Calories
4
New-UDTableColumn -Property Fat -Title Fat
5
New-UDTableColumn -Property Carbs -Title Carbs
6
New-UDTableColumn -Property Protein -Title Protein
7
)
8
9
New-UDTable -Columns $Columns -LoadData {
10
$Query = $Body | ConvertFrom-Json
11
12
<# Query will contain
13
filters: []
14
orderBy: undefined
15
orderDirection: ""
16
page: 0
17
pageSize: 5
18
properties: (5) ["dessert", "calories", "fat", "carbs", "protein"]
19
search: ""
20
totalCount: 0
21
#>
22
23
@(
24
@{Dessert = 'Frozen yoghurt'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
25
@{Dessert = 'Ice cream sandwich'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
26
@{Dessert = 'Eclair'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
27
@{Dessert = 'Cupcake'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
28
@{Dessert = 'Gingerbread'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
29
) | Out-UDTableData -Page 0 -TotalCount 5 -Properties $Query.Properties
30
}
Copied!

Paging

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.
1
$Data = @(
2
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
5
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
6
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
7
)
8
9
New-UDTable -Data $Data -Paging -PageSize 2
Copied!

Disable Page Size All

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.

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.
1
$Data = @(
2
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
5
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
6
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
7
)
8
9
New-UDTable -Data $Data -ShowSort
Copied!
You can control which columns can be sorted by using New-UDTableColumn and -ShowSort parameter.
1
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
2
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
)
5
6
$Columns = @(
7
New-UDTableColumn -Property Dessert -Title "A Dessert" -ShowSort
8
New-UDTableColumn -Property Calories -Title Calories
9
New-UDTableColumn -Property Fat -Title Fat
10
New-UDTableColumn -Property Carbs -Title Carbs -ShowSort
11
New-UDTableColumn -Property Protein -Title Protein -ShowSort
12
)
13
14
New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns
Copied!

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.
1
$Data = @(
2
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
5
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
6
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
7
)
8
9
New-UDTable -Data $Data -ShowSort -DisableSortRemove
Copied!

Selection

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.
1
$Data = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
2
$Columns = @(
3
New-UDTableColumn -Property Name -Title "Service Name" -ShowSort -IncludeInExport -IncludeInSearch -ShowFilter -FilterType text
4
New-UDTableColumn -Property Status -Title Status -ShowSort -DefaultSortColumn -IncludeInExport -IncludeInSearch -ShowFilter -FilterType select
5
New-UDTableColumn -Property StartupType -Title StartupType -IncludeInExport -ShowFilter -FilterType select
6
New-UDTableColumn -Property StartType -Title StartType -IncludeInExport -ShowFilter -FilterType select
7
)
8
New-UDTable -Id 'service_table' -Data $Data -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -ShowSelection -Dense -OnRowSelection {
9
$Item = $EventData
10
Show-UDToast -Message "$($Item | out-string)"
11
}
12
New-UDButton -Text "GET Rows" -OnClick {
13
$value = Get-UDElement -Id "service_table"
14
Show-UDToast -Message "$( $value.selectedRows | Out-String )"
15
}
Copied!
Row selection
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.
1
@{
2
Id = 0
3
Name = 'AESMService',
4
Status = 'Running'
5
StartupType = 'AutomaticDelayedStart'
6
StartType = 'Automation'
7
selected = $true
8
}
Copied!

Exporting

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.
1
$Data = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
2
$Columns = @(
3
New-UDTableColumn -Property Name -Title "Service Name" -IncludeInExport
4
New-UDTableColumn -Property Status -Title Status
5
New-UDTableColumn -Property StartupType
6
New-UDTableColumn -Property StartType -IncludeInExport
7
)
8
New-UDTable -Id 'service_table' -Data $Data -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -Dense -Export
Copied!

Hidden Columns

Hidden columns allow you to include data that is not displayed in the table but is included in the exported data.
The following hides the StartType column from the user but includes it in the export.
1
$Data = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
2
$Columns = @(
3
New-UDTableColumn -Property Name -Title "Service Name" -IncludeInExport
4
New-UDTableColumn -Property Status -Title Status
5
New-UDTableColumn -Property StartupType
6
New-UDTableColumn -Property StartType -IncludeInExport -Hidden
7
)
8
New-UDTable -Id 'service_table' -Data $Data -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -Dense -Export
Copied!

Server-Side Exporting

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.
1
New-UDDashboard -Title "Hello, World!" -Content {
2
New-UDTable -Title 'Shows' -LoadData {
3
$TableData = ConvertFrom-Json $Body
4
5
$OrderBy = $TableData.orderBy.field
6
if ($OrderBy -eq $null)
7
{
8
$OrderBy = "name"
9
}
10
11
$OrderDirection = $TableData.OrderDirection
12
if ($OrderDirection -eq $null)
13
{
14
$OrderDirection = 'asc'
15
}
16
17
$Where = ""
18
if ($TableData.Filters)
19
{
20
$Where = "WHERE "
21
22
foreach($filter in $TableData.Filters)
23
{
24
$Where += $filter.column.field + " LIKE '%" + $filter.value + "%' AND "
25
}
26
27
$Where += " 1 = 1"
28
}
29
30
$PageSize = $TableData.PageSize
31
# Calculate the number of rows to skip
32
$Offset = $TableData.Page * $PageSize
33
$Count = Invoke-DbaQuery -SqlInstance localhost\MSSQLSERVER -Database 'podcasts' -Query "SELECT COUNT(*) as count FROM shows $Where"
34
35
$Data = Invoke-DbaQuery -SqlInstance localhost\MSSQLSERVER -Database 'podcasts' -Query "SELECT * FROM shows $Where ORDER BY $orderBy $orderdirection OFFSET $Offset ROWS FETCH NEXT $PageSize ROWS ONLY" | ForEach-Object {
36
@{
37
name = $_.name
38
host = $_.host
39
}
40
}
41
$Data | Out-UDTableData -Page $TableData.page -TotalCount $Count.Count -Properties $TableData.properties
42
} -Columns @(
43
New-UDTableColumn -Property 'name' -Sort -Filter -Export
44
New-UDTableColumn -Property 'host' -Sort -Filter -Export
45
) -Sort -Filter -Export -OnExport {
46
$Query = $Body | ConvertFrom-Json
47
48
<# Query will contain
49
filters: []
50
orderBy: undefined
51
orderDirection: ""
52
page: 0
53
pageSize: 5
54
properties: (5) ["dessert", "calories", "fat", "carbs", "protein"]
55
search: ""
56
totalCount: 0
57
allRows: true
58
#>
59
60
Invoke-DbaQuery -SqlInstance localhost\MSSQLSERVER -Database 'podcasts' -Query "SELECT * FROM shows" | ForEach-Object {
61
@{
62
name = $_.name
63
host = $_.host
64
}
65
}
66
}
67
}
Copied!

Customizing Export Options

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.
1
$Data = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
2
$Columns = @(
3
New-UDTableColumn -Property Name -Title "Service Name" -IncludeInExport
4
New-UDTableColumn -Property Status -Title Status
5
New-UDTableColumn -Property StartupType
6
New-UDTableColumn -Property StartType -IncludeInExport
7
)
8
New-UDTable -Id 'service_table' -Data $Data -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -Dense -Export -ExportOption "csv"
Copied!

Customizing Labels

You can use the -TextOption parameter along with the New-UDTableTextOption cmdlet to set text fields within the table.
1
$Data = @(
2
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
3
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
4
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
5
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
6
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
7
)
8
9
$Option = New-UDTableTextOption -Search "Search all these records"
10
11
New-UDTable -Data $Data -TextOption $Option -ShowSearch
Copied!

Refresh with a button

You can externally refresh a table by putting the table within a dynamic region and using Sync-UDElement.
This example creates a button to refresh the table.
1
New-UDDynamic -Id 'table' -Content {
2
$Data = Get-Service
3
New-UDTable -Data $Data -Paging
4
} -LoadingComponent {
5
"Loading"
6
}
7
8
New-UDButton -Text 'Refresh Table' -OnClick {
9
Sync-UDElement -Id 'table'
10
}
Copied!

API

New-UDTable

Creates a new table.
Name
Type
Description
Required
Id
String
The ID of the component. It defaults to a random GUID.
false
Title
String
The title to show at the top of the table's card.
false
Data
Object[]
The data to put into the table.
true
LoadData
Endpoint
When using dynamic tables, this script block is called. The $Body parameter will contain a hashtable the following options: filters: @() orderBy: string orderDirection: string page: int pageSize: int properties: @() search: string totalCount: int You can use these values to perform server-side processing, like SQL queries, to improve the performance of large grids. After processing the data with these values, output the data via Out-UDTableData.
true
Columns
Hashtable[]
Defines the columns to show within the table. Use New-UDTableColumn to define these columns. If this parameter isn't specified, the properties of the data that you pass in will become the columns.
false
Sort
SwitchParameter
Whether sorting is enabled in the table.
false
Filter
SwitchParameter
Whether filtering is enabled in the table.
false
Search
SwitchParameter
Whether search is enabled in the table.
false
Export
SwitchParameter
Whether exporting is enabled within the table.
false
Paging
SwitchParameter
Whether to enable paging.
false
PageSize
int
Number of items to show in a page by default. Defaults to 5.
false
PageSizeOptions
int[]
Page size options to show in the selector. Defaults to @(5, 10, 20)
false
Dense
SwitchParameter
Enables dense padding.
false
DefaultSortDirection
string
Sets the default sort direction for the table.
false
HideToggleAllRowsSelected
SwitchParameter
Disables the toggle all rows when using selection
false
DisableMultiSelect
SwitchParameter
Disables multiple selections
false
DisablePageSizeAll
SwitchParameter
Disables the ability to show all records in a paged table.
false

New-UDTableColumn

Defines column properties for a table.
Name
Type
Description
Required
Id
String
The ID of the component. It defaults to a random GUID.
false
Property
String
The property to select from the data for this column
true
Title
String
The title to display at the top of the column. Property name is used if not specified.
false
Render
ScriptBlock
A script block that is called when rendering this column. The $_ variable will contain the current row. Return any control from this scriptblock.
false
ShowSort
Switch
Include this column in sorting.
false
ShowFilter
Switch
Include a filter for this column.
false
FilterType
string
The type of filter to display. text, select, fuzzy, slider, range, date, number, autocomplete
false
Style
Hashtable
A CSS style applied to the column
false
Width
int
The width of the column in pixels
false
IncludeInSearch
Switch
Whether to include this column when searching.
false
IncludeInExport
Switch
Whether to include this column when exporting.
false
DefaultSortColumn
Switch
This column defines the default sorting when the table is loaded.
false
Align
string
The alignment of the data in the table.
false
Truncate
Switch
Whether to truncate the text in the column if it is longer than -Width
false
SortType
string
How to sort the data within the column
false
Hidden
SwitchParameter
Includes the column in an export but does not display it in the webpage. Available since 2.3.
false

Out-UDTableData

Returns data from the -LoadData parameter of New-UDTable.
Name
Type
Description
Required
Data
object
The data to display in the table
true
Page
int
The current page.
true
TotalCount
int
The total count of rows in the entire data set. This is not just what is passed to data.
true
Properties
string[]
Properties included in the data. Use $EventData.Properties.
true

New-UDTableTextOption

Allows for custom text in the table controls.
Name
Type
Description
Required
ExportAllCsv
string
Export all as CSV text
false
ExportCurrentViewCsv
string
Export Current View as CSV text
false
ExportAllXLSX
string
Export all as XLSX text
false
ExportCurrentViewXLSX
string
Export Current View as XLSX text
false
ExportAllPDF
string
Export all as PDF text
false
ExportCurrentViewPDF
string
Export Current View as PDF text
false
ExportAllJson
string
Export all as JSON text
false
ExportCurrentViewJson
string
Export Current View as JSON text
false
ExportFileName
string
File Name text
false
Search
string
Search {0} records... text
false
FilterSearch
string
Search {0} records... text
false
Last modified 28d ago