如何在CoreUI React Smart Table中仅为指定列显示筛选器

你要实现的效果参考：

你的配置写法有误：columnFilter是列筛选的全局开关，仅支持布尔值传入，你写的columnFilter={{ column: 'id' }}属于无效参数，组件不会按这个规则渲染筛选器。

正确实现逻辑如下：

• 把columnFilter设为true，全局开启列筛选功能
• 通过columns属性显式声明所有表格列，逐列配置filter参数：需要显示筛选器的列设为true，不需要的设为false

如果不传columns配置，组件会自动从items数据里提取所有字段，默认给所有列都加上筛选器，这也是你翻文档没找到单列表筛选配置的原因。

修改后的完整代码 #

import React, { useState } from 'react'
import { CCardBody, CButton, CSmartTable } from '@coreui/react-pro'
import data from './_data.js'

const SmartTableDownloadableExample = () => {
  const [currentItems, setCurrentItems] = useState(data)

  const csvContent = currentItems.map((item) => Object.values(item).join(',')).join('\n')
  const csvCode = 'data:text/csv;charset=utf-8,SEP=,%0A' + encodeURIComponent(csvContent)

  // 替换为你实际使用的表格字段，仅需要筛选的列配置filter: true
  const columns = [
    { key: 'id', filter: true },
    { key: 'name', filter: false },
    { key: 'registerTime', filter: false },
    { key: 'role', filter: false },
    { key: 'status', filter: false }
  ]

  return (
    <CCardBody>
      <CButton
        color="primary"
        className="mb-2"
        href={csvCode}
        download="coreui-table-data.csv"
        target="_blank"
      >
        Download current items (.csv)
      </CButton>
      <CSmartTable
        columnFilter={true}
        columns={columns}
        columnSorter
        items={data}
        itemsPerPage={5}
        onFilteredItemsChange={setCurrentItems}
        pagination
      />
    </CCardBody>
  )
}

export default SmartTableDownloadableExample

如果需要自定义筛选输入框的样式、选项、交互逻辑，可以给对应列的filter属性传入自定义的React渲染函数，完全匹配你参考的效果。

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