Я использую mdbreact npm для таблиц реагирующих данных со следующим. js что я хочу добавить иконку fa fa с заголовком, но я не могу это сделать - PullRequest
Новая
       12

Я использую mdbreact npm для таблиц реагирующих данных со следующим. js что я хочу добавить иконку fa fa с заголовком, но я не могу это сделать

0 голосов
/ 02 февраля 2020

Я использую mdbreact npm для таблиц данных со следующим. js и я хочу добавить иконку fa fa sort с заголовком, но ниже она не работает, это мой код, и я уже попробовал его с 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 ()

Ответы [ 2 ]

2 голосов
/ 02 февраля 2020

Предполагается, что значением label является строка, поэтому я подозреваю, что поэтому она не работает. Документы здесь: https://mdbootstrap.com/docs/react/tables/datatables/

Вы не сможете использовать классные имена шрифтов, потому что вы не можете поместить элемент в метку.

Надеюсь У меня нет хорошего решения, но есть два варианта:

Я использовал таблицу реакции для своих таблиц данных и смог сделать то, что вы пытаетесь. Подумайте о переключении на таблицу реакции.

Не используйте в этом случае шрифт awesome, попробуйте найти сущность html, которая означает то же самое, например что-то из этого списка: https://dev.w3.org/html5/html-author/charref

0 голосов
/ 02 февраля 2020

Я решил это с помощью сущности, вот мой код: -

const columns = [{label: Customer Tag ⇵, поле: 'Customer_Tag', sort: 'as c', width: 270, атрибуты: {className: "fas fa-sort"}}, {label: Тип скидки ⇵, поле: 'Discount_Type', sort: 'as c', ширина: 270}, {label: Условие скидки ⇵, поле: 'Discount_Condition', сортировка: 'as c', ширина: 200}, {label: 'Enable / Disable', поле: 'status', сортировка: 'disabled', width: 100}, {label: ' Действие », поле:« действие », сортировка:« отключено », ширина: 100},

];

...