Add MultiSelect option and documentation to New-PodeWebTable - #499 & #630

[BirkFoste]

Description of the Change

This pull request adds multi-select support to New-PodeWebTable, allowing users to select multiple rows in a table and perform actions on the selected items. The main changes include updates to both the PowerShell and JavaScript code to enable, handle, and expose multi-selection functionality, as well as an example demonstrating how to use it.

Multi-select table support:

• Added a new -MultiSelect switch parameter to New-PodeWebTable, which enables multi-row selection in tables.
• Updated the table rendering logic in templates.js to add checkboxes for row selection, a "select all" checkbox in the table header, and the necessary event handlers for managing selection state.

JavaScript API and UX improvements:

• Implemented getSelection() and updateSelectAllState() methods to retrieve selected row IDs and manage the "select all" checkbox state.
• Modified the export and button action logic so that, when multi-select is enabled, selected row IDs are sent to the server as a comma-separated list.

Example usage:

• Added a new example in examples/tables.ps1 showing a multi-select process table with a "Stop Selected" button and modal, demonstrating how to act on multiple selected items.

$multiTable = New-PodeWebTable `
        -Name 'MultiSelect' `
        -PageSize 4 `
        -Paginate `
        -Filter `
        -SimpleFilter `
        -Compact `
        -DataColumn 'ID' `
        -MultiSelect `
        -ScriptBlock {
        $allProcesses = @(Get-Process | ForEach-Object {
                [ordered]@{
                    Name       = $_.Name
                    ID         = $_.Id
                    WorkingSet = $_.WorkingSet
                    CPU        = $_.CPU
                }
            })

        $totalCount = $allProcesses.Count
        $pageIndex = [int]$WebEvent.Data.PageIndex
        $pageSize = [int]$WebEvent.Data.PageSize
        $processes = $allProcesses[(($pageIndex - 1) * $pageSize) .. (($pageIndex * $pageSize) - 1)]

        $processes | Update-PodeWebTable -Name $ElementData.Name -PageIndex $pageIndex -TotalItemCount $totalCount
    } `
        -Columns @(
        Initialize-PodeWebTableColumn -Key 'Name'
        Initialize-PodeWebTableColumn -Key 'ID'
        Initialize-PodeWebTableColumn -Key 'WorkingSet' -Name 'Memory'
        Initialize-PodeWebTableColumn -Key 'CPU' -Hide
    )

    $multiTable | Add-PodeWebTableButton -Name 'StopSelected' -DisplayName 'Stop Selected' -Icon 'delete' -WithText -ScriptBlock {
        $selected = $WebEvent.Data['Selection'] -split ','
        if ($selected.Length -eq 0) {
            Show-PodeWebToast -Message 'No processes selected' -Title 'MultiSelect' -Duration 3000
        }
        else {
            Show-PodeWebModal -Name 'StopSelected' -Actions @(
                Update-PodeWebTextbox -Name 'SelectedProcesses' -Value ($selected -join "`n")
            )
        }
    }

    $stopModal = New-PodeWebModal -Name 'StopSelected' -DisplayName 'Stop Selected Processes' -Size 'Medium' -AsForm -Content @(
        New-PodeWebTextbox -Name 'SelectedProcesses' -DisplayName 'Selected Process IDs' -Multiline -ReadOnly
    ) -ScriptBlock {
        $ids = ($WebEvent.Data['SelectedProcesses'] -split "`n") | Where-Object { ![string]::IsNullOrWhiteSpace($_) }
        foreach ($id in $ids) {
            Stop-Process -Id ([int]$id) -Force -ErrorAction SilentlyContinue -WhatIf
        }
        Show-PodeWebToast -Message "Stopped $($ids.Count) process(es)" -Title 'Done' -Duration 3000
        Hide-PodeWebModal
    }

Related Issue

• Enable support for multi-select rows on Tables #499
• Checkbox on each Table Row? #630