Reply To: Blazor Component Table Column with DateTime

[ivanpeevski]

Hi Brandon,

You can set a formatting function using JSInterop. Add a callback to the OnReady event. When the TableReady method is fired call a JavaScript function that will correctly set the format. Here is an example:

@inject IJSRuntime JS

<Table Id=”my-table” DataSource=”@Clients” Columns=”@tableColumns” OnReady=”TableReady”></Table>

@code {
Table table;

TableColumn[] tableColumns = new TableColumn[]
{
new TableColumn()
{
Label= “Name”,
DataField= “Name”,
},
new TableColumn()
{
Label= “Last Order”,
DataField= “LastOrder”,
DataType= TableColumnDataType.Date
}
};

private void TableReady(Table table)
{
JS.InvokeVoidAsync(“setDateFormat”, “my-table”, “LastOrder”, “dd/MM/yyyy HH:mm”);
}

//….

}

Then in your App.razor / Host.cshtml file create the function:

<script>
window.setDateFormat = (tableId, dataField, format) => {
let table = document.querySelector(‘#’ + tableId);
if (table) {
table.setColumnProperty(dataField, “formatFunction”, function (settings) {
const formattedValue = new window.Smart.Utilities.DateTime(settings.value).toString(format);
settings.value = formattedValue
});
}
}
</script>

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/