如何在DevExtreme React DataGrid的汇总区或列下方添加搜索/选择框

问题说明 #

你尝试通过GroupItem嵌入NumberBox实现列下方或汇总区的搜索/选择功能但未成功，核心原因是GroupItem仅用于定义分组汇总的计算逻辑，不支持直接渲染自定义UI组件。以下是两种可行的实现方式：

1. 在列的页脚单元格添加搜索/选择框 #

利用Column组件的footerCellRender属性，自定义渲染对应组件：

import { TextBox, SelectBox } from 'devextreme-react';

// ... 其他原有代码
<Column 
    dataField="tokenNum" 
    caption={formatMessage('Token_Number')} 
    allowEditing={false} 
    alignment='left'
    footerCellRender={() => (
        <TextBox 
            placeholder="搜索令牌编号"
            onValueChanged={(e) => {
                // 本地数据过滤示例，远程数据源需调整filter参数
                const filteredData = tokenList.filter(item => 
                    item.tokenNum.toString().includes(e.value)
                );
                setTokenList(filteredData);
            }}
            style={{ width: '90%', margin: '0 auto' }}
        />
    )}
/>

<Column 
    dataField="tokenStatus" 
    caption={formatMessage('Status')} 
    allowEditing={false} 
    alignment='left'
    footerCellRender={() => (
        <SelectBox
            dataSource={['已发放', '已使用', '作废']}
            placeholder="筛选状态"
            onValueChanged={(e) => {
                const filteredData = tokenList.filter(item => 
                    item.tokenStatus === e.value
                );
                setTokenList(filteredData);
            }}
            style={{ width: '90%', margin: '0 auto' }}
        />
    )}
/>
// ... 其他原有代码

2. 在底部汇总区域添加自定义组件 #

通过Summary组件的TotalItem配置，使用render属性渲染搜索/选择框：

<DataGrid 
    noDataText='No Data Available!!!'
    dataSource={tokenList}
    showBorders={true}
>
    <Paging defaultPageSize={5} />
    <Pager
        visible={true}
        displayMode="full"
        showInfo={true}
        showPageSizeSelector={true} 
    />

    {/* 原有列配置 */}
    <Column dataField="tokenNum" caption={formatMessage('Token_Number')} allowEditing={false} alignment='left' />
    <Column dataField="truckNum" caption={formatMessage('Truck_Number')} allowEditing={false} alignment='left' />
    <Column dataField="friendlyName" caption={formatMessage('Friendly_Name')} allowEditing={false} alignment='left' />
    <Column dataField="commodityname" caption={formatMessage('Commodity')} allowEditing={false} alignment='left' />
    <Column dataField="noofbags" caption={formatMessage('No_Of_Bags')} allowEditing={false} alignment='left' />
    <Column dataField="transactiontype" caption={formatMessage('Transaction_Type')} allowEditing={false} alignment='left' />
    <Column dataField="tokenIssuedOn" caption={formatMessage('Token_Issue_Date')} allowEditing={false} alignment='left' />
    <Column dataField="tokenStatus" caption={formatMessage('Status')} allowEditing={false} alignment='left' />

    <Column
        allowSorting={false}
        caption="#"
        cellRender={(rowData) => shouldRender(rowData.data)}
    />

    {/* 汇总区域添加搜索/选择框 */}
    <Summary>
        <TotalItem
            column="tokenNum"
            render={() => (
                <div style={{ padding: '0 12px' }}>
                    <TextBox placeholder="搜索令牌编号" />
                </div>
            )}
        />
        <TotalItem
            column="tokenStatus"
            render={() => (
                <div style={{ padding: '0 12px' }}>
                    <SelectBox
                        dataSource={['已发放', '已使用', '作废']}
                        placeholder="筛选状态"
                    />
                </div>
            )}
        />
    </Summary>
</DataGrid>

关键注意点 #

• 确保已正确导入TextBox、SelectBox等组件
• 若使用远程数据源，需调整dataSource的filter参数而非直接过滤本地数组
• 禁止使用GroupItem渲染UI组件，它仅用于分组汇总计算（如求和、计数）

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