How to format column field numbers

[Andy]

Hello I have some integers in seconds which I need to turn into HH:MM:SS.

My function looks like this:

const decimalToTime = seconds => {
  return new Date(seconds * 1000).toISOString().substr(11, 8)
}

I just don't know how to format data in the columns

<ColumnDirective
  headerText="Start"
  field="seconds"
  width="45"
  allowEditing={false}
/>

How do I use my function on this column?

[Pavithra Subramaniyam]

Hi Andy,

Thanks for contacting Syncfusion support.

By default, to apply date formatting to a column, the values must be a date. From your code, we suspect that the type for the seconds column is decimal. If yes, you can use the column “valueAccessor” property to set the format in a custom way. But it is only for display purposes. The other data actions for this column like filtering, sorting, and grouping will be done based on the original decimal value only. It cannot be filtered, grouped, edit as a date column.
Please refer to the below code example, documentation, and sample link for more information.

<ColumnDirective field="Seconds" headerText="Date" valueAccessor={this.valueAccess} width="150"></ColumnDirective>

 

valueAccess(field, data, column) {

  return new Date(data[field] * 1000).toISOString().substr(11, 8);

}

 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/columns/#valueaccessor

Sample                : https://stackblitz.com/edit/react-r6ejq3?file=index.js

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Andy]

Hey Pavithra, thanks for your response.

So the main issue I have is the documentation is written using Classes, but that is now mostly an outdated use case in React 17. 

Can you provide an example using this valueAccessor using Functions instead of Classes?

[Pavithra Subramaniyam]

Hi Andy,

Based on your requirement we have prepared a sample with functional react component. Please refer to the below code example and sample link for more information.

function Home() {

  const valueAccess = (field, data, column) => {

    return new Date(data[field] * 1000).toISOString().substr(11, 8);

  };

 

  return (

    <div>

      <GridComponent dataSource={data}>

        <ColumnsDirective>

          .  .  .

          <ColumnDirective

            field="Seconds"

            headerText="Date"

            valueAccessor={valueAccess}

            width="150"

          ></ColumnDirective>

        </ColumnsDirective>

      </GridComponent>

    </div>

  );

}

 

render(<Home />, document.getElementById('sample'));

 

Sample: https://stackblitz.com/edit/react-hriiqu?file=index.js

Regards,

Pavithra S

[Andy]

Thanks Pavithra this worked!

[Pavithra Subramaniyam]

Hi Andy,

Welcome! We are happy to hear that the provided solution worked. Please get back to us if you need further assistance.

Regards,

Pavithra S