Example using the Class component style:

import React, { Component } from "react";
import tableSort from "table-sort-js/table-sort.js";
export class App extends Component {

  componentDidMount() {
    tableSort()
    }

    render(){
      return(
      <div>
      <table className="table-sort">
          <thead>
              <tr>
                  <th>Alphabet</th>
                  <th className="order-by-desc">Order</th>
              </tr>
          </thead>
          <tbody>
                  <tr>
                      <td>Alpha</td>
                      <td>1</td>
                  </tr>
                  <tr>
                      <td>Bravo</td>
                      <td>2</td>
                  </tr>
                  <tr>
                      <td>Charlie</td>
                      <td>3</td>
                  </tr>
            </tbody>
        </table>
        </div>
      );
    }
  }
export default App;
        
        

Example using the functional hooks style:

import React, { useEffect,useState,} from "react";
import tableSort from "table-sort-js/table-sort.js";
function App(){

  useEffect(() => {
    tableSort()
  },[]);

      return(
      <div>
      <table className="table-sort">
          <thead>
              <tr>
                  <th>Alphabet</th>
                  <th className="order-by-desc">Order</th>
              </tr>
          </thead>
          <tbody>
                  <tr>
                      <td>Alpha</td>
                      <td>1</td>
                  </tr>
                  <tr>
                      <td>Bravo</td>
                      <td>2</td>
                  </tr>
                  <tr>
                      <td>Charlie</td>
                      <td>3</td>
                  </tr>
            </tbody>
        </table>
        </div>
      );
  }
export default App;

Example: Functional hooks style with dynamically importing table-sort-js on rendering of a React component.

import React, { useEffect, useState } from "react";
function App() {

  useEffect(() => {
    (async () => {
      const tableSortJs = await import("table-sort-js/table-sort.js");
      return tableSortJs;
    })().then((tableSortJs) => {
      tableSortJs.default();
    });
  }, []);

      return(
      <div>
      <table className="table-sort">
          <thead>
              <tr>
                  <th>Alphabet</th>
                  <th className="order-by-desc">Order</th>
              </tr>
          </thead>
          <tbody>
                  <tr>
                      <td>Alpha</td>
                      <td>1</td>
                  </tr>
                  <tr>
                      <td>Bravo</td>
                      <td>2</td>
                  </tr>
                  <tr>
                      <td>Charlie</td>
                      <td>3</td>
                  </tr>
            </tbody>
        </table>
        </div>
      );
  }
export default App;

Example using a <script> tag rather than npm:

import React, { Component } from "react";
export class App extends Component {
  componentDidMount() {
        const script = document.createElement("script");
        script.src = "table-sort.js";
        script.async = true;
        document.body.appendChild(script);
    }

    render(){
      return(
      <div>
      <table className="table-sort">
          <thead>
              <tr>
                  <th>Alphabet</th>
                  <th className="order-by-desc">Order</th>
              </tr>
          </thead>
          <tbody>
                  <tr>
                      <td>Alpha</td>
                      <td>1</td>
                  </tr>
                  <tr>
                      <td>Bravo</td>
                      <td>2</td>
                  </tr>
                  <tr>
                      <td>Charlie</td>
                      <td>3</td>
                  </tr>
            </tbody>
        </table>
        </div>
      );
    }
  }

export default App;