MDBDataTable не может отсортировать столбец, если ячейка содержит HTML - PullRequest
Новая
       21

MDBDataTable не может отсортировать столбец, если ячейка содержит HTML

0 голосов
/ 29 мая 2020

Я пытаюсь создать сортируемую и доступную для поиска таблицу в reactjs, используя mdbreact вот так 

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const tableData = {
    columns: [
        {
            field: 'first_name',
            label: 'First Name'
        },
        {
            field: 'last_name',
            label: 'Last Name'
        },
        {
            field: 'age',
            label: 'Age'
        }
    ],
    rows: [
        {
            first_name: <a href='/example-route/John'>John</a>,
            last_name: 'Smith',
            age: 29
        },
        {
            first_name: <a href='/example-route/Jane'>Jane</a>,
            last_name: 'Doe',
            age: 34
        }
    ]
};

class Table extends React.Component {
    render() {
        return(
            <MDBDataTable data={tableData} />
        )
    }
}

export default Table;

Таблица отображается нормально, но потому что в теле есть теги <a></a> , соответствующий столбец становится несортированным и недоступным для поиска .

Я уже несколько дней думал о том, как сделать этот столбец доступным для сортировки и поиска, но после выполнения количество чтений Я ничего не нашел.

ОБНОВЛЕНИЕ

Кажется, что в Chrome столбец недоступен для поиска и сортировки, но в Firefox столбец столбец можно сортировать, но нельзя искать.

1 Ответ

0 голосов
/ 29 мая 2020

ref: https://mdbootstrap.com/support/react/make-a-mdbdatatable-row-clickable/

Я нашел зарезервированный ключ строки с именем clickEvent, который можно использовать так: 

import React from 'react';
import { MDBDataTable } from 'mdbreact';

class Table extends React.Component {

    handleClick(name) {
        console.log(name);
    }

    render() {
        return(
            <MDBDataTable data={{
                columns: [
                    {
                        field: 'first_name',
                        label: 'First Name'
                    },
                    {
                        field: 'last_name',
                        label: 'Last Name'
                    },
                    {
                        field: 'age',
                        label: 'Age'
                    }
                ],
                rows: [
                    {
                        first_name: 'John',
                        last_name: 'Smith',
                        age: 29,
                        clickEvent: () => this.handleClick('john')
                    },
                    {
                        first_name: 'Jane',
                        last_name: 'Doe',
                        age: 34,
                        clickEvent: () => this.handleClick('jane')
                    }
                ]
            }} />
        )
    }
}

export default Table;

Тогда я могу обрабатывать событие щелчка любым способом, может быть, используя window.location.href = '/' + name; для имитации требуемой функциональности тега <a>.

...