React, Semantic UI and DataTables.net

Source code viewer
import React from 'react';
import $ from "jquery"
import "datatables.net-se/js/dataTables.semanticui"
import "datatables.net-buttons-se"
import "datatables.net-se/css/dataTables.semanticui.css"
 
const columns = [
  { title: "x", data: "x" },
  { title: "y", data: "y" }
];
 
class DataTable extends React.Component {
  constructor(props) {
    super(props);
  }
 
  componentDidMount() {
    fetch('/list')
      .then(response => response.json())
      .then(data => {
        const table = $(this.refs.table).DataTable({
          data,
          columns,
          ordering: false,
          bDestroy: true,
          autoWidth: false,
          bLengthChange: false,
          bInfo: false,
          lengthChange: false,
          pageLength: 10,
          buttons: ['copy', 'csv', 'pdf'],
          language: {
            search: `<i class="search icon"></i>`
          }
        });
        table
            .buttons()
            .container()
            .appendTo($(
                "div.eight.column:eq(0)",
                table.table().container()
            ))
      })
  }
 
  componentWillUnmount() {
    $(this.refs.table)
      .DataTable()
      .destroy(true);
  }
 
  shouldComponentUpdate() {
    return false;
  }
 
  render() {
    return <table className="ui celled unstackable selectable table" ref="table" />;
  }
}
 
export default DataTable;
 
Programming Language: ECMAScript