0

我正在将 mdbreact npm 用于带有 next.js 的数据表，我想添加带有标题的 fa fa 排序图标，但它不起作用下面是我的代码，我已经用 CSS 尝试过：-

// This is how i import mdbreact after installation :- 
import { MDBDataTable, MDBBtn, MDBTable, MDBTableBody, MDBTableHead } from 'mdbreact';

// These Are The Heading Of The Table :-
const columns = 
[
{ label: 'Customer Tag' + <i class="fa fa-sort" aria-hidden="true"></i>, field: 'Customer_Tag', sort: 'asc', width: 150 },
{ label: 'Discount Type', field: 'Discount_Type', sort: 'asc', width: 270 },
{ label: 'Discount Condition', field: 'Discount_Condition', sort: 'asc', width: 200 },
{ label: 'Enable/Disable', field: 'status', sort: 'disabled', width: 100 },
{ label: 'Action', field: 'action', sort: 'disabled', width: 100 },
];

// 这是我的 MDBreact 表 return()

4

2 回答 2

2

label 的值应该是一个字符串，所以我怀疑这就是它不起作用的原因。此处的文档：https ://mdbootstrap.com/docs/react/tables/datatables/

您将无法使用字体真棒类名称，因为您不能在标签中放置元素。

我没有一个好的解决方案，但这里有两个选择：

我将 react-table 用于我的数据表，并且能够执行您正在尝试的操作。考虑切换到 react-table。

在这种情况下不要使用很棒的字体，尝试找到一个具有相同含义的 html 实体，例如以下列表中的内容：https ://dev.w3.org/html5/html-author/charref

于 2020-02-02T06:33:38.867 回答
0

我用实体解决了它，这是我的代码：-

const columns = [ { label: Customer Tag ⇵, field: 'Customer_Tag', sort: 'asc', width: 270, attributes: {className :"fas fa-sort"} }, { label: Discount Type ⇵, field: 'Discount_Type'，排序：'asc'，宽度：270 }，{标签：折扣条件⇵，字段：'Discount_Condition'，排序：'asc'，宽度：200}，{标签：'启用/禁用'，字段： '状态'，排序：'禁用'，宽度：100 }，{标签：'动作'，字段：'动作'，排序：'禁用'，宽度：100 }，

];

于 2020-02-02T10:52:51.320 回答