How can I render icon if my column, if I have condition?

I have a Primereact v9 ReactJS code

 <DataTable
                
                <Column field="status" header="Status"
                        style={{
                            maxWidth: '150px',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap'
                        }}
                        sortable>
                    {(field) => {
                        console.log(field)
                    }}
                </Column>
            </DataTable>

I want to check if field “status” contains numeric values, and render with status text an icon

I’ve tried to

<Column field="status" header="Статус"
                        style={{
                            maxWidth: '150px',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap'
                        }}
                        sortable>
                    {(field) => {
                        console.log(field)
                    }}
                </Column>

but nothing happened

To achieve what you’re looking for in PrimeReact’s , you’ll need to use a custom body template for the . This template will allow you to check if the status field contains numeric values and render content conditionally based on that.

This function will receive the row data as a parameter, and you can then check the status field of this data. If it contains numeric values, you can render the status text along with an icon.

import React from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

// ... other imports if necessary

const MyComponent = () => {

    // Sample data for demonstration
    const data = [
        { status: '123' }, // assuming numeric value as a string
        { status: 'Active' },
        // ... other rows
    ];

    // Custom body template
    const statusBodyTemplate = (rowData) => {
        // Check if status is numeric
        if (/\d/.test(rowData.status)) {
            // Render status with icon for numeric values
            return (
                <div>
                    {/* Assuming you want to display the status value */}
                    {rowData.status}
                    {/* Replace with your icon component */}
                    <i className="pi pi-check" style={{ marginLeft: '5px' }}></i>
                </div>
            );
        } else {
            // Render status as is for non-numeric values
            return <div>{rowData.status}</div>;
        }
    };

    return (
        <DataTable value={data}>
            <Column
                field="status"
                header="Status"
                style={{
                    maxWidth: '150px',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                }}
                body={statusBodyTemplate}
                sortable
            />
            {/* ... other columns */}
        </DataTable>
    );
};

export default MyComponent;