Page 1 of 1

DataTable / Column data converter

Posted: 13 Nov 2020, 09:04
by Mic
Hi...

Currently I'm using the body property to convert data into a specific format, e.g. changing a datetime "2020-11-13 11:12:13" to "13.111.2020 11:12:13". The filter is using the base data and not the converted one. It would be nice if Column would support a converter function, e.g. converter="dateAndTimeConverter", which could also be used for the filter.

Best regards,
Mic

Re: DataTable / Column data converter

Posted: 14 Nov 2020, 00:40
by mert.sincan
Hi,

I think you can use filterFunction property for this issue. Please see our demo;
https://primefaces.org/primereact/showc ... ble/filter (filterDate method)

Best Regards,

Re: DataTable / Column data converter

Posted: 20 Nov 2020, 11:07
by Mic
mert.sincan wrote:
14 Nov 2020, 00:40
Hi,

I think you can use filterFunction property for this issue. Please see our demo;
https://primefaces.org/primereact/showc ... ble/filter (filterDate method)

Best Regards,
The datetime was only an example. Another example would be amount values (w/o currency), which should be shown localized, e.g. "10,50 EUR", but the real value is "10.5". In this case the user can only enter "10.5" instead of the "10,5" to find it.

If we have the option to define a converter (like in PrimeFaces), the filter (maybe also sort), could use it and there is no need to define a filterFunction for every converted value. It's only a suggestion for an easier handling :-)

Re: DataTable / Column data converter

Posted: 25 Nov 2020, 10:58
by Mic
Hi...

could you please give me a simple example how I could handle values in different formats in a datatable? Here a simple page :

Code: Select all

import React, { Component, useState } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { InputText } from 'primereact/inputtext';

export default function Test(props) {
    const [state, setState] = useState([]);
    const [oldRows, setOldRows] = React.useState({});

    function onEditorNumberChange(userKey, props, value) {
        let updatedData = [...props.value];
        updatedData[props.rowIndex][props.field] = value;;
        setState({ [`${userKey}`]: updatedData });
    }
    function inputNumberEditor(userKey, props, field) {
        return <InputText type="text" value={props.rowData[field]} onChange={(e) => onEditorNumberChange(userKey, props, e.target.value)} />;
    }
    function numberEditor(userKey, props) {
        return inputNumberEditor(userKey, props, 'Number');
    }

    function onRowEditInit(event) {
        oldRows[event.index] = JSON.parse(JSON.stringify(event.data));  // Clone
    }
    function onRowEditCancel(event) {
        event.data.Number = oldRows[event.index].Number;
    }
    function onRowEditSave(event) {
        console.log('save..');
    }

    return (
        <>
            <DataTable id="dtLogs" value={props.data} emptyMessage="No data found." sortField="ID" sortOrder={1}
                editMode="row"
                onRowEditInit={onRowEditInit} onRowEditCancel={onRowEditCancel} onRowEditSave={onRowEditSave}
            >
                <Column field="ID" header="ID" sortable ></Column>
                <Column field="DateTime" header="Fmt: dd.mm.yyyy hh:MM:ss" filter filterPlaceholder='Enter 20.11.2019' sortable ></Column>
                <Column field="Number" header='Fmt: #.###,##' sortable filter filterPlaceholder='Enter 1234,5' editor={(props) => numberEditor('data', props)} ></Column>
                <Column rowEditor className="p-column-edit" ></Column>
            </DataTable>
        </>
    );
}

export async function getStaticProps(context) {
    const data = [
        { ID: 1, DateTime: '2019-11-20 10:34:28.690', Number: 1234.567 },
        { ID: 2, DateTime: '2019-11-20 10:34:28.690', Number: 2345.6 },
        { ID: 3, DateTime: '2019-11-20 10:34:28.690', Number: 3456 },
    ];
    return {
        props: { data }
    }
}

Many thanks in advance!

Best regards,
Mic

Re: DataTable / Column data converter

Posted: 01 Dec 2020, 12:14
by njain
Hello Mic,

I have a similar query posted in viewtopic.php?f=57&t=64243&sid=6e4e9e37 ... 3461c714b9

Please do share inputs if you find a solution.

Best Regards
Nitin