The DataTables React component is very nice.

I like how changing the data prop triggers a re-render. I utilized this behavior to implement a simple server-side fetch() that asynchronously populates the initial DataTable.

The following React component, called FetchDataTable, fetches the table data from a server using the browser API fetch. It is much easier to use than ajax for smaller tables.

FetchDataTable.jsx:

//
// FetchDataTable.jsx -- Wrapper for DataTables React component with fetch()
//

import { useState, useEffect, createContext } from 'react';

function useFetch(fetchUrl, fetchOptions) {
    const [tableData, setTableData] = useState([]/*empty table*/);
    const [isLoading, setIsLoading] = useState(true);
    const [errorMsg, setErrorMsg] = useState(null);

    useEffect(() => {

        const fetchData = async () => {

        try {
            setIsLoading(true);

            // fetch() default options
            const opts = Object.assign({
                method: 'GET', // or 'POST'
                cache: 'no-store',
                //credentials: 'same-origin', // default
                headers: { // if POST
                    'Content-Type': 'application/json; charset=utf-8',
                    //'Content-Type': 'application/x-www-form-url-encoded; charset=utf-8',
                },
                //body: JSON.stringify(data), // if POST
                redirect: 'error',
            }, fetchOptions);

            const response = await fetch(fetchUrl, opts);

            if (!response.ok) { // Got non-200 range response (404, etc)
                throw new Error(`Server request failed: Error ${response.status}`);
            }

            let text = await response.text();

            const json = JSON.parse(text); // Throws SyntaxError if bad JSON

            if (json.error) {
                throw new Error(json.error);
            }

            const data = json.data;

            if (Array.isArray(data)) {
                setTableData(data);
            } else {
                throw new Error('Server did not return data[]');
            }
        } catch(err) {
          setErrorMsg(err.message);
        } finally {
          setIsLoading(false);
        }
      };

      fetchData(); // Start the async data fetch

      return () => {
           // Do useEffect cleanup here
      };

    }, []/*once*/); // end useEffect()

    const props = {
        tableData,
        setTableData,
        errorMsg,
        isLoading
    };

    return props;
}

/*
Expected JSON response:
{
  data: [
        { "UserId": 123, "FirstName":"Bob", "LastName":"Smith", "Role": "Manager" },
        { "UserId": 456, "FirstName":"Roger", "LastName":"Kline", "Role": "Tech Support" },
        { "UserId": 789, "FirstName":"Julie", "LastName":"Adams", "Role": "Sales" }
  ]
}

If an error occurs, the expected JSON response is

{ error: "Error message" }
*/

////////////////////////////////////////////////////////////////////////////
//
// Wrapper for <DataTable data={tableData}>
//
//

// Context to pass the fetched data down to the DataTable component
export const FetchDataTableContext = createContext({});

export function FetchDataTable({fetchUrl, fetchOptions, children}) {

    // Note the use of braces {}, not []
    const {tableData, setTableData, errorMsg, isLoading} = useFetch(fetchUrl, fetchOptions);

    if (isLoading) {
        return (
            <h1>Loading data...</h1>
        );
    }

    if (errorMsg) {
        return (
            <p style={{ color: "red" }}>Error: {errorMsg}</p>
        );
    }

    const contextData = { tableData, setTableData };

    return(
        <FetchDataTableContext value={contextData}>
          {children}
        </FetchDataTableContext>
    );
}

The following is a simple React app that uses the FetchDataTable component to populate a DataTable.

The example uses Bootstrap 5.

App.jsx:

// Example App

import { createRoot } from 'react-dom/client';
import { useRef, useState, useEffect, useContext } from 'react';

import * as bootstrap from 'bootstrap';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-bs5';

import 'bootstrap/dist/css/bootstrap.css';

import { FetchDataTable, FetchDataTableContext } from './FetchDataTable';

DT.use(bootstrap);
DataTable.use(DT);

function MyDataTable()
{
    const dtTable = useRef(); // Create a DT ref (Normally only plain DOM elements are allowed here, but DataTable is a special case)

    //Provides context.tableData, context.setTableTable()
    const context = useContext(FetchDataTableContext);

    const options = {

        lengthMenu: [2, 10, 25, 50, 100],

        // Put other options here

        columns: [
            { data: 'UserId' },
            { data: 'FirstName' },
            { data: 'LastName' },
            { data: 'Role' },
        ],
    };

    return (
        <DataTable id="users" ref={dtTable}
              data={context.tableData}
              options={options}
              className="display table table-striped table-bordered">
            <thead>
                <th>UserId</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Role</th>
            </thead>
            <tbody>
            </tbody>
        </DataTable>
    );
}

/////////////////////////////////////////////////////////////////////////////
//
function App() {

    const fetchUrl = 'https://my-site-name/my-api'
    const fetchOptions = { 'method': 'GET' };

    return (
      <div className="container">
        <FetchDataTable fetchUrl={fetchUrl} fetchOptions={fetchOptions}>
          <MyDataTable />
        </FetchDataTable>
      </div>
    );
}

/////////////////////////////////////////////////////////////////////////////

export const root = createRoot(document.getElementById("root"));

root.render(
    <App />
);