DataTable / Column data converter

[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

[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,

[Mic]

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

[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

[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