DateTime API in React table

[dave@kato-consulting.com]

Hi,
I’m trying to do a custom date format in a Table column. How do I do that in React? I’m trying the code below, but get the error “Smart is not defined”.

Is there an NPM package for Smart.utilities? If not, how would I reference the smart .js scripts?

    const columns = [
    {
        label: ‘Appointment’,
        dataField: ‘Appointment’,
        //dataType: ‘date’,
        formatFunction: function (settings) {
            const formatedDate = new Smart.Utilities.DateTime(settings.value).toString(‘MM/dd/yyyy ‘);
            settings.template = <div> ${formatedDate}</div>
        }
    },

Thank you,
Dave Petersen

[svetoslav_borislavov]

Hi,

You can import Smart and use it this way:
import { Grid, Smart } from ‘smart-webcomponents-react/grid’;

I hope this helps, if not, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 1 year, 11 months ago by svetoslav_borislavov.
• This reply was modified 1 year, 11 months ago by svetoslav_borislavov.

[dave@kato-consulting.com]

That worked, thank you. My other problem now is the function is not returning the formatted date. Here is my updated code:

import { Table, Smart } from ‘smart-webcomponents-react/table’;

…

const columns = [
{
label: ‘First name’,
dataField: ‘FirstName’,
dataType: ‘string’
},
{
label: ‘Last Name’,
dataField: ‘LastName’,
dataType: ‘string’
},
{
label: ‘Appointment’,
dataField: ‘Appointment’,
//dataType: ‘date’,
formatFunction: function (settings) {
const formatedDate = new Smart.Utilities.DateTime(settings.value).toString(‘MM/dd/yyyy ‘);
console.log(formatedDate);
settings.template = <div>${formatedDate}</div>
}
},

In the table, the date displays as: 2022-12-01T15:10:34.433Z
In the console it logs properly as: 12/02/2022.

It should display in the table as 12/02/2022, what am I doing wrong? Do I need to return something from formatFunction? I’m not setting a dataType for the Appointment column.

The data is coming in from SQL:
SELECT
FirstName,
LastName,
getdate() AS Appointment
FROM Person

[svetoslav_borislavov]

Hi,

You should change the settings.value in order to display the correct format.
{
label: ‘Date’,
dataField: ‘date’,
formatFunction: function (settings) {

const formatedDate = new Smart.Utilities
.DateTime(settings.value)
.toString(‘MM/dd/yyyy’);

settings.value = formatedDate;</div>

}
}

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 1 year, 11 months ago by svetoslav_borislavov.
• This reply was modified 1 year, 11 months ago by svetoslav_borislavov.

[dave@kato-consulting.com]

That worked, thank you!
Dave

[Author]

Posts