如何在某些列上显示CoreUI智能表的过滤器?

Question

我正在使用corei React Smart Table，我似乎无法弄清楚如何将过滤器仅放在某些列上。

我想让它看起来像这样:截图

文档在这里，但它似乎并没有真正显示如何:https://coreui.io/react/docs/components/smart-table/

任何帮助都将非常感激。

下面是我的代码:

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)
return (
<CCardBody>
<CButton
color="primary"
className="mb-2"
href={csvCode}
download="coreui-table-data.csv"
target="_blank"
>
Download current items (.csv)
</CButton>
<CSmartTable
columnFilter={{ column: 'id' }}
columnSorter
items={data}
itemsPerPage={5}
onFilteredItemsChange={setCurrentItems}
pagination
/>
</CCardBody>
)
}

export default SmartTableDownloadableExample

Answer 1

我明白了:

你需要添加一个columns对象:

const columns = [
{
key: 'name',
_style: { width: '40%' },
_props: { color: 'primary', className: 'fw-semibold' },
},
'registered',
{ key: 'role', filter: false, sorter: false, _style: { width: '20%' } },
{ key: 'status', _style: { width: '20%' } },
{
key: 'show_details',
label: '',
_style: { width: '1%' },
filter: false,
sorter: false,
_props: { color: 'primary', className: 'fw-semibold' },
},
]

然后在CSmartTable中:

<CSmartTable
**columns={columns}**
columnFilter
columnSorter
items={data}
itemsPerPage={5}
onFilteredItemsChange={setCurrentItems}
pagination
/>

按:https://coreui.io/react/docs/components/smart-table/