/* ANY ADDED ROW SHOULD HAVE THE 'DATA' CLASS ADDED */
    createdRow: function ( tr ) {
        $(tr).addClass('data');
    },

but i think this kills the hover/highlight function on the dataTable tbody rows. if i remove the createdRow function the highlighting works on hover but i lose the css from the color scheme i have

Is there a recipe somewhere for the migration requirements?

Any assistance is greatly appreciated.
Thanks in advance!

In the example https://editor.datatables.net/examples/datatables/parentChild.html

The user count is conditioned with a render.

var siteTable = $('#sites').DataTable({
ajax: '../php/sites.php',
columns: [
{ data: 'name' },
{
data: 'users',
render: function (data) {
return data.length;
}
}
],

Since this is not persistent data (client display only) I would like to update the displayed values on Add actions and Delete Actions. Seems unnecessary to round trip reloading the table to get the counters adjusted.

Thanks in advance.

1. there is a horizontal scrollbar on top of the table above the table headers
2. the first three columns need to be fixed when scrolling horizontally
3. the headers need to be fixed (sticky) on the top of the page when scrolling down
4. when scrolling down and right, the column headers need to stay fixed on the top of the page but they need to scroll horizontally, while not overlapping the headers of the left 3 fixed columns.

I don't want programming help right now, I just wonder if anyone has created an online example with these or similar properties. Is this technically possible at all? The examples I found for sticky headers [https://datatables.net/extensions/responsive/examples/column-control/fixedHeader.html] are too simple and don't scroll horizontally and don't have sticky columns.

Can you help me to display each item per line like that :
crea_identifiants
crea_mdp, verif_doublon
adhesion_rev

BR from Francis

PHP variable output with a single-row example data

columnsDef: array (
  0 => 
  (object) array(
     'title' => '<input  type=\'checkbox\'  id=\'configCboToggle\' style=\'padding:4px 0 0 0;\' value=\'0\' title=\'alle\'/>',
     'visible' => true,
     'className' => 'dt-head-center dt-body-center',
     'orderable' => false,
     'searchable' => false,
     'targets' => 
    array (
      0 => 0,
    ),
  ),
  1 => 
  (object) array(
     'title' => 'ID',
     'visible' => true,
     'className' => 'dt-head-center dt-body-center',
     'orderable' => true,
     'searchable' => true,
     'targets' => 
    array (
      0 => 1,
    ),
  ),
)

data: array (
  0 => 
  array (
    0 => 
    array (
      'text' = '<div class="chkWrap configCbo" style="display:inline-block;"><input type="checkbox" id="configCbo0" />
               <i class="fa-regular fa-trash-can fa-custom-hl fa-lg icon-rowDel" title="not deletable"></i>
               <i class="fa fa-gear fa-custom-hl fa-lg icon-rowAction" title="no action!"></i>
             </div>'
      'dataConfig' => 'id&trade;ID&#9638;12&#9638;fedit1&#9638;12&loz;rowdel&trade;1&loz;rowedit&trade;1&loz;rowzaction&trade;1&loz;idza&trade;',
    ),
    1 => '17',
  ),
)

js snippet setting the data into the table

  rowCallback: function(nRow, aData) {
      $('td:eq(0)', nRow).html(aData[0].text);
      $('td:eq(0)', nRow).attr('data-config', aData[0].dataConfig);
  }

html code looks like

<tr>
 <td class="dt-head-center dt-body-center"
    data-config="id&trade;Spalte1&#9638;17&#9638;fedit1&#9638;17&#9638;Spalte9&#9638;&#9638;fedit10&#9638;&loz;rowdel&trade;2&loz;rowedit&trade;1&loz;rowzaction&trade;0&loz;idza&trade;COL1&OElig;17~COL2&OElig;ROUTE1~COL4&OElig;K'KGGGOOO~COL5&OElig;"
    style="cursor: pointer;">
    <div class="chkWrap configCbo" style="display:inline-block;">
        <input type="checkbox" id="configCbo0">
        <i class="fa-regular fa-trash-can fa-custom-hl fa-lg icon-rowDel" title="not deletable"></i>
        <i class="fa fa-gear fa-custom-hl fa-lg icon-rowAction" title="no action!"></i>
    </div>
</td>

</tr>

How can I use the new select extension without losing my custom div

The line in the below code that is the issue (I think) is ' var rows = DataTables_Table_0.rows({ selected: true }).indexes();' which does not work. I attempted using the ID from inspect since there is no obvious instantiation of the datatable in question (at least that I can see).

Any ideas?

Thanks in advance!

{
    label: 'Users:',
    name: 'users.site',
    type: 'datatable',
    editor: usersEditor,
    submit: false,
    optionsPair: {
        value: 'users.id'
    },
    config: {
        ajax: {
            url: '../controllers/NEWuser/users.php',
            type: 'post',
            data: function (d) {
                if (siteTable) {
                    var selected = siteTable.row({ selected: true });
                    if (selected.any()) {
                        d.site = selected.data().id;
                    }
                }
            }
        },
        buttons: [
            { extend: 'create', editor: usersEditor },
            { extend: 'edit', editor: usersEditor },
           //{ extend: 'remove', editor: usersEditor }
 
 
            {
            extend: 'selected',
            text: 'Delete',
            action: function (e, dt, node, config) {
 
 
                var rows = DataTables_Table_0.rows({ selected: true }).indexes();
 
                usersEditor
                    .hide(usersEditor.fields())
                    .one('close', function () {
                        setTimeout(function () {
                            // Wait for animation
                            usersEditor.show(usersEditor.fields());
                        }, 500);
                    })
                    .edit(rows, {
                        title: 'Delete',
                        message:
                            rows.length === 1
                                ? 'Are you sure you wish to delete this row?'
                                : 'Are you sure you wish to delete these ' +
                                  rows.length +
                                  ' rows',
                        buttons: 'Delete'
                    })
                    .val(
                        'removed_date',
                        new Date().toISOString().split('T')[0]
                    );
            }
        }                  
 
        ],
        columns: [
            {
                data: 'users.first_name',
                title: 'First name'
            },
            {
                data: 'users.last_name',
                title: 'Last name'
            },
            {
                data: 'users.phone',
                title: 'Phone'
            }
        ]
    }
}

JS Bin test case
https://live.datatables.net/teripiyu/1/edit

I want to add custom mark.js options, such as wildcard search, but it only works when I trigger the search manually.

$("#example").mark("R*os", {
    wildcards: "enabled",
    caseSensitive: true
});

Using the same settings to initialize the DataTable, the search functionality in the search field is not working when typing.

var table = new DataTable('#example',
 { mark:
    {  wildcards: "enabled",
      caseSensitive: true
    }
 }                         
);

https://live.datatables.net/mijifezi/1/edit?html,css,output

<div class="dt-layout-row">
  <div class="dt-layout-cell dt-layout-full"></div>
  <div class="dt-length"></div>
  <div class="custom-div">hallo</div>
  <div class="dt-search"></div>
</div>

current

what i want

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 />
);

{data: "reporting_header.balance_CLBD_amount_amount", render: DataTable.render.number(null, null, 2), className: 'dt-body-right' }

But I must add a condition statement which calculate the value of the column:

{data: null, render: function ( data, type, row ) {
     if (data.reporting_header.balance_CLBD_credit_debit_indicator === 'DBIT') {
          return -1 * data.reporting_header.balance_CLBD_amount_amount;
     } else {
          return data.reporting_header.balance_CLBD_amount_amount;
     }
}}

How can I add to the second code the formating of the first?

            'layout': {
                topStart: 'buttons',
                topEnd: 'search',
                bottomStart: {
                    info: {
                        text: 'Displaying _START_ to _END_ of _TOTAL_ events'
                    }
                },
                bottomEnd: ''
            },

I have made a short video which shows the problem. Please see https://berricktest.co.uk/datatablesScrollbarProblem.mp4

I created a large test case that covers all the features I'm trying to use with version 2 (v2.3.4 at the time of writing this post) of the DataTables component as well as almost all the extensions.

But first, here are the specifics of my example:
- The DataTable uses the columnControl extension and has two header rows.
- The table rows contain HTML code and controls, as well as SVG-type images.
- Some columns are intentionally hidden to be displayed as child rows (the "Column Visibility" button is for example purposes only).

Here is the list of points I would like to achieve:

1./ Avoid exporting specific columns

As you can see, when I click on the "copy" button, I get the result below:

id  Name    E-mail  Date    SKU Qty Code    Info    Actions
00001   Name 1  email1@domain.com   2025-09-01          123     Delete
00002   Name 2  email2@domain.com   2025-08-05          456     Delete

There shouldn't be the "Info" and "Action" columns and I'm also missing the values ​​for the "SKU" and "Qty" columns.

2./ Avoid being able to move columns by dragging and dropping cells in row 2

What option should I apply to prevent the 2nd row from allowing column movement?

3./ Avoid retrieving the HTML code of the column header

As you can see, I'm creating a child row with the names of the hidden columns as well as the cell contents associated with the column.
But when I retrieve the column name (see code below), I get the entire HTML code, not just the column title.
Is there a way to avoid this?

    lRow.columns(".col-in-row-child").every( function(colIdx) {
      var lCell = oTable.cell(rowIdx, colIdx);
      var lColHeader = oTable.column(colIdx).header();
      if (lCell.data() !== "") {
        lExtraInfo += "<p><strong>" + $(lColHeader).html() + " : </strong>" + lCell.data() + "</p>";
      }
    } );

4./ In the SearchBuilder component, there should not be the 2 columns "Info" and "Action"

I used a class named .no-col-extended-search and set the "columnDefs" property to normally prevent them from being visible, but it didn't change anything.
What did I forget to do?

5./ In the SearchPanes component, the "SKU" and "Qty" columns are missing

What did I miss knowing that they appear well in the SearchPanes component.

6./ Would it be possible to have an option to reset the columnControl component's search field via the ESC keyboard key?

When you enter a filter with the keyboard, it is much faster to reset the field via a keyboard key than having to pick up your mouse again to click on the cross.

7./ Problem when refreshing DataTables when deleting a row

I'm providing a link to a problem I've already encountered so that you don't forget that it exists ;-)

https://datatables.net/forums/discussion/81377/problem-to-delete-a-row-in-datatables-works-in-v1-but-not-in-v2

cf. code below:

  $("body").on('click', 'button.btn[data-action="delete"]', function () {
    // Works well
    //mytable.row($(this).parents('tr')).remove().draw();

    // Does not work well
    deleteRow(this);
  });

  function deleteRow(ele) {
    var objInfo = $(ele).closest("tr");
    //console.log(ele);
    oTable.row($(objInfo)).remove().draw(false);
  }

8./ Problem when SearchPanes or searchBuilder is on the right of the layout

We have already discussed this issue and there is no solution to date. I am just bringing it up again so I don't forget ;-)

  var gDataTablesExtendedSearch = {
    "searchBuilder": {
      // If positionned to the right, searchBuilder is hidden on the right side (change "layout" comment to see the difference with right side)
    "searchPanes": {
      // If positionned to the right, searchPanes is hidden on the right side (change "layout" comment to see the difference with left side)

Thanks in advance for your help and I hope I could implement all these features to my DataTables, it would be just awesome!!!

Lolo.

I try to delete a row with DataTables v2.3.4

The code below works with v2 (extract from DataTables documentation)

var mytable = $("#dttable").DataTable(dataTableParam);

$("body").on('click', 'button.btn[data-action="delete"]', function () {
    mytable.row($(this).parents('tr')).remove().draw();
});

But this one does not work with v2.x (but works with v1.x)

var mytable = $("#dttable").DataTable(dataTableParam);

$("body").on('click', 'button.btn[data-action="delete"]', function () {
    deleteRow(this);
});

function deleteRow(ele) {
    var objInfo = $(ele).closest("tr");
    mytable.row($(objInfo)).remove().draw("page");
}

I suppose that something has changed with the new version but I would like to understand what is the difference between the 2 pieces of code

Otherwise nothing to do, is there a chance that the problem with Bootstrap 4 and Cards is resolved with the SearchPanes component when it is positioned to the right in the layout?

Thanks in advance for your help and have a nice day.

• Included libraries:
• DataTables 2.2.0, Editor 2.4.0, Buttons 3.2.0, Responsive 3.0.3, Select 3.0.0

The following code does not deselect the row but the check box is cleared.

For the table option I have

`            select: {
                style: 'os',
                selector: 'td:first-child'
            },`

On click of the check box

`        $('#invoiceTable tbody').on('click', '.selectPost', function (el) {
            //   var allData = invoiceTable.rows().data();
            let data = invoiceTable.row($(this).closest('tr')).data();
            let index = invoiceTable.row($(this).closest('tr')).index();
            let bank = ltgObj('sale.controlID').val();
            debugger;
            if (bank === '') {
                this.checked = false;
                //   invoiceTable.rows({ selected: true }).deselect();
                invoiceTable.row(index).deselect();
                ltgObj('sale.controlID').addClass('is-invalid');`

The class is updated and the checkbox is cleared but the row remains selected/highlighted and the footer shows one selected row. tried both rows and row option
Sorry but test case is difficult as no public access.
Thanks.

I tried using tblCountryCodes.column.adjust().responsive.recalc() but didn't make a difference.

<div>
    <table id="countryCodesTable" class="table table-striped table-bordered table-hover display responsive compact" **style="width:75%;"**>
        <thead>
            <tr class="info">
             <th>Country Code</th>
             <th>Country Name</th>
         </tr>
     </thead>
      <tbody>
      </tbody>
    </table>
    </div>
</div>

<script>
    function populateTable() {
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "Path to WebService API",
            cache: false,
            data: null,
        }).done(function (result) {
            tblCountryCodes.clear().draw();
            if (!result || result.d === "") {
            }
            else {
                jResult = JSON.parse(result.d);
                tblCountryCodes.rows.add(jResult).draw();
                tblCountryCodes.columns.adjust().responsive.recalc();
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            //alert(textStatus + ' - ' + errorThrown + '\n' + jqXHR.responseText);
        });
    }

    var tblCountryCodes = $("#countryCodesTable").DataTable({
        ...
        order: [0, 'asc'],
        autoWidth: true,
        paging: false,
        columns: [
            {
                data: "COUNTRY_CODE"
            }, {
                data: "COUNTRY_NAME"
            }
        ],
        pageLength: -1,
        deferRender: true,
    });
</script>

How can I make these textboxes follow column width values?

When I looked at js file, I noticed error occurred at:

if (o)
    switch (o[2]) {
        case "visIdx":
        case visible:
           return o[1] && o[1].match(....)

When I added quotes to visible, error went away.
I reverted the change because I am not 100% sure this is the issue and didn't want to mess with datatable's js file.

Also, I noticed when I click on filter text box, table gets sorted, as if I had clicked on column header itself. Is there a way of preventing this, or because filter is part of header, it just sorts it automatically?

HTML table has two header rows. The second row's total number of column is larger them total of top row's spanning columns, like below:

<table id="blah" class="...">
    <thead>
        <tr>
            <th colspan="2">Set 1</th>
            <th colspan="3">Set 2</th>
        </tr>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
            <th style=display:none">Col 6</th>
        </tr>
    <thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
<table id="blah" class="...">

Note that total of spanned columns is 5 and total of single span columns is 6.

This worked fine in 1.10 but broke in 2.3.2, throwing an exception in datatbles.js, in "__column_header = function (settings, column , row), with "TypeError: cannot read properties of undefined (reading 'unique')".
I found out that I had to add another <th> to first row, making it below to make the total number of columns match, or delete the first header row:

<table id="blah" class="...">
    <thead>
        <tr>
            <th colspan="2">Set 1</th>
            <th colspan="3">Set 2</th>
            <th style="display:none"></th>
        </tr>
        <tr>
            ...

Is this the case in data tables 2. that it is less forgiving than 1.10, or am I missing something?

I have noticed that when SQL command is executed by the NodeJS backend, that 3 queries are executed,

1st. a query to COUNT the total records. ( 1,448,364 in my example)
2nd. a query to COUNT the records 'filtered' (16,788 in my example)
3rd. the query to obtain the data.

I think this is used to get the counts for the info line:

Showing 1 to 23 of 16,788 entries (filtered from 1,448,364 total entries)

If there are zero filters being applied, the 1st and 2nd queries are identical (however BOTH queries are run). It would be great if there was someway to eliminate the need to run two identical queries back to back when no filtering is applied.

I mentioned this before with examples a while back (https://datatables.net/forums/discussion/72018) and at that time I thought it was just a plain duplicate query, now I realize the queries are only duplicated if there are no filtered being applied.

Also, if you are using a JOIN to get OPTIONS for one or more of the fields, these JOINS don't impact the COUNT, but do cause speed issues when work with large tables.

Here is an example of some SQL being run :

select count(`recruits`.`recruitID`) as `cnt` from `recruits` 
left join `stages` on `stages`.`stageID` = `recruits`.`statusID` 
left join `recruiters` as `rAsst` on `rAsst`.`agentref` = `recruits`.`RecruitmentAsst` 
left join `recruiters` as `recruiter` on `recruiter`.`agentref` = `recruits`.`Recruiter` 
where (`recruits`.`_search_current` > 0);

This can take 1.5sec to make the roundtrip to the SQL server and back, but the query below :

select count(`recruits`.`recruitID`) as `cnt` from `recruits` 
where (`recruits`.`_search_current` > 0);

This gives the same Count, but takes 0.2secs .

I understand some JOINS might change the total record count, but I think there are some situations that you can trust it will not.. Or perhaps you might consider allowing a configuration switch to allow the designers to set which behavior to use.

Once again, thanks for your product and thanks for looking at my ramblings.

    let selectedFacilityID = null;
    const facilityEditor = new $.fn.dataTable.Editor( {
        ajax: {
            url: baseUrl + "modules/database/ssp_facilities.php",
            type: "POST",
            error: function (xhr, error, thrown) {
                console.error('AJAX Error:', error, thrown);
                console.error('XHR:', xhr);
            }
        },
        idSrc: "Facility_ID",
        template: '#facForm',      
        fields: [ {
                name:  "Facility_Type",
                type:  "select",                  
                className: 'full block'                    
            }, {   
            ...
            }

        ]
    } );

    $('#printerTable tbody').on('click', 'tr', function () {
        var data = ( table.row( this ).data() );
        // The facility ID should come from PrisonFacilityListing, not form.FAC_ID
        selectedFacilityID = data.PrisonFacilityListing.Facility_ID;
        ...
        })
    }

    $('#editFacilityBtn').on('click', function () {
        if (!selectedFacilityID) {
            alert('No facility selected. Please select a row in the table first.');
            return;
        }
        
        console.log('Selected Facility ID:', selectedFacilityID);
        facilityEditor
            .edit(selectedFacilityID)
            .title('Quick Edit Facility')
            .buttons([
                {
                    label: 'Save',
                    className: 'btn-sm lnk-modal-button',
                    fn: function () {
                        this.submit();
                    }
                }, {
                    label: 'Cancel',
                    className: 'btn-sm lnk-modal-button',
                    fn: function () {
                        this.close();
                    }
                }
            ])
            .open();
    });

Standalone editor opens fine, template is fine, but no data, when watching the network calls, it never calls ssp_facilities.php
I can do this by hand, but standalone should be able to do this. What do I need to do to initiate the ajax call?

To be clear, selectFacilityID does contain the id, and it is a correct ID as it is visibly showing a proper left join in a different table, the one selected above.

What have other people done? Has anyone used DataTables.net on Angular latest without angular-datatables? If so, do you have sample code, helpful tips, etc?

Does anyone know why angular-datatables was archived? I can't find anything in the discussion, issues, website, etc.

Thank you. Very hesitant about what to do next!