How can I get the callback function to work in addFilter from @wordpress/hooks when customizing WooCommerce analytics reports tables?

Question

I'm working on a woocommerce and try to customize the Analytics reports tables for our clients. I'v followed https://developer.woocommerce.com/2021/02/04/adding-columns-to-analytics-reports-and-csv-downloads/ but i got an issue on the javascript file.

At the end of the file the addFilter is called but don't do anything. the Callback function is never called.

Here's the code :

import { addFilter } from '@wordpress/hooks';

    console.log(addFilter)

function addCustomColumnsToWCReportTable( reportTableData ) {

    console.log("i'm in !!")
    
    const { endpoint, items } = reportTableData;
        if ( 'orders' !== endpoint ) {
            return reportTableData;
    
        }
    
    reportTableData.headers = [
        ...reportTableData.headers,
        {
            label: 'Order VAT Rate',
            key: 'vat_rate',
        },
    
    ];
    reportTableData.rows = reportTableData.rows.map( ( row, index ) => {
        const item = items.data[ index ];
        const newRow = [
            ...row,
            {
                display: item.vat_rate,
                value: item.vat_rate,
            },
        ];
        return newRow;
    } );
    
    return reportTableData;

}
addFilter( 'woocommerce_admin_report_table','custom_reports', addCustomColumnsToWCReportTable, 10 );

I have the addFilter in console.log so he's supposed to work

No error on the console but the console.log() in the callback function is not here.

I also tried to change the hooks but it's the same.

I tried different ways to write filters i found on internet but it's not really good documented

the only thing i have in the console ( addFilter exist) :

ƒ addHook(hookName, namespace, callback) {
    let priority = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 10;
    const hooksStore = hooks[storeKey];

    if (!(0,_validateHookN…

Answer 1

You need to make the "wp-hooks" script a dependency when you include your js file:

add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

function my_admin_scripts() {
   wp_enqueue_script( 'my-reports', 'path/to/script/my-reports.js', array('wp-hooks') );
}

Then modify your code as following (add const definition on top - no need to include '@wordpress/hooks' anymore because of the dependency):

const { addFilter } = wp.hooks;
function addCustomColumnsToWCReportTable( reportTableData ) {

    console.log("i'm in !!")
    
    const { endpoint, items } = reportTableData;
        if ( 'orders' !== endpoint ) {
            return reportTableData;
    
        }
    
    reportTableData.headers = [
        ...reportTableData.headers,
        {
            label: 'Order VAT Rate',
            key: 'vat_rate',
        },
    
    ];
    reportTableData.rows = reportTableData.rows.map( ( row, index ) => {
        const item = items.data[ index ];
        const newRow = [
            ...row,
            {
                display: item.vat_rate,
                value: item.vat_rate,
            },
        ];
        return newRow;
    } );
    
    return reportTableData;

}
addFilter( 'woocommerce_admin_report_table','custom_reports', addCustomColumnsToWCReportTable, 10 );

Tested and works :)