Как правильно использовать datatables.net вactjs?

Question

В последнее время я пытаюсь использовать datatables.net вactjs, но мне сложно конвертировать jQuery в реагировать. Я попытался документировать документацию datatables.net, но я не смог заставить его работать должным образом, после того, как все отреагировали на возвращение, чтобы использовать его виртуальный Dom. что приводит к проблемам.

Я попробовал это с помощью ref и загрузил его в ComponentDidMount(), но я не смог настроить заголовок таблицы, столбцы или использовать полную руководящую документацию.

import React, { Component } from 'react';
import dt from 'datatables.net-bs';

class DataTables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:  [
        {
          "id": "1",
          "name": "Tiger Nixon",
          "position": "System Architect",
          "salary": "$320,800",
          "start_date": "2011/04/25",
          "office": "Edinburgh",
          "extn": "5421"
        },
        {
          "id": "2",
          "name": "Garrett Winters",
          "position": "Accountant",
          "salary": "$170,750",
          "start_date": "2011/07/25",
          "office": "Tokyo",
          "extn": "8422"
        }
      ]
    };
  }

  componentDidMount() {
    this.$el = $(this.el);
    this.$el.DataTable = dt;
    this.$el.DataTable({
      data: this.state.data,
      columns: [
        { data: 'name', title: 'Name' },
        { data: 'position', title: 'Position' },
        { data: 'office', title: 'Office' },
        { data: 'extn', title: 'Extn' },
        { data: 'start_date', title: 'Start_date' },
        { data: 'salary', title: 'Salary' }
      ]
    });
  }

  componentWillUnmount() {
    $('.display')
      .find('table')
      .DataTable()
      .destroy(true);
  }

  render() {
    return (
      <div>
        <table className="display" width="100%" ref={el => this.el = el} />
      </div>
    );
  }
}

export default DataTables;

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

Ожидаемый результат - получить пример того, как использовать таблицы данных с реагированием на полнофункциональную таблицу, выбор строки, щелчок строки, редактирование ячейки, настраиваемая ячейка и пользовательский столбец. пример, чтобы понять, как использовать любые документы в datatable, которые сделаны для jQuery в реакции.

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