Skip to content

fix(tables): update ColumnHighlighter + add DateTime example #514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PrzemyslawKlys merged 4 commits into from
Dec 14, 2025
Merged

fix(tables): update ColumnHighlighter + add DateTime example #514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f5492a
fix(tables): update ColumnHighlighter + add DateTime example
PrzemyslawKlys Dec 14, 2025
f4fbe7f
chore: regenerate psd1
github-actions[bot] Dec 14, 2025
07b3753
fix(DataTablesConditions): update ColumnHighlighter to HTMLExtensions…
PrzemyslawKlys Dec 14, 2025
82022f2
Merge branch 'master' into fix/htmlextensions-columnhighlighter-v0.1.10
PrzemyslawKlys Dec 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions Examples/Example-Table/Example-TableDateTimeConditionsFormats.ps1
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
Import-Module .\PSWriteHTML.psd1 -Force

# Demonstrates date comparisons with formats commonly used in PowerShell/.NET output,
# and verifies both HTML and JavaScript DataStore modes.

$DateDeleteCheck = Get-Date -Year 2025 -Month 1 -Day 5 -Hour 0 -Minute 0 -Second 0

$AdminsDisabled = @(
[pscustomobject]@{ User = 'Before threshold'; RefreshTokenDate = $DateDeleteCheck.AddDays(-1) }
[pscustomobject]@{ User = 'Equal to threshold'; RefreshTokenDate = $DateDeleteCheck }
[pscustomobject]@{ User = 'After threshold'; RefreshTokenDate = $DateDeleteCheck.AddDays(1) }
[pscustomobject]@{ User = 'Empty / null'; RefreshTokenDate = $null }
)

New-HTML {
New-HTMLSection -HeaderText 'HTML DataStore (dd/MM/yyyy)' {
New-HTMLTableOption -DataStore HTML -DateTimeFormat 'dd/MM/yyyy HH:mm:ss'
New-HTMLTable -DataTable $AdminsDisabled -HideFooter -DisablePaging -DateTimeSortingFormat 'DD/MM/YYYY HH:mm:ss' {
New-HTMLTableHeader -Title 'HTML: Highlight RefreshTokenDate < threshold'
New-HTMLTableCondition -Name 'RefreshTokenDate' -ComparisonType 'date' -Operator lt -Value $DateDeleteCheck -BackgroundColor Red -Color Black -FailBackgroundColor LightGreen -FailColor Black -DateTimeFormat 'dd/MM/YYYY HH:mm:ss'
}
}

New-HTMLSection -HeaderText 'JavaScript DataStore (dd/MM/yyyy)' {
New-HTMLTableOption -DataStore JavaScript -DateTimeFormat 'dd/MM/yyyy HH:mm:ss'
New-HTMLTable -DataTable $AdminsDisabled -HideFooter -DisablePaging -DateTimeSortingFormat 'DD/MM/YYYY HH:mm:ss' {
New-HTMLTableHeader -Title 'JavaScript: Highlight RefreshTokenDate < threshold'
New-HTMLTableCondition -Name 'RefreshTokenDate' -ComparisonType 'date' -Operator lt -Value $DateDeleteCheck -BackgroundColor Red -Color Black -FailBackgroundColor LightGreen -FailColor Black -DateTimeFormat 'dd/MM/YYYY HH:mm:ss'
Comment on lines +25 to +28
Copy link

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same inconsistency in date format case conventions as lines 17-20. The New-HTMLTableOption uses lowercase tokens (dd/MM/yyyy) while New-HTMLTable and New-HTMLTableCondition use uppercase tokens (DD/MM/YYYY). Consider standardizing on one convention for clarity.

Copilot uses AI. Check for mistakes.
Comment on lines +16 to +28
Copy link

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an inconsistency in date format case conventions. The New-HTMLTableOption uses lowercase format tokens (dd/MM/yyyy) while New-HTMLTable's DateTimeSortingFormat and New-HTMLTableCondition's DateTimeFormat use uppercase tokens (DD/MM/YYYY). While the JavaScript code handles both through the dotNetToMomentFormat converter, this inconsistency can be confusing for users. Consider standardizing on one convention throughout the example, preferably using the Moment.js convention (uppercase DD/MM/YYYY) since that's what the sorting format requires.

Suggested change
New-HTMLSection -HeaderText 'HTML DataStore (dd/MM/yyyy)' {
New-HTMLTableOption -DataStore HTML -DateTimeFormat 'dd/MM/yyyy HH:mm:ss'
New-HTMLTable -DataTable $AdminsDisabled -HideFooter -DisablePaging -DateTimeSortingFormat 'DD/MM/YYYY HH:mm:ss' {
New-HTMLTableHeader -Title 'HTML: Highlight RefreshTokenDate < threshold'
New-HTMLTableCondition -Name 'RefreshTokenDate' -ComparisonType 'date' -Operator lt -Value $DateDeleteCheck -BackgroundColor Red -Color Black -FailBackgroundColor LightGreen -FailColor Black -DateTimeFormat 'dd/MM/YYYY HH:mm:ss'
}
}
New-HTMLSection -HeaderText 'JavaScript DataStore (dd/MM/yyyy)' {
New-HTMLTableOption -DataStore JavaScript -DateTimeFormat 'dd/MM/yyyy HH:mm:ss'
New-HTMLTable -DataTable $AdminsDisabled -HideFooter -DisablePaging -DateTimeSortingFormat 'DD/MM/YYYY HH:mm:ss' {
New-HTMLTableHeader -Title 'JavaScript: Highlight RefreshTokenDate < threshold'
New-HTMLTableCondition -Name 'RefreshTokenDate' -ComparisonType 'date' -Operator lt -Value $DateDeleteCheck -BackgroundColor Red -Color Black -FailBackgroundColor LightGreen -FailColor Black -DateTimeFormat 'dd/MM/YYYY HH:mm:ss'
New-HTMLSection -HeaderText 'HTML DataStore (DD/MM/YYYY)' {
New-HTMLTableOption -DataStore HTML -DateTimeFormat 'DD/MM/YYYY HH:mm:ss'
New-HTMLTable -DataTable $AdminsDisabled -HideFooter -DisablePaging -DateTimeSortingFormat 'DD/MM/YYYY HH:mm:ss' {
New-HTMLTableHeader -Title 'HTML: Highlight RefreshTokenDate < threshold'
New-HTMLTableCondition -Name 'RefreshTokenDate' -ComparisonType 'date' -Operator lt -Value $DateDeleteCheck -BackgroundColor Red -Color Black -FailBackgroundColor LightGreen -FailColor Black -DateTimeFormat 'DD/MM/YYYY HH:mm:ss'
}
}
New-HTMLSection -HeaderText 'JavaScript DataStore (DD/MM/YYYY)' {
New-HTMLTableOption -DataStore JavaScript -DateTimeFormat 'DD/MM/YYYY HH:mm:ss'
New-HTMLTable -DataTable $AdminsDisabled -HideFooter -DisablePaging -DateTimeSortingFormat 'DD/MM/YYYY HH:mm:ss' {
New-HTMLTableHeader -Title 'JavaScript: Highlight RefreshTokenDate < threshold'
New-HTMLTableCondition -Name 'RefreshTokenDate' -ComparisonType 'date' -Operator lt -Value $DateDeleteCheck -BackgroundColor Red -Color Black -FailBackgroundColor LightGreen -FailColor Black -DateTimeFormat 'DD/MM/YYYY HH:mm:ss'

Copilot uses AI. Check for mistakes.
}
}
} -ShowHTML -FilePath $PSScriptRoot\Example-TableDateTimeConditionsFormats.html -Online
11 changes: 6 additions & 5 deletions PSWriteHTML.psd1
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,20 @@
Description = 'PSWriteHTML is PowerShell Module to generate beautiful HTML reports, pages, emails without any knowledge of HTML, CSS or JavaScript. To get started basics PowerShell knowledge is required.'
FunctionsToExport = @('Add-HTML', 'Add-HTMLScript', 'Add-HTMLStyle', 'ConvertTo-CascadingStyleSheets', 'Email', 'EmailAttachment', 'EmailBCC', 'EmailBody', 'EmailCC', 'EmailFrom', 'EmailHeader', 'EmailLayout', 'EmailLayoutColumn', 'EmailLayoutRow', 'EmailListItem', 'EmailOptions', 'EmailReplyTo', 'EmailServer', 'EmailSubject', 'EmailTo', 'Enable-HTMLFeature', 'New-AccordionItem', 'New-CalendarEvent', 'New-CarouselSlide', 'New-ChartAxisX', 'New-ChartAxisY', 'New-ChartBar', 'New-ChartBarOptions', 'New-ChartDataLabel', 'New-ChartDesign', 'New-ChartDonut', 'New-ChartEvent', 'New-ChartGrid', 'New-ChartLegend', 'New-ChartLine', 'New-ChartMarker', 'New-ChartPie', 'New-ChartRadial', 'New-ChartRadialOptions', 'New-ChartSpark', 'New-ChartTheme', 'New-ChartTimeLine', 'New-ChartToolbar', 'New-ChartToolTip', 'New-DiagramEvent', 'New-DiagramLink', 'New-DiagramNode', 'New-DiagramOptionsInteraction', 'New-DiagramOptionsLayout', 'New-DiagramOptionsLinks', 'New-DiagramOptionsManipulation', 'New-DiagramOptionsNodes', 'New-DiagramOptionsPhysics', 'New-GageSector', 'New-HierarchicalTreeNode', 'New-HTML', 'New-HTMLAccordion', 'New-HTMLAnchor', 'New-HTMLCalendar', 'New-HTMLCarousel', 'New-HTMLCarouselStyle', 'New-HTMLChart', 'New-HTMLCodeBlock', 'New-HTMLContainer', 'New-HTMLDate', 'New-HTMLDiagram', 'New-HTMLFontIcon', 'New-HTMLFooter', 'New-HTMLFrame', 'New-HTMLGage', 'New-HTMLHeader', 'New-HTMLHeading', 'New-HTMLHierarchicalTree', 'New-HTMLHorizontalLine', 'New-HTMLImage', 'New-HTMLInfoCard', 'New-HTMLList', 'New-HTMLListItem', 'New-HTMLLogo', 'New-HTMLMain', 'New-HTMLMap', 'New-HTMLMarkdown', 'New-HTMLMermeidChart', 'New-HTMLNav', 'New-HTMLNavFloat', 'New-HTMLNavTop', 'New-HTMLOrgChart', 'New-HTMLPage', 'New-HTMLPanel', 'New-HTMLPanelStyle', 'New-HTMLQRCode', 'New-HTMLSection', 'New-HTMLSectionScrolling', 'New-HTMLSectionScrollingItem', 'New-HTMLSectionStyle', 'New-HTMLSpanStyle', 'New-HTMLStatus', 'New-HTMLStatusItem', 'New-HTMLSummary', 'New-HTMLSummaryItem', 'New-HTMLSummaryItemData', 'New-HTMLTab', 'New-HTMLTable', 'New-HTMLTableOption', 'New-HTMLTableStyle', 'New-HTMLTabPanel', 'New-HTMLTabPanelColor', 'New-HTMLTabStyle', 'New-HTMLTag', 'New-HTMLText', 'New-HTMLTextBox', 'New-HTMLTimeline', 'New-HTMLTimelineItem', 'New-HTMLToast', 'New-HTMLTree', 'New-HTMLTreeChildCounter', 'New-HTMLTreeNode', 'New-HTMLWinBox', 'New-HTMLWizard', 'New-HTMLWizardColor', 'New-HTMLWizardStep', 'New-MapArea', 'New-MapLegendOption', 'New-MapLegendSlice', 'New-MapPlot', 'New-NavFloatWidget', 'New-NavFloatWidgetItem', 'New-NavItem', 'New-NavLink', 'New-NavTopMenu', 'New-OrgChartNode', 'New-TableAlphabetSearch', 'New-TableButtonColumnVisibility', 'New-TableButtonCopy', 'New-TableButtonCSV', 'New-TableButtonExcel', 'New-TableButtonPageLength', 'New-TableButtonPDF', 'New-TableButtonPrint', 'New-TableButtonSearchBuilder', 'New-TableColumnOption', 'New-TableCondition', 'New-TableConditionGroup', 'New-TableContent', 'New-TableEvent', 'New-TableHeader', 'New-TableLanguage', 'New-TablePercentageBar', 'New-TablePercentageBarCondition', 'New-TableReplace', 'New-TableRowGrouping', 'Out-HtmlView', 'Save-HTML')
GUID = 'a7bdf640-f5cb-4acf-9de0-365b322d245c'
ModuleVersion = '1.39.0'
ModuleVersion = '1.40.0'
PowerShellVersion = '5.1'
PrivateData = @{
PSData = @{
IconUri = 'https://evotec.xyz/wp-content/uploads/2018/12/PSWriteHTML.png'
ProjectUri = 'https://github.com/EvotecIT/PSWriteHTML'
Tags = @('HTML', 'WWW', 'JavaScript', 'CSS', 'Reports', 'Reporting', 'Windows', 'MacOS', 'Linux')
IconUri = 'https://evotec.xyz/wp-content/uploads/2018/12/PSWriteHTML.png'
ProjectUri = 'https://github.com/EvotecIT/PSWriteHTML'
RequireLicenseAcceptance = $false
Tags = @('HTML', 'WWW', 'JavaScript', 'CSS', 'Reports', 'Reporting', 'Windows', 'MacOS', 'Linux')
}
}
RequiredModules = @(@{
Guid = 'ee272aa8-baaa-4edf-9f45-b6d6f7d844fe'
ModuleName = 'PSSharedGoods'
ModuleVersion = '0.0.310'
ModuleVersion = '0.0.312'
})
RootModule = 'PSWriteHTML.psm1'
}
4 changes: 2 additions & 2 deletions Private/Parameters.Configuration.ps1
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -962,7 +962,7 @@
Comment = 'DataTables Conditions'
Header = @{
JsLink = @(
"https://cdn.jsdelivr.net/npm/@evotecit/[email protected].2/dist/datatables.columnHighlighter.js"
"https://cdn.jsdelivr.net/npm/@evotecit/[email protected].12/dist/datatables.columnHighlighter.js"
)
JS = @(
"$PSScriptRoot\..\Resources\JS\dataTables.columnHighlighter.js"
Expand Down Expand Up @@ -2202,4 +2202,4 @@
# 'Mermaid'
# )
# Import-Module "C:\Support\GitHub\PSWriteHTML.Helper\PSWriteHTML.Helper.psd1" -Force
# Save-HTMLResource -Configuration $Configuration -Keys $Keys -PathToSave 'C:\Support\GitHub\PSWriteHTML\Resources\CSS' -Verbose
# Save-HTMLResource -Configuration $Configuration -Keys $Keys -PathToSave 'C:\Support\GitHub\PSWriteHTML\Resources\CSS' -Verbose
Loading
Loading