DataTable / Column data converter

UI Components for React
Post Reply
Mic
Posts: 17
Joined: 27 Sep 2010, 15:59

13 Nov 2020, 09:04

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
Posts: 4484
Joined: 29 Jun 2013, 12:38

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,

Mic
Posts: 17
Joined: 27 Sep 2010, 15:59

20 Nov 2020, 11:07

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 :-)

Mic
Posts: 17
Joined: 27 Sep 2010, 15:59

25 Nov 2020, 10:58

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
Posts: 6
Joined: 01 Nov 2016, 09:05

01 Dec 2020, 12:14

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

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests