Add filter to primeReact Table

Viewed 106

im new in node and react. I must add filters to search the columns, my problem is that I am a newbie with react. So how can I integrate this functionality?

This is the original page

enter image description here

and i have to add this.

enter image description here

So how can i filter by name?

            <div>
                <div className="p-grid crud-demo">
                    <div className="p-col-12">
                        <div className="card">
                            <DataTable value={allUserActive} header={header} responsiveLayout="scroll" paginator rows={25} rowsPerPageOptions={[25, 50, 75]} filterDisplay="row">
                                <Column field="name" header="Nombre Usuario"></Column>
                                <Column field="group.name" header="Grupo" showFilterMenu={false} filter filterElement={statusRowFilterTemplate}></Column>
                                <Column field="lastDate" header="Hora activo" body={lastDateBodyTemplate}></Column>
                                <Column field="active" header="Estado" body={activeBodyTemplate}></Column>
                                <Column field="activeSince" header="Inicio Jornada" body={activeSinceLeadBodyTemplate}></Column>
                                <Column field="lastAssignedLead" header="Ultimo Lead" body={lastAssignedLeadBodyTemplate}></Column>
                            </DataTable>
                        </div>
                    </div>
                </div>
            </div>


1 Answers

My friend you have done right, just add this attribute "filterDisplay="menu"" to your DataTable.

<DataTable value={allUserActive} header={header} responsiveLayout="scroll" paginator rows={25} rowsPerPageOptions={[25, 50, 75]} filterDisplay="menu"></DataTable>
Related