27 August 2019

Working example of Semantic UI variation of "DataTables.net" on ES6 variation of React.

Source code viewer
  1. import React from 'react';
  2. import $ from "jquery"
  3. import "datatables.net-se/js/dataTables.semanticui"
  4. import "datatables.net-buttons-se"
  5. import "datatables.net-se/css/dataTables.semanticui.css"
  6.  
  7. const columns = [
  8. { title: "x", data: "x" },
  9. { title: "y", data: "y" }
  10. ];
  11.  
  12. class DataTable extends React.Component {
  13. constructor(props) {
  14. super(props);
  15. }
  16.  
  17. componentDidMount() {
  18. fetch('/list')
  19. .then(response => response.json())
  20. .then(data => {
  21. const table = $(this.refs.table).DataTable({
  22. data,
  23. columns,
  24. ordering: false,
  25. bDestroy: true,
  26. autoWidth: false,
  27. bLengthChange: false,
  28. bInfo: false,
  29. lengthChange: false,
  30. pageLength: 10,
  31. buttons: ['copy', 'csv', 'pdf'],
  32. language: {
  33. search: `<i class="search icon"></i>`
  34. }
  35. });
  36. table
  37. .buttons()
  38. .container()
  39. .appendTo($(
  40. "div.eight.column:eq(0)",
  41. table.table().container()
  42. ))
  43. })
  44. }
  45.  
  46. componentWillUnmount() {
  47. $(this.refs.table)
  48. .DataTable()
  49. .destroy(true);
  50. }
  51.  
  52. shouldComponentUpdate() {
  53. return false;
  54. }
  55.  
  56. render() {
  57. return <table className="ui celled unstackable selectable table" ref="table" />;
  58. }
  59. }
  60.  
  61. export default DataTable;
  62.  
Programming Language: ECMAScript