PrimeReact DataTable如何添加列筛选实现按名称字段过滤

你已经在DataTable组件上配置了filterDisplay="row"开启行内筛选布局，只需要给目标列添加少量属性即可实现需求，不需要额外编写复杂的筛选逻辑。

修改步骤 #

1. 定位到field="name"的用户名列配置
2. 给该列的<Column>标签添加filter属性，开启该列的筛选功能
3. （可选）添加filterMatchMode="contains"明确指定筛选规则为「文本包含匹配」，添加filterPlaceholder属性设置筛选框的占位提示文字

PrimeReact会自动为开启filter属性的文本列渲染输入型筛选框，和你给出的目标效果完全一致，不需要自定义filterElement。

修改后的完整代码 #

<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"
                        filter
                        filterMatchMode="contains"
                        filterPlaceholder="输入用户名搜索"
                    ></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>

可选配置 #

• 如果不需要列筛选的下拉规则菜单，可以给名称列也加上showFilterMenu={false}，和你现有Grupo列的配置保持一致
• 如果需要调整筛选匹配规则，将filterMatchMode的值改为startsWith（开头匹配）、equals（精确匹配）即可
• 其他列如果需要加筛选，直接给对应<Column>添加filter属性即可，日期、数字、布尔类型的列PrimeReact会自动渲染适配的筛选控件，需要自定义交互时再传入filterElement即可。

内容的提问来源于stack exchange，提问作者Motias