How to update DataTables data?

help
1

I am using a local DataTables package. In my code, I am creating a React container which gets the data, which then passes it to a React component:

export default createContainer(({ params }) => {
    const dataHandle = Meteor.subscribe('ListsPub');
    const dataIsReady = dataHandle.ready();
    return {
        dataIsReady,
        data: dataIsReady ? ListsColl.find().fetch() : []
    };
}, ListTable);

My React component is as follows:

export default class ListTable extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount(){
        tableAPI = $('#ListTable').dataTable({
            ...
            data: this.props.data,
            ...
        }).api();
    }

    componentDidUpdate(){
        
    }

    render() {
            return (
                <div className="table-format-1">
                    <table id="ListTable">
                    </table>
                </div>
            );
    }
};

When the React component mounts, it seems as though the data is not quite ready, so the DataTable gets created with no records in. However, when the data is ready, I now need to update the DataTable with the data, so I’m wondering how to do this.
As the example show, I the tableAPI variable gets created with refers to the DataTable API, and I need to use this API to add the data:

tableAPI.clear();
tableAPI.rows.add(this.props.data);
tableAPI.draw();

Question is, how do I acheive this?

2

Figured it out. Updated three areas of the component:

constructor(props) {
    super(props);
    this.tableAPI = null;
}

and…

...
this.tableAPI = $('#auditsListTable').dataTable({
...

and…

    componentDidUpdate(){
        this.tableAPI.clear();
        this.tableAPI.rows.add(this.props.data);
        this.tableAPI.draw();
    }
2 Likes
3

Thank you - I was completely bummed by this issue and your solution totally saved me