核心 UI 管理员 - 外部分类器图标未显示 React js

Question

我正在为我的 React JS 项目使用核心 UI 管理。问题是，我想应用外部排序，但箭头没有显示在我的列上，只有一列除外。我还在列中提供了字符串数据。有什么方法可以在每一列上添加排序器图标 header 并使其可点击以进行自定义排序。

                  <CDataTable
                    items={clientState.data}
                    fields={[
                        { key: ' ', sorter: true, _style: { width: "1%" }  },
                        { key: ‘clientName’, sorter: true, },
                        { key: 'createdBy', sorter: true , },
                       
                    ]}

                    hover
                    sorter={{ external: true }}
                    onSorterValueChange={(e) => {
                        var typeSort = e.asc ? "ASC" : "DESC"
                        alert(typeSort)
                    }}
                    striped
                    clickableRows

                    scopedSlots={{

                        ' ':
                            (item, index) => (
                                <td>
                                    <div className="has-center-v-middle">
                                        <ImageMiniItem imageURL={item.imageURL} />
                                    </div>
                                </td>
                            ),
                        ‘clientName':
                            (item, index) => (
                                <td>
                                    {item.name}
                                </td>
                            ),
                        

                        'createdBy':
                            (item, index) => (
                                <td>
                                    {item.createdBy}
                                </td>
                            ),
                      
                            )
                    }}

                />

Answer 1

我只是选择了它的替代方案，并在其中使用了简单的基于 HTML 的表格，是的，您当然可以直接将 html 添加到其中并应用自定义排序。

<table>
<th onClick={(e) => { sortFunc("firstName", e) }}>first Name</th>
...
</table>

尽管我希望核心 UI 能够很好地处理我的情况。

Answer 2

没有出现箭头图标的原因只有 2 个。

密钥与传入的数据不相等（不要与标签混淆）
未在数据中指定排序器标志table（我知道你做了）

出于上述第一个原因。你需要这样的东西。

 name: (item, index) => (<td> {item.name}</td>),

在字段中，您可以这样做来维护标签

 { key: 'name', label: 'clientName', sorter: true, },

额外的：

无需在字段中再次指定 'sorter' 标志，键和名称就足够了，因为在 table.

核心 UI 管理员 - 外部分类器图标未显示 React js

Core UI Admin - External sorter icon not shown React js

sorting

admin

reactjs

core-ui