How to add row numbers in DataTable ?

[jjayaraman]

How to add row numbers in DataTable ?

I tried

Code: Select all

let-i="rowIndex" 

but not working

Code: Select all

                    <DataTable value={rows} paginator={true} rows={20} rowsPerPageOptions={[5, 10, 20, 50]} autoLayout={true} header={header} footer={footer} let-i="rowIndex">
                        <Column field="i" header="#" />
                        <Column field="paramCode" header="Code" sortable={true} />
                        <Column field="paramDesc" header="Description" sortable={true} />
                        <Column field="paramValue" header="Value" sortable={true} />
                        <Column header="Edit / Delete" body={this.actionTemplate} style={{ textAlign: 'center', width: '8em' }} />
                    </DataTable>

Thanks

[mert.sincan]

Please try;

Code: Select all

    this.onIndexTemplate = this.onIndexTemplate.bind(this);
    ...
    onIndexTemplate(data, props) {
        return props.rowIndex;
    }
    
    ...
    <DataTable value={this.state.cars} ...>
            <Column field="Index" header="" body={this.onIndexTemplate}/>
            ...

[jjayaraman]

Thanks it works

[mert.sincan]

Glad to hear, thanks a lot for the update!

Best Regards,

[kelwy]

Please try;

Code: Select all

    this.onIndexTemplate = this.onIndexTemplate.bind(this);
    ...
    onIndexTemplate(data, props) {
        return props.rowIndex;
    }
    
    ...
    <DataTable value={this.state.cars} ...>
            <Column field="Index" header="" body={this.onIndexTemplate}/>
            ...

How do i use this method with dynamic columns?

[nirav.vikani]

Hello,

I want to print row index in data table. Earlier it was working fine but new release of primereact its not working. I am using primreact 6.1.0. any solutions?

Code: Select all

 
 rowIndexTemplate = (rowData, props) => {
        let index = parseInt(props.rowIndex + 1);
        return (
            <React.Fragment>
                <span>{index}</span>
            </React.Fragment>
        );
    }
    

[mert.sincan]

Hello,

@nirav.vikani, I couldn't replicate it. Please try; https://codesandbox.io/s/reverent-tree- ... sicDemo.js

@kelwy please try; https://codesandbox.io/s/optimistic-jol ... micDemo.js

Best Regards,