dataTable export filtered data

[lollobit]

Hello,
I have created a DataTable with various filters. Is it possible to retrieve the result of the filtering (essentially the result of the processedData() function)? I would need it to export to formats other than CSV.
I cannot use onValueChange because in some cases, the value attribute of the DataTable is modified, the filter is applied correctly to the data, but in these cases, the onValueChange event does not trigger.
Could you give me some advice?

Thank you and best regards

[habubey]

Hi there,
PDF and XLS exports can be enabled using third-party libraries like jsPDF and xlsx.
You can refer to the example here: https://primereact.org/datatable/#export

If this does not assist you, kindly provide a reproducer to help you more

[melloware]

@lollobit this should answer your question: primefaces/primereact#4849

[lollobit]

Thanks for your answer.
I cannot use onValueChange because in some cases, I modify the value attribute of the dataTable. In these cases, the set filters are correctly applied to the new data in the value attribute, and the dataTable renders the data correctly. However, in these cases, the function props.onValueChange(processedData()) is not invoked, and I would have no way to apply the filter to the new data.

[lollobit]

I wrote a simple example.
If you select age grather than 30 then press the change button the total value doesn't update
beacause props.onValueChange(processedData()) is not invoked

there is a way to read processedData() function?

import React, { useContext, useState, useEffect } from 'react';
import { DataTable } from 'primereact/datatable'
import { Column } from 'primereact/column'
import { Button } from 'primereact/button'
import { FilterMatchMode, FilterOperator } from "primereact/api";

export default function BasicFilterDemo() {
const data1 = [
{ id:"1", name: "John", surname: "Doe", age: 30 },
{ id:"2", name: "Jane", surname: "Smith", age: 25 },
{ id:"3", name: "Bob", surname: "Johnson", age: 35 },
];
const data2 = [
{ id:"4", name: "Peter", surname: "Doe", age: 30 },
{ id:"5", name: "Bill", surname: "Smith", age: 25 },
{ id:"6", name: "Ted", surname: "Johnson", age: 35 },
{ id:"7", name: "Luu", surname: "Johnson", age: 35 },
];

const [customers, setCustomers] = useState(null);
const [dataNum, setDataNum] = useState(null);
const [filteredData, setFilteredData] = useState(null);
const [total, setTotal] = useState(0);

const [filters, setFilters] = useState({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
    surname: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
    age: { value: null, matchMode: FilterMatchMode.GREATER_THAN  },
});

useEffect(() => {
setCustomers(data1) 
setDataNum(1)

}, []);

const onFilterDo = (data) => {
setFilteredData(data)
setTotal(data.length);
console.log("total=" +data.length)
}

return (
    <div className="card">
        <DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" 
	 emptyMessage="No customers found." onValueChange={onFilterDo}>
            <Column field="id" header="id" filter filterPlaceholder="Search by id" style={{ minWidth: '12rem' }} />
            <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
            <Column field="SurName" header="SurName" filter filterPlaceholder="Search by SurName" style={{ minWidth: '12rem' }} />
            <Column field="age" header="age" filter filterPlaceholder="Search by age" dataType='numeric' style={{ minWidth: '12rem' }} />
        </DataTable>
        <Button label={'CHANGE DATA'}  className='p-button-primary ml-2'
      onClick={() => {
        if (dataNum == 1) {
            setDataNum(2);
            setCustomers(data2);
        } else {
            setDataNum(1);
            setCustomers(data1);
        }
      } }
    />
    <table>
        <td>Total = {total} </td>
    </table>
    </div>

);

}

[melloware]

It doesn't look like it, it looks like that would need to be exposed on the datatable ref as a value?

[lollobit]

How did you correct the problem? In which version can the fix be evaluated?
Thanks in advance for the reply.